【STEP.01】
JavaScriptとは?
~JavaScriptの歴史を学ぼう!~

JavaScriptとは

JavaScriptは、Netscape Communications社によって開発された、ブラウザー向けのスクリプト言語です。

開発当初はLiveScriptと呼ばれていましたが、当時注目を浴びていたJava言語にあやかって、その後、JavaScriptと名前を改めることとなります。

このため誤解を招きやすいのですが、JavaとJavaScriptとは言語仕様に似た部分はあるものの、まったくの別言語であり、互換性もありません。

JavaScriptは、1995年にNetscape Navigator2.0で実装されたのを皮切りに、1996年にはInternet Explorer3.0でも実装されたのち、ブラウザー標準のスクリプト言語として定着しました。

その後、20余年を経て、現在はGoogle Chrome、Firefox、Safari、Microsoft Edgeなど、主要なブラウザーのほとんどで実装されています。

もっとも、そんなJavaScriptですが、その歴史は必ずしも平坦であったとはいえません。

むしろ苦難と不遇の長い時代を経てきた言語だといえます。

JavaScriptの歴史

1990年代後半は初期JavaScriptの全盛ともいえる時代でした。

たとえば

  • ある要素にマウスポインタ―を当てると文字列が点滅する
  • ステータスバーに文字列が流れていく
  • ページ切り替えの際にフェードイン/フェードアウトなどのトランジション効果を適用する

などなど、さまざまなエフェクトがJavaScriptによって実現されていました。

もちろん、これらの一部は今もJavaScriptの重要な用途の一部ですし、適切に利用すればページの見栄えや使い勝手を向上させることができます。

しかし、当時はこれが過熱していました。

「とりあえず動的なページを作りたい」という欲求の下に、多くの人々が過剰な装飾をJavaScriptで盛り込んでいきました。

その結果、装飾過剰で、使い勝手も悪い、要は「ダサい」ページが量産されることになりました。

このような過熱はそれほど長く続くはずもなく、比較的早い段階ですたれていくことになるわけですが、JavaScriptは「ダサいページを作成するための言語」「プログラミングの素人が使う低俗な言語」というイメージだけが定着し、不遇の時代へと入っていくことになります。

また、この頃はブラウザーベンダーが個々にJavaScriptの実装を拡張していた時代でもありました。

「より目立つ、より派手な機能を」そんな空気の中で、ユーザーは置き去りにされ、ブラウザー間の仕様差(クロスブラウザー問題)だけが広がっていったのです。

この結果、ユーザーはそれぞれのブラウザーに対応したコードを記述する必要に迫られ、そんな面倒さが、JavaScriptからユーザーの足をさらに遠のかせることになります。

はたまた、この時代、JavaScriptの実装に絡んだブラウザーのセキュリティホールが断続的に見つかったことも、JavaScriptのマイナスイメージをより一層定着させる一因となりました。

復権のきっかけはAjax、そしてHTML5の時代へ

そのような状況に光明が見えたのが2005年、Ajax(Asynchronous JavaScript + XML)という技術が登場した時です。

Ajaxとは、ひとことで言うならば、ブラウザー上でデスクトップアプリライクなページを作成するための技術です。

HTML、CSS、JavaScriptといったブラウザー標準の技術だけでリッチなコンテンツを作成できることから、Ajax技術は瞬く間に普及を遂げました。

この頃には、ブラウザーベンダーによる機能拡張合戦も落ち着き、互換性の問題も少なくなっていました。

国際的な標準化団体であるECMA Internationalの下で、JavaScriptの標準化が進められ、言語としても確かな進化を遂げていました。

このような背景もあって、JavaScriptという言語の価値が見直される機会が、ようやく訪れたのです。

また、Ajax技術の普及によって、JavaScriptは「HTMLやCSSの表現力を傍らで補うだけの言語」ではなくなりました。

「Ajax技術を支える中核」と見なされるようになったことで、プログラミング言語の手法にも変化の兆しが表れ始めます。

従来のように、関数を組み合わせるだけの簡易な書き方だけでなく、大規模な開発にも耐えられるオブジェクト指向的な書き方を求められるようになってきたのです。

さらに2000年代後半には、HTML5の登場がこの状況に追い風を与えます。

HTML5では、マークアップとしての充実に加え、アプリ開発のためのJavaScript APIを強化したのが特徴です。

HTML5の勧告そのものは2014年ですが、2008年以降リリースされたブラウザーの多くがいち早くHTML5に対応しており、段階的ながら利用が進んでいきました。

【HTML5で追加された主なJavaScript API】
機能概要
Geolocation APIユーザーの地理的な位置を取得
CanvasJavaScriptから動的に画像を描画
File APIローカルのファイルシステムを読み書き
Web Storageローカルデータを保存するためのストレージ
Indexed Databaseキー/値のセットでJavaScriptのオブジェクトを管理
Web WorkersJavaScriptをバックグラウンドで並列実行
Web Socketsクライアントサーバー間の双方向通信を行うためのAPI

HTML5によって、ブラウザーのネイティブな機能だけで実現できる範囲が、格段に広がったのです。

加えて、スマホ/タブレット普及によるRIA技術(Flash/Silverlight)の衰退、SPA(Single Page Application)の流行などが、ブラウザーネイティブなJavaScript人気に、拍車をかけることになります。

MEMO
SPA(Single Page Application)とは
SPA(Single Page Application)とは、名前の通り、単一のページで構成されるWebページのことです。

初回のアクセスでは、まずページ全体を取得しますが、以降のページ更新は基本的にJavaScriptでまかないます。

JavaScriptだけでまかないきれない場合(たとえば、データの取得、更新など)は、Ajaxなどの非同期通信を利用して実装します。

デスクトップアプリによく似た操作性、そして、敏速な動作を実現するためのアプローチとして、近年、にわかに注目を浴びているキーワードです。

マイナスイメージの誤解

そもそもJavaScriptに対するマイナスイメージは、そのほとんどがイメージ先行型の誤解でもありました。

たとえば、「JavaScriptは素人向けの簡易なだけの言語」とうのは間違いです。

JavaScriptは、JavaやC#のような本格的なプログラミング言語と同様、れっきとしたオブジェクト指向言語です。

実際、JavaScriptが「Ajax技術を支える言語」と見なされるようになったことで、以降、プログラミングスタイル自体にも変化が生じています。

従来型の手続き的な記法から、本格的なオブジェクト指向でのコーディングスタイルが求められるようになっています。

次に、「JavaScriptにはセキュリティホールが多い」という誤解です。

これは一見すると正しいように思えますが、よくよく考えてみると、JavaScriptの問題ではなく、JavaScriptを実装するブラウザーの問題です。

つまり、言語として問題があるわけではないのです。

また、ブラウザーの実装も長い歴史の中でずいぶんと落ち着いてきました。

昨今ではブラウザーベンダーのセキュリティ意識も高まった結果、JavaScriptに関わるセキュリティホールはかなり少なくなりつつあります。

そして、「JavaScriptにはクロスブラウザー問題があるので、開発生産性が低い」という誤解です。

これも先ほどと同様、ブラウザーの実装の問題です。

そして、繰り返し述べているように、標準化の流れの下で、互換性の問題は確実に軽減されつつあります。

言語としての3つの特徴

上記のような歴史をたどってきたJavaScriptですが、言語としての特徴は、大きく以下の3つです。

スクリプト言語である

スクリプト言語とは、要は簡易であることを目的として作られたプログラミング言語のことです。

すでに他の言語を学んだことがある方はもちろん、プログラミングが初めてという方も短期間で習得が可能です。

その一方で、オブジェクト指向的な構造も持ち合わせており、再利用性/保守性に富んだコードも記述しやすい作りになっています。

インタプリタ―型の言語である

インタプリタ―型言語とは、プログラムを先頭から逐一解析し、コンピューターに理解できる形式に翻訳しながら実行していく言語のことです。

このため、いわゆるコンパイル言語に比べると動作が遅いという問題はありますが、反面、プログラムを実行するためにコンパイル(一括翻訳)のような特別な手続きは必要ないというメリットもあります。

コードを書いて、そのまま実行できる手軽さが魅力です。

さまざまな環境で利用できる

JavaScriptはもともとはブラウザー上で動作することを想定して作られた言語ですが、現在はブラウザー上での用途にとどまりません。

JavaScript、または、JavaScript(ECMAScript)をベースとして作られた言語が、実にさまざまな環境で動作しています。

【JavaScript(派生)言語の主な実行環境】
環境概要
Node.jsサーバーサイド用途を中心としたJavaScript実行環境
Windows Script HostWindows環境のスクリプト実行環境
Java Platform、standard EditionJava言語の実行環境
Android/iOS(WebView)Webページを表示するための組み込みブラウザー

JavaScript一つ学んでおけば、その知識はブラウザー前提での開発にとまらず、さまざまな環境で活用できます。

ECMAScript

ECMAScriptとは

ECMAScriptとは、標準化団体ECMA Internationalによって標準化されたJavaScriptの言語仕様です。

ブラウザー上で動作するJavaScriptは、基本的に、このECMAScriptの仕様をもとに実装されています。

標準JavaScript=ECMAScriptといっても良いでしょう。

ECMAScriptのバージョン

ECMAScriptのバージョンには、以下のようなものがあります。

【ECMAScriptのバージョン】
バージョン公開日主な変更点
11997年6月初期バージョン
21998年6月ISO/IEC 16262への対応(変更はなし)
31999年12月正規表現、例外処理など
4複雑化のため、仕様を放棄
52009年12月Strictモード、getter/setter、組み込みオブジェクトの強化
5.12011年6月
6(2015)2015年6月
20162016年6月べき乗演算子、includes(Array)
20172017年6月async/await、Object.values、entries
20182018年6月正規表現の強化、finally、オブジェクトの「…」演算子
20192019年6月Array#flat/flatMap、Object.fromEntries

1997年の初版から20年以上にわたって改訂が重ねられていますが、特に大きな改訂が加えられたのがECMAScript2015(ES2015)です。

以下は、ES2015での主な変更点です。

  • class命令によるJava/C#ライクなクラス定義が可能
  • import/export命令によるコードのモジュール化に対応
  • 関数構文の改善(引数のデフォルト値、可変長引数、アロー関数など)
  • let/const命令によるブロックスコープの導入
  • for…of命令による値の列挙
  • イテレーター/ジェネレーターによる列挙可能なオブジェクトの操作が可能に
  • Promise、コレクション(Map/Set)、Proxyなどの組み込みオブジェクトを追加
  • String/Number/Array/Objectなど、既存の組み込みオブジェクトの拡充

さまざまな機能が追加されています。

その中でもclass命令の導入は画期的です。

これまでJavaScriptでは何かと不便だったオブジェクト指向プログラミングが、ようやく他の言語に近い、直感的な形で行えるようになったのです。

実際にアプリを開発する際にも、ES2015構文を利用するかどうかによって、生産性は大きく変化します。

ECMAScript仕様策定の流れ

ES2015以前は、提案された仕様がすべて合意できたところでリリースされていました。

このようなルールの下では、ある機能が合意に至らない場合、言語そのもののリリースを見送らなければなりませんでした。

ES3からES5まで(ES4の放棄を経て)10年、ES5からES2015まで6年もの年月を要したのも、このためです。

そこでES2015以降では、Proposalsベースでの仕様策定プロセスを採用しています。

新たな機能はProposals(提案書)としてまとめられ、議論もProposals単位で進められます。

議論の段階は、Stage-Xというレベルで管理されます。

【仕様確定までのStage-X】
Stage概要
0Strawman(アイデアレベル)
1Proposals(提案。潜在的な課題を特定)
2Draft(実験的。構文を明確化)
3Candidate(仕様準拠。実装/フィードバックを求める)
4Finished(仕様として確定)

Stage-4に到達したProposalsはrc39/ecma262に随時まとめられ、毎年決まった時期にES20XXとしてリリースされます。

このように、日々最新版を更新していく仕様のことをLive Standardと呼びます(より厳密な意味での、最新仕様です)。

いわゆるES20XXは、Live Standardのスナップショット版と言っても良いでしょう。

最新のECMAScriptを利用するには?

ECMAScriptはあくまで言語仕様の取り決めにすぎません。

ブラウザーがきちんと仕様を反映させるまでは、いくらかの時間が必要となります。

現時点での対応状況を確認するには、ECMAScript compatibility tableなどのサイトが参考になるでしょう。

ECMAScriptcompatibilitytable

近年では、各種ブラウザーともに機能強化のサイクルを短縮し、Live Standardをいち早く取り込んでいますが、特に新しい機能を利用する場合には、対応状況をあらかじめ確認するようにしてください。

また、Internet Explorer11(IE11)は、既に開発が終了したブラウザーであるため、ECMAScriptの新しい機能には、基本対応していません。

IE11(もしくはそれ以前)のサポートを外せない状況で、ES20XXを利用した場合には、Babelのようなトランスコンパイラーのお世話になる必要があります。

トランスコンパイラーとは、ES2015以降の構文で書かれたコードをES5相当のコードに変換するためのツールです。

ES5相応のコードであれば、現在メジャーに利用されているブラウザーであれば準拠しているので、問題なく動作できます。

Babelの使い方については以下の参考ページをご覧ください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です