Masayan tech blog.

  1. ブログ記事一覧>
  2. JavaScriptの誕生から現在までを概観する

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構文が記述できるように
  • 以下のように、scriptタグをmoduleと指定すれば、そのスクリプトがモジュールであることを宣言できる
<script type="module" src="/module1.mjs"></script>
  • ただ、esmodulesが標準化されてもなお、webpackなどのバンドラーは使われ続けた
    • 結局のところ、1つのjsファイルにバンドルしてサーバーへリクエストしないと、モジュールの数だけリクエストが送信されることになり、ラウンドトリップ遅延の発生が容易に想像できる

快適な開発環境の実現

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

まとめ

いかがでしたでしょうか。本記事では、JavaScriptの誕生から現在までを概観しています。現在のフロントエンド開発はとても快適なものですが、この開発環境に至るまでには様々な経緯があり、それらの概要だけでも把握しておくことはとても重要かと思いますので、ぜひ参考してみてください。