JavaScriptの誕生から現在までを概観する

JavaScriptの誕生

  • 1995年、ネットスケープコミュニケーションズ社のプログラマーだった、ブレンダン・アイク氏が開発
  • ネットスケープコミュニケーションズ社がリリースしたブラウザ(Netscape Navigator)に実装された
  • 当初はLiveScript(ライブスプリクト)という名称だった

JavaScript標準化の流れ

  • 1996年、マイクロソフト社がInternet Exploler3.0をリリース
  • マイクロソフト社はInternet ExplolerにJavascriptを実装したいと考えたが、ネットスケープ社から使用許可を出なかったため、JScriptを独自に開発
  • 1997年、ネットスケープコミュニケーションズ社がJScriptとJavaScriptの非互換性の問題を解決するため、国際的な標準化団体「ECMA」に JavaScript の標準化を申請したことにより、ECMAScriptが誕生
  • ECMAScriptは、様々な異なる環境で動作するJavascriptの中核となる共通の言語仕様をまとめたもの
    • サーバーサイド(Node.js)-クライアントサイド間
    • ブラウザ間

JavaScriptの低迷期

  • JS起因のクラッシュや、セキュリティ面での不安要素も高まり、JavaScript機能自体をオフにしてしまう人が続出
  • また、動きのあるコンテンツは、動作が軽い Flashを起用するのが主流になった

JavaScriptの復権

  • JavaScript の技術「A-jax」を採用したGoogleマップが登場したことで、JavaScriptが復権した
  • また、jQueryの登場により人気に拍車がかかる
  • 2008年、Node.jsの誕生により、JavaScriptは一気に拡大
    • サーバーサイドでもjsが書けるように

CommonJSプロジェクトの開始

  • 2009年1月、サーバーサイドでもJavaScriptを使えるようにしたいということでServerJSというプロジェクトが立ち上がる
  • 2009年8月、当初はサーバサイドのAPI仕様だけを定めていたが、サーバーサイドだけではなく、プロジェクトがより広い範囲のAPIを対象とすることを示すために現在のCommonJSにへ名称変更された

この頃のJavaScriptの課題

コード量が増えてくると、自ずとそれらの保守性を高めるために複数のjsファイルに分割することになるのが自然な流れだが、これにはいくつかの課題があった

名前空間の衝突

  • ファイルを分割しても各ファイルの変数のスコープは閉じられていないため(グローバル)、名前空間の衝突により、変数が意図しない値になってしまい、バグる元になる(もしくはバグらないように祈る)

依存関係の管理が煩雑

  • ファイルを分割すると、scriptタグを使用して複数のjsファイルを読み込ませる方法を取らざるを得ないため、ファイル間に依存関係が生まれる
  • 依存関係は、例えば、foo.jsを使用するためにはhoge.jsが先に読み込まれている必要がある等である。自身が作成したjsファイルはもちろん、外部ライブラリについても同様の問題が生じる可能性がある
  • JavaScriptには他言語にあるようなモジュールの定義や仕組みが言語仕様として用意されておらず、依存関係を考えてscriptタグを順番に並べたりしていた(通称頑張る)
  • これらの課題は時系列としては、サーバーJs側で解消されたのち、追ってブラウザJsでも解決された

サーバーサイドJs

名前空間

  • CommonJSのモジュールシステムのスコープ概念によって解決された
    • モジュール内のスコープは閉じられている(他のモジュールに影響しない)
    • 同じ変数名の変数が複数のjsファイルで定義されていたとしても、使いたい変数が定義されているjsファイルからrequireする

Node.jsの誕生

  • 2009年Node.jsがリリース
  • CommonJSのモジュールAPI仕様に準拠
  • CommonJSのプロジェクトはあまり活発化しなかったのに対し、Node.jsのコミュニティが独自の進化を遂げる

依存関係

  • モジュールシステムにより、機能が細分化され、使い回し可能なライブラリの需要が高まった(パッケージ)
  • 2010年、Node.jsのパッケージ管理システム(npm)が登場し、外部ライブラリの依存関係が解決できるようになった

ブラウザJs

  • 依然として、ブラウザ側では、名前空間と依存関係の問題が残り続けていた
  • そこで、開発時はCommonJs形式で記述することで、名前空間の問題を解決しつつ、バンドルツールを使用してモジュール間の依存関係を解決した上で、1ファイル(ないし複数ファイル)に変換してランタイムのコードを実行するという手法にシフトした
  • バンドルツールの登場
    • Browserify
      • CommonJSのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールバンドラー
      • 複数のjsファイルを依存関係を解決しながら、1つまたは複数のjsファイルにまとめる(バンドル)ことが可能に
    • webpack
      • 2012年webpackが登場。CommonJSのモジュールはもちろん、ESModulesや、対応するローダーがあれば、cssや画像などもバンドル可能に
      • Browserifyからwebpackが主流に

ESModules

  • ついに、モジュールシステムがES2015でECMAScript標準の言語仕様として導入された(ESModules)
  • Chrome や Safari といったモダンブラウザならES Modulesのimport構文が記述できるように

快適な開発環境の実現

  • コンパイル(トランスパイル)ツールBabelの登場
    • 開発時に最新のES構文が使用できる(ランタイムは古いJs)
    • ブラウザ上でそのままでは動かない拡張子(.ts, .vue)のファイルを変換
    • 便利なフレームワークやライブラリを使用(.vue, .jsx)して開発できるように

Javascript学習におすすめの書籍

タイトルとURLをコピーしました