JavaScript 30年間の進化

 

JavaScript 30年間の進化

1. 誕生と標準化(1995~1999年)

  1. 誕生(1995年)

    • Brendan Eich 氏が「Mocha」(後の LiveScript → JavaScript)を開発

    • Netscape Navigator に組み込まれ、ブラウザ上での動的処理を実現

  2. ECMAScript の成立(1997年)

    • ECMA-262(ECMAScript)の初版採択により、言語仕様が標準化

    • 複数ブラウザ間の互換性確保に向けた基盤が整備

  3. ES3 標準化(1999年)

    • 文字列操作、正規表現、例外処理などが追加

    • 現代の Web 開発における基礎機能がほぼ整う


2. プラグインと軽量ライブラリの時代(2006~2012年)

  1. jQuery の登場(2006年)

    • DOM 操作やイベント処理をシンプルな API で提供

    • クロスブラウザ対応やエフェクト機能が人気を博し、事実上の標準ライブラリに

  2. MVC フレームワークの先駆け

    • Backbone.js(2010年)、Ember.js(2011年)などが登場

    • アプリケーション構造の設計指針(モデル・ビュー・コントローラ)を導入

  3. モジュールバンドラーの普及

    • Browserify(2012年)や Webpack(2012年頃)の登場で、複数ファイルの結合・最適化が容易に


3. 言語仕様の進化:ES5→ES6(2012~2015年)

  1. ES5(2009年制定)

    • strict modeJSON オブジェクト、Array.prototype.forEach などの追加

    • 安定したブラウザ対応が進む

  2. ES6 / ES2015(2015年制定)

    • モジュール(import/export)、アロー関数、クラス構文、Promise、テンプレートリテラルなどを標準化

    • コードの可読性・再利用性が大幅に向上

  3. 年間リリース化(ES2016~)

    • 年に一度のマイナーアップデートで機能が順次追加される体制に移行

    • async/await(ES2017)、nullish coalescing(ES2020)などが順次導入


4. サーバーサイドへの進出:Node.js(2009年~)

  1. Node.js の登場(2009年)

    • Chrome V8 エンジン上で JavaScript をサーバー実行可能に

    • 非同期 I/O による高スループット処理が可能

  2. npm エコシステムの拡大

    • パッケージマネージャ npm の普及で、モジュール共有が爆発的に増加

    • Web フレームワーク(Express.js など)からビルドツールまで多種多様なパッケージが公開


5. モダンフロントエンド・フレームワークの勃興(2013年~)

  1. React(2013年公開)

    • コンポーネントベースで「仮想 DOM」による宣言的 UI 更新を実現

    • Hooks(2019年)導入で、状態管理と副作用の記述がさらに明確に

  2. Vue.js(2014年公開)

    • 軽量かつ学習コストの低いリアクティブ・フレームワーク

    • 単一ファイルコンポーネント(SFC)でテンプレートとロジックを一体化

  3. Angular (2.0/2016年)以降

    • Google 製のフルスタック型フレームワーク

    • TypeScript 前提で大規模開発に強み


6. Next.js に代表されるメタフレームワーク(2016年~)

  1. Next.js(2016年公開)

    • React ベースにサーバーサイドレンダリング(SSR)や静的サイト生成(SSG)を標準搭載

    • API ルート機能でバックエンド機能も容易に実装可能

  2. Nuxt.js(2016年公開)

    • Vue.js 向けに同様の SSR/SSG 機能を提供

  3. その他の潮流

    • Vite(2020年公開):超高速開発サーバとビルドを実現

    • Astro(2021年公開):部分的に JavaScript を読み込む「アイランドアーキテクチャ」


7. 初心者が押さえるべきポイント

  1. コアは「言語仕様(ECMAScript)」と「ブラウザ API」

    • 言語の基本(変数、関数、配列、オブジェクト、Promise 等)をまず理解

    • fetchlocalStorageDOM 操作 などブラウザ固有 API に慣れる

  2. モジュールバンドラーやトランスパイラは徐々に導入

    • 最初は生の <script> タグ内で記述し、慣れたら webpack/Vite/Babel を試す

  3. フレームワーク選定はプロジェクト要件次第

    • 小規模な学習用なら純粋な JavaScript(Vanilla JS)のまま始める

    • ある程度構造化が必要になったら React/Vue/Angular などを検討


以上が JavaScript の主要な発展の流れです。
まずは言語の基本とブラウザ API に慣れてから、モダンツールやフレームワークへ段階的に進むことをおすすめします。


主なブラウザ API の分類

 

分類

API 名

機能概要

DOM 操作

documentElement

HTML 要素の取得・生成・属性操作・イベント設定など

ネットワーク通信

fetch

非同期 HTTP リクエスト・レスポンスの取得

ストレージ

localStoragesessionStorage

キー・バリュー形式のデータ永続化(セッション単位)

描画

CanvasWebGL

2D/3D グラフィックの動的描画

マルチメディア

AudioVideo

音声・動画の再生、ストリーミング制御

位置情報

Geolocation

端末の緯度・経度など位置情報の取得

センサーデータ

DeviceOrientation

加速度・ジャイロなど端末センサー情報の取得

クリップボード

Clipboard

クリップボードへのコピー/ペースト制御

通知

Notification

デスクトップ通知の生成

オフライン対応

ServiceWorkerCache

オフラインキャッシュ、プッシュ通知、バックグラウンド同期

 

  1. DOM 操作

    • HTML 要素の取得/生成/変更/削除を行い、ページの動的更新を実現

    • イベントリスナーでユーザー操作をハンドリング

  2. fetch API

    • Promise ベースで HTTP 通信を実装

    • GET/POST など必要なメソッドを指定し、ヘッダーやボディを柔軟に設定

  3. localStorage

    • キー/バリュー形式でブラウザに永続保存

    • シリアライズ(JSON.stringify)/デシリアライズ(JSON.parse)に留意

これらの基礎を押さえることで、純粋な JavaScript(Vanilla JS)でも十分にインタラクティブなウェブアプリケーションを構築できます。

 

Vanilla JS(ヴァニラ・ジェイエス) とは、ライブラリやフレームワークを一切用いず、ブラウザが標準で提供する JavaScript とブラウザ API のみでウェブアプリケーションを構築する手法を指します。以下、その要点をまとめます。


1. 概念と由来

  • 「Vanilla」は「バニラ=そのまま、純粋」という意味の比喩。

  • 2000年代初頭、jQuery などの軽量ライブラリが普及する以前は、すべて純粋な JavaScript で DOM 操作や Ajax 実装を行っていた歴史的経緯がある。

2. 主な特徴

  1. 依存なし

    • 外部スクリプトの読み込みが不要。

    • ランタイムサイズが最小限。

  2. ブラウザ互換性の把握が必須

    • 各種メソッドや API の対応状況を自分で確認・実装。

  3. 自由度の高さ

    • フレームワークの制約を受けず、自分の設計思想に基づく構造を自由に実装可能。

 

 

 

```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構造とレイアウト案をもとに、好みの縦横比をクリックしてスライド生成を選択できます。