1.1 誕生と初期の開発
JavaScriptは1995年、ネットスケープコミュニケーションズのブレンダン・アイクによって開発された。当初は「Mocha」、後に「LiveScript」と名付けられ、ネットスケープナビゲーター2.0に搭載された。ブラウザ上で動的な動作を実現するために設計され、サーバーサイド言語であったJavaとは異なり、クライアントサイドでの軽量なスクリプト言語として位置づけられた。同年、ネットスケープとサン・マイクロシステムズの提携により「JavaScript」と改名され、急速に普及した。
1.2 標準化とECMAScript
1996年、ネットスケープはJavaScriptを国際標準化団体Ecma Internationalに提出し、ECMA-262として標準化が始まった。1997年に最初のエディションが公開され、ECMAScript(ES)として知られるようになる。標準化により、異なるブラウザ間での互換性が向上し、言語仕様が統一的に定義された。現在もEcma Technical Committee 39(TC39)が策定を主導している。
1.3 主要バージョンの変遷
1.3.1 ES5(2009年)
ECMAScript 5(ES5)は2009年にリリースされ、strictモード、JSONオブジェクト、配列の高階関数(forEach、map、filterなど)を導入した。これにより、より安全で表現力豊かなコードが書けるようになり、大規模開発の基盤が整った。
1.3.2 ES6/ES2015以降
ECMAScript 2015(ES6)は2015年にリリースされ、言語史上最大のアップデートとなった。アロー関数、クラス、モジュール、let/const、テンプレートリテラル、Promise、ジェネレータなど、現代のJavaScriptの核となる機能が追加された。その後、毎年新しいバージョン(ES2016、ES2017…)がリリースされ、継続的に機能が拡充されている。
2.1 動的型付けと弱い型付け
JavaScriptは動的型付け言語であり、変数の型は実行時に決定される。また弱い型付け(暗黙の型変換)が行われるため、文字列と数値の連結など、意図しない挙動を引き起こすことがあるが、柔軟なコーディングを可能にする。TypeScriptなどの型システムを導入することで、静的型チェックを追加することもできる。
2.2 プロトタイプベースの継承
JavaScriptはクラスベースではなくプロトタイプベースの継承機構を持つ。オブジェクトは直接別のオブジェクトからプロパティを継承し、プロトタイプチェーンを通じて探索される。ES6でclass構文が導入されたが、内部動作はプロトタイプベースのままであり、糖衣構文に過ぎない。
2.3 関数型プログラミングのサポート
JavaScriptは第一級関数をサポートし、関数を変数に代入したり、引数として渡したり、戻り値として返したりできる。また、無名関数(アロー関数)、高階関数(map、reduceなど)、クロージャ、不変性を重視したプログラミングスタイルが可能で、関数型プログラミングの手法を自然に取り入れられる。
2.4 イベントループと非同期処理
JavaScriptはシングルスレッドで動作するが、イベントループにより非同期処理を実現する。ブラウザやNode.jsのランタイムは、コールスタック、タスクキュー、マイクロタスクキューを管理し、I/O操作やタイマーなどを待たずに処理を進める。
2.4.1 コールバック
初期の非同期処理はコールバック関数に依存していた。非同期操作の完了時に呼び出される関数を渡す方式だが、ネストが深くなると「コールバック地獄」を引き起こしやすく、可読性やエラーハンドリングが難しくなる問題があった。
2.4.2 Promiseとasync/await
ES6で導入されたPromiseは、非同期処理の結果を表現するオブジェクトで、then/catchチェーンにより可読性が向上した。さらにES2017で導入されたasync/awaitは、Promiseをより同期的なコードのように記述できる構文糖衣であり、非同期処理の記述を大幅に簡素化した。
3.1 ブラウザ環境
3.1.1 DOM操作
JavaScriptはブラウザのDocument Object Model(DOM)を操作することで、HTML要素の取得、追加、削除、属性変更、スタイル変更など、動的なページ更新を可能にする。document.getElementByIdやquerySelectorなどのメソッドが広く使われる。
3.1.2 ブラウザAPI(Fetch, WebSocket等)
ブラウザは標準的なAPI群を提供する。Fetch APIはHTTPリクエストをPromiseベースで行い、WebSocketは双方向通信を実現する。他にもGeolocation、Canvas、Web Storage、Service Workerなど、多様なAPIが存在し、リッチなWebアプリケーションを構築できる。
3.2 サーバーサイド環境
3.2.1 Node.js
2009年に登場したNode.jsは、V8エンジン上で動作するサーバーサイドランタイムである。非同期I/Oとイベント駆動モデルにより、高スループットなネットワークアプリケーションを構築できる。npm(Node Package Manager)を内蔵し、膨大なパッケージエコシステムを持つ。
3.2.2 DenoとBun
DenoはNode.jsの創設者であるライアン・ダールが2018年にリリースした新しいランタイムで、セキュリティ、TypeScriptのネイティブサポート、標準モジュールシステムを特徴とする。Bunは2022年頃から注目される高速ランタイムで、Node.jsの互換性を保ちながら、JavaScriptCoreエンジンを使用し、ビルトインのバンドラーやトランスパイラを備える。
4.1 パッケージマネージャー
4.1.1 npm
npm(Node Package Manager)はNode.jsに標準で付属するパッケージマネージャーで、世界中の開発者が公開する膨大なライブラリを管理する。package.jsonで依存関係を定義し、インストール・アップデート・公開が可能。2010年の登場以来、JavaScriptエコシステムの中核を担う。
4.1.2 Yarn
YarnはFacebook(現Meta)が2016年に公開したパッケージマネージャーで、npmの欠点(速度、セキュリティ、再現性)を改善した。yarn.lockファイルにより依存関係を正確に固定し、オフラインキャッシュや並列インストールで高速な動作を実現する。現在もnpmの代替として広く使われる。
4.2 トランスパイラとバンドラー
4.2.1 Babel
Babelは次世代JavaScript(ES6以降)のコードを、ブラウザが対応する古い構文に変換するトランスパイラである。プラグインシステムにより、TypeScriptやJSXなども変換できる。開発者が最新機能を安全に使用するための必須ツールとして広く利用される。
4.2.2 Webpack, Vite, Rollup
Webpackはモジュールバンドラーで、複数のJavaScriptファイルやリソース(CSS、画像)を依存関係に基づいて一つにまとめる。豊富なローダーとプラグインにより高度なビルド設定が可能。Viteは高速な開発サーバーとバンドル機能を提供する次世代ツールで、ES Modulesを活用しホットリロードが速い。Rollupはライブラリ向けの効率的なバンドラーで、Tree Shakingに優れる。
4.3 テストフレームワーク
4.3.1 Jest
JestはFacebookが開発したテストフレームワークで、設定が最小限で動作する。アサーション、モック、カバレッジレポート、スナップショットテストなどを内蔵し、Reactアプリケーションとの親和性が高い。デフォルトで並列実行をサポートし、大規模プロジェクトでも高速に動作する。
4.3.2 MochaとChai
Mochaは柔軟なテストランナーで、非同期テストを簡単に記述できる。Chaiはアサーションライブラリで、should、expect、assertなど複数のスタイルを提供する。MochaとChaiは独立したツールであり、組み合わせて使われることが多い。Jestと比べてカスタマイズ性が高い。
5.1 フロントエンド
5.1.1 React
ReactはFacebook(現Meta)が開発したUIライブラリで、コンポーネントベースのアーキテクチャと仮想DOMによる効率的なレンダリングが特徴。JSXと呼ばれるJavaScriptの拡張構文を使用し、単方向データフローを採用する。大規模なコミュニティとエコシステムを持ち、モバイル向けのReact Nativeも派生している。
5.1.2 Vue.js
Vue.jsはエヴァン・ユーが開発したプログレッシブフレームワークで、学習の容易さと柔軟性が魅力。リアクティブなデータバインディングとテンプレート構文を持ち、小規模から大規模まで段階的に導入できる。Vue 3ではComposition APIが導入され、ロジックの再利用性が向上した。
5.1.3 Angular
AngularはGoogleが開発したフルスタックなフレームワークで、TypeScriptを標準言語とする。モジュール、依存性注入、ルーティング、フォーム管理、HTTPクライアントなどが統合されており、大規模エンタープライズアプリケーションに適する。バージョン2以降は完全に書き直され、現在も活発に進化している。
5.2 バックエンド
5.2.1 Express.js
Express.jsはNode.js向けの軽量なWebフレームワークで、ルーティング、ミドルウェア、リクエスト/レスポンス処理を簡潔に記述できる。多くのアドオンやテンプレートエンジンと組み合わせて使われ、Node.jsのデファクトスタンダードとして長年親しまれている。
5.2.2 Next.js(フルスタック)
Next.jsはReactベースのフルスタックフレームワークで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)、APIルート、ファイルベースのルーティングなどの機能を統合する。Vercelが開発・保守しており、モダンなWebアプリケーションを効率的に構築できる。App Routerの導入により、さらに柔軟な構成が可能になった。
6.1 クロスサイトスクリプティング(XSS)
XSSは、攻撃者が悪意のあるスクリプトをWebページに注入する攻撃である。JavaScriptがユーザー入力を適切にエスケープせずにDOMに挿入すると、Cookieの盗難やセッション乗っ取りなどの被害が発生する。対策として、入力のバリデーションと出力のエスケープ、コンテンツセキュリティポリシー(CSP)の適用が推奨される。
6.2 クロスサイトリクエストフォージェリ(CSRF)
CSRFは、ユーザーが認証済みのサイトに対して意図しないリクエストを送信させる攻撃である。例えば、画像タグやフォーム自動送信を利用して、パスワード変更や送金などの操作を実行させる。対策には、トークンの検証(CSRFトークン)、SameSite Cookie属性の設定、オリジンヘッダーの確認などがある。
6.3 Content Security Policy(CSP)
CSPは、HTTPレスポンスヘッダーを通じてブラウザにリソースの読み込み元を制限させるセキュリティ機構である。スクリプト、スタイル、画像などのソースをホワイトリストで指定することで、XSSやデータインジェクションのリスクを低減できる。適切なCSPポリシーの設定は、現代のWebセキュリティにおいて重要な要素である。
7.1 WebAssemblyとの連携
WebAssembly(Wasm)は、ブラウザ上で高速に実行できるバイナリ形式のコードであり、C/C++、Rustなどの言語で書かれたモジュールをJavaScriptと連携させることができる。JavaScriptの弱点である計算集約型の処理をWasmに委譲することで、よりパフォーマンスの高いアプリケーションが実現可能になる。将来的には、JavaScriptとWasmの境界がさらにシームレスになることが期待される。
7.2 TypeScriptの普及
TypeScriptはMicrosoftが開発したJavaScriptのスーパーセットで、静的型付け、インターフェース、ジェネリクスなどの機能を提供する。大規模開発における保守性や安全性の向上が評価され、多くのフレームワークやライブラリがTypeScriptでの記述を標準化しつつある。TC39でも型注釈の標準化が議論されており、将来的にJavaScript自体に型システムが組み込まれる可能性もある。
7.3 新たな提案(Stage 3以上の機能)
ECMAScriptの策定プロセス(Stage 0〜4)において、Stage 3以上に到達した多くの機能が将来のリリースを控えている。例えば、レコードとタプル(不変データ構造)、パターンマッチング、デコレーター、並行処理のためのSharedArrayBufferやAtomicsの拡張などが検討されている。これらの機能により、より表現力と効率性に優れた言語へと進化し続ける。