JavaScriptの歴史を学べる動画

プログラミング

こんにちは！kossyです！




さて、今回は「しまぶー」さんという方のJavaScriptの歴史についての動画の
要点をまとめたものをブログに残してみたいと思います。



しまぶーさんの動画はこちら

第1回

第2回

第3回

第4回

第5回



以下、要点をまとめたメモになります。


第1回

【Howの知識よりもWhyの知識が重要】

  • フロントエンド全般を理解する方が大事
  • How(使い方・やり方)の知識だけだと、応用が効きにくい
  • Why(なぜその技術が必要なのか)がわかると、技術の移り変わりに強くなれる

第2回

【JavaScriptの誕生】

【IE3に搭載される】

  • 1996年にInternetExplorer3.0に搭載され、急速に普及
  • しかし、NetscapeのブラウザとIEで独自にブラウザの機能拡張を行なっていたため、それぞれに合うサイトを作る必要があった

【ECMAScript(エクマスクリプト)の誕生】

  • JavaScriptの中核となる言語仕様のこと
  • NetscapeはJavaScriptの仕様を一つにまとめ標準化するために、国際的な標準化団体EcmaInternationalに提出。結果1997年6月にECMAScriptの第1版が公開
  • 2015年に第6版が公開。そのリリースから年号が用いられるようになった。ES6は誤りで、正解はES2015である

【JavaScriptの環境の話】

  • いろんな実行環境がある。例としてNode.jsがあるが、Node.jsにはDOM操作をするための機能はない

【ECMAScriptとJavaScript】

  • ECMAScriptはどの実行環境でも共通な動作のみが定義されている
  • Node.jsやブラウザの違いなどを意識せずにECMAScriptで開発することができる(実際には実行速度に差があるため、気をつけるポイントがある)

【第一次ブラウザ戦争】

  • 1990年代後半はNetscapeとInternetExplorerが激しいシェア争いを繰り広げ、結果はご存知の通りIEの一人勝ちに。要因はWin98にIE4が標準搭載されたこと

【JavaScriptへの失望】

  • JavaScript起因のクラッシュや悪用ウィルス被害が多発。「JavaScriptは危ないからOFFに」という対策も

【JavaScriptの復権】

  • 2005年、Microsoftが開発したAjaxによって、高機能なWebアプリケーション開発言語として再び注目を集める
  • GoogleMapsは当時非常に話題になった

【jQueryの誕生】

  • 2006年にjQueryが誕生。少ない記述で多くの実装ができた
  • ブラウザ間の差異を吸収できたのも普及した要因

【第二次ブラウザ戦争】

【ServerSideJavaScriptの動き】

  • 2009年1月、MozillaのエンジニアKevin DangoorがServerJSというプロジェクトを立ち上げ
  • ServerJSはサーバーサイドで使うには機能不足で、APIを作る必要があった
  • 2009年8月、より広い範囲のAPIを対象とすることを示すために、現在のCommonJSへと改名

【モジュールAPIについて】

  • exportやimportを使用してファイル間で関数を呼び出したりできる
  • モジュール化を行うことで、巨大なjsファイルの分割が可能になった
  • JavaScriptは名前空間が一つしかない問題をモジュールが、依存関係問題をnpmが解決した

第3回

【今回伝えたいこと】

  • ブラウザでモジュールを使うために模索した結果、コードを事前に変換することが主流になった
  • コードを事前に変換すると、モジュールを使える以外にもいろんな恩恵がある

【Node.jsの誕生】

  • 2009年にRyanDahlによって作られる
  • 最初はCommonJSのモジュールAPIに準拠

【Node.jsとCommonJS】

  • CommonJSのコミュニティがうまく機能しなかったこともあり、Node.jsは独自の進化を遂げる。
  • CommonJSのプロジェクトはもう動いてない状態
  • JavaScriptいはモジュールの仕様が複数存在しており、CommonJSと検索しても分かりづらいのは、この歴史に起因している

【JavaScriptのパッケージ管理システム登場の背景】

  • パッケージとは、package.jsonで記述されたファイルやディレクトリのこと。共有したい機能の単位
  • モジュールのおかげで名前空間問題が解決されて、機能を細かく分割できるようになった
  • 機能の細分化により、プロジェクト間で機能を共有して使用したいというニーズが生まれた

【パッケージ管理システム】

  • ローカル環境にインストールしたパッケージを更新できる
  • パッケージを検索できる
  • パッケージを指定してローカルにインストールできる
  • インストールしたパッケージを削除できる
  • そのパッケージを使用するにあたって必要になる別のパッケージもまとめて自動でインストールや更新ができる
  • パッケージ設定の管理もできる
  • 2010年にIsaac Z.SchlueterによってNode.jsのパッケージ管理システムであるnpm(Node Package Manager)が誕生
  • 上記の話はあくまでサーバーサイドJavaScriptの話で、ブラウザではモジュールも使えないしnpmのパッケージも使えない

第4回

【ブラウザ側のモジュール】

  • 昔からモジュールのパターン(4つ)はあったが、現在はあまり必要ない
  • IIFE(即時実行関数式)
  • 言語仕様としてのモジュールではないので、名前空間の問題も完全に解決されるわけではなかった

【AMD & RequireJSの誕生】

  • ブラウザでのモジュールの扱いを改善するために、AMDという仕様が誕生。その仕様を実装しているものがRequireJS
  • AMDは、ブラウザ環境での実行を考慮し、依存関係の解決および遅延ロードに対応した仕様

【Bowerの誕生】

  • 2012年に誕生したクライアントサイド(ブラウザ)開発むけのパッケージ管理システム
  • ほとんどのBowerのパッケージは、IIFEモジュールかAMDモジュールを利用している
  • ところが、AMD形式でモジュールが使えたが、サーバー側の機能との互換性がなく、AMD形式の構文はCommonJS形式と比較して冗長だった
  • 依存関係が多いとメンテナンスが大変で、パフォーマンス面でも問題があった
  • どのパッケージがどう依存しているかを、開発者が手作業で定義する必要があった
  • 同一ページ内にある同じパッケージの異なるバージョンをサポートしていなかった。
  • npmとBowerで2重管理になる問題もあった

第5回

【パラダイムシフト】

  • CommonJS形式で書かれたものを事前にブラウザ向けに変換するようにシフト
  • 今まではランタイム(実際にブラウザで動かすこと)のコードと書いたコードが一緒だった
  • 開発者が書いたコードと実際にブラウザで動作するコードが異なる

【Bundleとは】

  • モジュールの依存関係を解決して1ファイルに変換すること
  • 開発時はCommonJSモジュールで開発、ブラウザで動かすときはBundleした1ファイルを動かす
  • Bundleされたjsファイルはいつも通りscriptタグで読み込む

【Browserifyの誕生】

  • CommonJS形式で書かれたコードをブラウザ向けにBundleするツールで、2011年に誕生
  • 全ての依存関係を束ねて、ブラウザで require('modules')を使用可能にする
  • ブラウザにはrequireメソッドが定義されていないが、Browserifyを使うと、requireを使うコードが使用できるようになる
  • Browserifyの登場で、サーバーサイド向けだったNode.jsのパッケージがブラウザ向けに移植できるようになった

【webpackの誕生】

  • 2012年に誕生。Browserifyよりも高機能で、現在でも主流。(最新安定板は4.4.0。5系も開発中)
  • 対応するローダーがあれば、HTML・CSS・画像もBundleできる(ローダーについて: https://reffect.co.jp/html/webpack-loader-setting-for-beginner#webpackLoader)
  • Browserifyと異なるのは、JSに限らずなんでもBundleできる点
  • Code Splittingの機能も備えており、コードを分割して非同期で読み込むことにより、最初のロード時間を短縮することができる

【ES Modulesの誕生】

  • ECMAScript2015でJavaScriptの言語仕様としてモジュールの仕組みが導入(require ではなく import・export で書けるようになった！)
  • ところが、ES Modulesができても、全てのブラウザで対応しているわけではない
  • webpack Ver2でES Modulesに対応

【Compileとは】

  • 書いたコードをブラウザで動くように変換すること
  • 開発時はブラウザでは動作しないが、開発に便利な機能を使ってコードが書ける
  • 変換したコードはいつも通りscriptタグで読み込む

【Babel(6to5)の誕生】

  • 2014年に誕生。元々は6 to 5という名称だった。ES2015のような新しい仕様のJavaScriptを、IEのような非対応ブラウザでも動くように変換するコンパイラ
  • webpackと一緒に使うことができる(BundleとCompileが両方可能に！！)
  • コードを事前に変換する環境が整った結果、ReactやVue.js、TypeScriptといったパッケージが流行

【まとめ】

  • 開発環境で書いたコードをそのままブラウザで動かすのではなく、事前に変換するという大きなパラダイムシフト
  • jQueryは上記が理由であまり使われなくなった。(リアルDOMを操作するのと仮想DOMを動かすのでは考え方が異なるのもある)


参考
https://www.youtube.com/watch?v=De9PH3EAz7c
https://www.youtube.com/watch?v=PuomDgRbllw
https://www.youtube.com/watch?v=RdFE03K9B08
https://www.youtube.com/watch?v=vuWAhqgRI3M
https://www.youtube.com/watch?v=PFeR332LurM