JavaScript 30年間の進化
1. 誕生と標準化(1995~1999年)
-
誕生(1995年)
-
Brendan Eich 氏が「Mocha」(後の LiveScript → JavaScript)を開発
-
Netscape Navigator に組み込まれ、ブラウザ上での動的処理を実現
-
-
ECMAScript の成立(1997年)
-
ECMA-262(ECMAScript)の初版採択により、言語仕様が標準化
-
複数ブラウザ間の互換性確保に向けた基盤が整備
-
-
ES3 標準化(1999年)
-
文字列操作、正規表現、例外処理などが追加
-
現代の Web 開発における基礎機能がほぼ整う
-
2. プラグインと軽量ライブラリの時代(2006~2012年)
-
jQuery の登場(2006年)
-
DOM 操作やイベント処理をシンプルな API で提供
-
クロスブラウザ対応やエフェクト機能が人気を博し、事実上の標準ライブラリに
-
-
MVC フレームワークの先駆け
-
Backbone.js(2010年)、Ember.js(2011年)などが登場
-
アプリケーション構造の設計指針(モデル・ビュー・コントローラ)を導入
-
-
モジュールバンドラーの普及
-
Browserify(2012年)や Webpack(2012年頃)の登場で、複数ファイルの結合・最適化が容易に
-
3. 言語仕様の進化:ES5→ES6(2012~2015年)
-
ES5(2009年制定)
-
strict mode、JSON オブジェクト、Array.prototype.forEach などの追加
-
安定したブラウザ対応が進む
-
-
ES6 / ES2015(2015年制定)
-
モジュール(import/export)、アロー関数、クラス構文、Promise、テンプレートリテラルなどを標準化
-
コードの可読性・再利用性が大幅に向上
-
-
年間リリース化(ES2016~)
-
年に一度のマイナーアップデートで機能が順次追加される体制に移行
-
async/await(ES2017)、nullish coalescing(ES2020)などが順次導入
-
4. サーバーサイドへの進出:Node.js(2009年~)
-
Node.js の登場(2009年)
-
Chrome V8 エンジン上で JavaScript をサーバー実行可能に
-
非同期 I/O による高スループット処理が可能
-
-
npm エコシステムの拡大
-
パッケージマネージャ npm の普及で、モジュール共有が爆発的に増加
-
Web フレームワーク(Express.js など)からビルドツールまで多種多様なパッケージが公開
-
5. モダンフロントエンド・フレームワークの勃興(2013年~)
-
React(2013年公開)
-
コンポーネントベースで「仮想 DOM」による宣言的 UI 更新を実現
-
Hooks(2019年)導入で、状態管理と副作用の記述がさらに明確に
-
-
Vue.js(2014年公開)
-
軽量かつ学習コストの低いリアクティブ・フレームワーク
-
単一ファイルコンポーネント(SFC)でテンプレートとロジックを一体化
-
-
Angular (2.0/2016年)以降
-
Google 製のフルスタック型フレームワーク
-
TypeScript 前提で大規模開発に強み
-
6. Next.js に代表されるメタフレームワーク(2016年~)
-
Next.js(2016年公開)
-
React ベースにサーバーサイドレンダリング(SSR)や静的サイト生成(SSG)を標準搭載
-
API ルート機能でバックエンド機能も容易に実装可能
-
-
Nuxt.js(2016年公開)
-
Vue.js 向けに同様の SSR/SSG 機能を提供
-
-
その他の潮流
-
Vite(2020年公開):超高速開発サーバとビルドを実現
-
Astro(2021年公開):部分的に JavaScript を読み込む「アイランドアーキテクチャ」
-
7. 初心者が押さえるべきポイント
-
コアは「言語仕様(ECMAScript)」と「ブラウザ API」
-
言語の基本(変数、関数、配列、オブジェクト、Promise 等)をまず理解
-
fetch、localStorage、DOM 操作 などブラウザ固有 API に慣れる
-
-
モジュールバンドラーやトランスパイラは徐々に導入
-
最初は生の <script> タグ内で記述し、慣れたら webpack/Vite/Babel を試す
-
-
フレームワーク選定はプロジェクト要件次第
-
小規模な学習用なら純粋な JavaScript(Vanilla JS)のまま始める
-
ある程度構造化が必要になったら React/Vue/Angular などを検討
-
以上が JavaScript の主要な発展の流れです。
まずは言語の基本とブラウザ API に慣れてから、モダンツールやフレームワークへ段階的に進むことをおすすめします。
主なブラウザ API の分類
分類 |
API 名 |
機能概要 |
---|---|---|
DOM 操作 |
document/Element |
HTML 要素の取得・生成・属性操作・イベント設定など |
ネットワーク通信 |
fetch |
非同期 HTTP リクエスト・レスポンスの取得 |
ストレージ |
localStorage/sessionStorage |
キー・バリュー形式のデータ永続化(セッション単位) |
描画 |
Canvas/WebGL |
2D/3D グラフィックの動的描画 |
マルチメディア |
Audio/Video |
音声・動画の再生、ストリーミング制御 |
位置情報 |
Geolocation |
端末の緯度・経度など位置情報の取得 |
センサーデータ |
DeviceOrientation |
加速度・ジャイロなど端末センサー情報の取得 |
クリップボード |
Clipboard |
クリップボードへのコピー/ペースト制御 |
通知 |
Notification |
デスクトップ通知の生成 |
オフライン対応 |
ServiceWorker/Cache |
オフラインキャッシュ、プッシュ通知、バックグラウンド同期 |
-
DOM 操作
-
HTML 要素の取得/生成/変更/削除を行い、ページの動的更新を実現
-
イベントリスナーでユーザー操作をハンドリング
-
-
fetch API
-
Promise ベースで HTTP 通信を実装
-
GET/POST など必要なメソッドを指定し、ヘッダーやボディを柔軟に設定
-
-
localStorage
-
キー/バリュー形式でブラウザに永続保存
-
シリアライズ(JSON.stringify)/デシリアライズ(JSON.parse)に留意
-
これらの基礎を押さえることで、純粋な JavaScript(Vanilla JS)でも十分にインタラクティブなウェブアプリケーションを構築できます。
Vanilla JS(ヴァニラ・ジェイエス) とは、ライブラリやフレームワークを一切用いず、ブラウザが標準で提供する JavaScript とブラウザ API のみでウェブアプリケーションを構築する手法を指します。以下、その要点をまとめます。
1. 概念と由来
-
「Vanilla」は「バニラ=そのまま、純粋」という意味の比喩。
-
2000年代初頭、jQuery などの軽量ライブラリが普及する以前は、すべて純粋な JavaScript で DOM 操作や Ajax 実装を行っていた歴史的経緯がある。
2. 主な特徴
-
依存なし
-
外部スクリプトの読み込みが不要。
-
ランタイムサイズが最小限。
-
-
ブラウザ互換性の把握が必須
-
各種メソッドや API の対応状況を自分で確認・実装。
-
-
自由度の高さ
-
フレームワークの制約を受けず、自分の設計思想に基づく構造を自由に実装可能。
-
```yaml main_title: jp: "JavaScript 30年間の進化" en: "Evolution of JavaScript over 30 Years" sections: - id: 1 title: "誕生と標準化" period: "1995~1999年" events: - year: 1995 title: "誕生" description: | - Brendan Eich 氏が「Mocha」(後の LiveScript → JavaScript)を開発 - Netscape Navigator に組み込まれ、ブラウザ上での動的処理を実現 - year: 1997 title: "ECMAScript の成立" description: | - ECMA-262(ECMAScript)の初版採択により、言語仕様が標準化 - 複数ブラウザ間の互換性確保に向けた基盤が整備 - year: 1999 title: "ES3 標準化" description: | - 文字列操作、正規表現、例外処理などが追加 - 現代の Web 開発における基礎機能がほぼ整う - id: 2 title: "プラグインと軽量ライブラリの時代" period: "2006~2012年" events: - year: 2006 title: "jQuery の登場" description: | - DOM 操作やイベント処理をシンプルな API で提供 - クロスブラウザ対応やエフェクト機能が人気、事実上の標準ライブラリに - MVC フレームワークの先駆け - year: 2010 title: "Backbone.js の登場" - year: 2011 title: "Ember.js の登場" description: "モデル・ビュー・コントローラ設計指針を導入" - year: 2012 title: "モジュールバンドラー普及" description: | - Browserify と Webpack が登場 - 複数ファイルの結合・最適化が容易に - id: 3 title: "言語仕様の進化:ES5→ES6" period: "2012~2015年" events: - year: 2009 title: "ES5(2009年制定)" description: | - strict mode、JSON オブジェクト - Array.prototype.forEach 追加 - year: 2015 title: "ES6 / ES2015(2015年制定)" description: | - モジュール(import/export)、アロー関数、クラス構文 - Promise、テンプレートリテラル等を標準化 - title: "年間リリース化(ES2016~)" description: | - async/await(ES2017)、nullish coalescing(ES2020)等を順次導入 - id: 4 title: "サーバーサイドへの進出:Node.js" period: "2009年~" events: - year: 2009 title: "Node.js の登場" description: | - Chrome V8 エンジン上でサーバ実行可能に - 非同期 I/O による高スループット処理 - description: | - npm エコシステム拡大 - Express.js など多種多様なパッケージ公開 - id: 5 title: "モダンフロントエンド・フレームワークの勃興" period: "2013年~" events: - year: 2013 title: "React 公開" description: | - コンポーネントベース、仮想 DOM で宣言的 UI 更新 - Hooks(2019年)で状態管理・副作用記述が明確に - year: 2014 title: "Vue.js 公開" description: | - 軽量、学習コスト低いリアクティブ・フレームワーク - 単一ファイルコンポーネント(SFC) - year: 2016 title: "Angular 2.0 公開" description: "TypeScript 前提、Google 製フルスタック型" - id: 6 title: "メタフレームワークの時代" period: "2016年~" events: - year: 2016 title: "Next.js 公開" description: | - SSR/SSG 標準搭載、API ルート機能 - year: 2016 title: "Nuxt.js 公開" description: "Vue.js 向け SSR/SSG 機能提供" - year: 2020 title: "Vite 公開" description: "超高速開発サーバとビルド" - year: 2021 title: "Astro 公開" description: "アイランドアーキテクチャを実現" ``` ## インフォグラフィックスレイアウト案 * **スライドサイズ:** 横長または縦長(下記から選択可能) * **配色:** モダンピンクを基調 * **フォント:** Noto Sans JP * **構成:** 1. 見出しエリア: タイトル「JavaScript 30年間の進化 / Evolution of JavaScript over 30 Years」 2. タイムライン: * 左右に分割された6つのセクションブロックを年表形式で配置 * 各ブロックにアイコン+年+タイトル+要約テキスト 3. グラフエリア(該当数値事項なし):省略 4. フッターエリア: 出典「主要公開年・標準化年」 ユーザーは上記YAML構造とレイアウト案をもとに、好みの縦横比をクリックしてスライド生成を選択できます。