はじめに

JavaScript は、1995 年に Netscape 社のエンジニアであるブレンダン・アイクさんによって開発されました。

1997 年に、 ECMAScript として標準化（ES1）され、現在の JavaScript へとつながっています。

この言語の存在がなければ、このサイトそのものが、成り立ちませんでした。

開発者の方、関係者の方には、この場をお借りして、深くお礼を申し上げたいと思います。

さて、話を元に戻しますが、このように、JavaScript は誕生から長い歴史のある言語です。

その間に、ブラウザの機能は大きく進化し、 Web アプリケーションの規模も複雑さも、当時とは比べものにならないほど大きくなりました。

しかし、長い歴史の中で JavaScript は、「古い書き方」と「新しい書き方」が混在する、少し不思議な言語になりました。

たとえば、

  • var と let / const
  • コールバックと Promise / async / await
  • <script> と <script type="module">
  • prototype ベースのクラスと ES6 の class
  • require と import / export

こうした “二重構造” が存在するのは、 JavaScript が後方互換性を強く重視しながら進化してきたからです。

ES6（2015年）は JavaScript の「革命」だった

2015 年に登場した ES6（ECMAScript 2015）は、 JavaScript の歴史の中でも特に大きな転換点でした。

このとき導入された主な機能は、今では当たり前のように使われています。

  • let / const
  • アロー関数
  • クラス構文（ class ）
  • Promise
  • モジュール（ import / export ）
  • テンプレートリテラル
  • Map / Set
  • 分割代入
  • スプレッド構文

これらはすべて、 「モダン JavaScript」 と呼ばれる書き方の基礎です。

ES6 で導入された主な機能の簡単な概要

ES6（2015）では、JavaScript の書き方を大きく変える多くの新機能が導入されました。

ここでは、その中でも特に重要なものを簡単に紹介します。

let / const

従来の var に代わる、より安全な変数宣言です。

  • let：再代入はできるが、スコープがブロック単位で安全
  • const：再代入できない定数。基本はこちらを使うのが現代的
let count = 1;
const PI = 3.14;

アロー関数

より短く書ける関数の新しい記法です。 this の扱いが直感的になるという利点もあります。

const add = (a, b) => a + b;

クラス構文（class）

prototype ベースの仕組みを、より自然な構文で書けるようにしたものです。

class User {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log(`Hello, ${this.name}`);
  }
}

Promise

非同期処理を扱うための仕組みです。コールバック地獄を避け、処理の流れを整理できます。

fetch("/api")
  .then(res => res.json())
  .then(data => console.log(data));

👉 後に登場する async / await（ES2017） の基礎になっています。

モジュール（ import / export ）

JavaScript をファイル単位で分割し、依存関係を明示的に管理できる仕組みです。

// math.js
export function add(a, b) { return a + b; }

// main.js
import { add } from "./math.js";

👉 ブラウザでも Node.js でも使える、現代 JavaScript の中心的な機能です。

テンプレートリテラル

バッククォート（`）を使うことで、文字列の中に変数を自然に埋め込めるようになりました。

const name = "Yoshikazu";
console.log(`Hello, ${name}!`);

👉 複数行の文字列も簡単に書けます。

Map / Set

従来のオブジェクトや配列よりも、明確な用途を持つコレクションです。

  • Map：キーと値のペアを管理（キーにオブジェクトも使える）
  • Set：重複を許さない集合
const set = new Set([1, 1, 2]); // → Set { 1, 2 }

分割代入（Destructuring）

オブジェクトや配列から、必要な値だけを取り出す便利な構文です。

const user = { name: "Yoshikazu", age: 30 };
const { name } = user;

スプレッド構文（Spread）

配列やオブジェクトを “展開” する構文です。コピーやマージが直感的に書けます。

const arr = [1, 2];
const arr2 = [...arr, 3]; // → [1, 2, 3]

では、ES6 以前の書き方は “捨てられた” のか？

👉 答えは No です。

prototype ベースのオブジェクト指向

ES6 の class は、実は prototype の糖衣構文（シンタックスシュガー） です。

👉 内部では prototype を使っており、古い仕組みの上に読みやすい構文を載せたものです。

古い仕組みは捨てられたのではなく、読みやすい形に包み直されたというのが正しい理解です。

関数型プログラミング（FP）

ES6 以降、JavaScript はむしろ FP の影響を強く受けています。

  • アロー関数
  • イミュータブルな const
  • map / filter / reduce
  • スプレッド構文
  • 分割代入
  • Promise / async / await

👉 これらはすべて FP の思想を取り入れたものです。

つまり、

ES6 は「古い JavaScript を否定した」のではなく、prototype と FP の両方を “統合” して進化した。

と言えます。

なぜ “モダン JavaScript” が必要なのか

理由はとてもシンプルで、

現代の Web アプリケーションは、昔より圧倒的に複雑だからです。

  • 非同期処理が当たり前になった
  • API と通信するアプリが増えた
  • UI が動的になった
  • セキュリティ要件が厳しくなった
  • ブラウザ API が高度化した

こうした変化に対応するために、 JavaScript も “現代的な書き方” を取り入れて進化してきました。

ES6 以降も、静かに大きな進化が続いている

ES6 が革命だったのに対し、その後の進化は「洗練」と「統一」が中心です。

  • ES2017：async / await
  • ES2020：Optional Chaining / Nullish Coalescing
  • ES2022：Top-level await
  • ブラウザ API の進化（Fetch, Cache, WebCrypto, OPFS など）
  • Node.js とブラウザが import / export で統一

どれも ES6 ほど劇的な変化ではありませんが、「モダンな書き方」をより自然にするための改良が続いています。

特に、

👉 ブラウザと Node.js が同じモジュールシステム（ import / export ）を使うようになった

これは JavaScript の世界がひとつにまとまった、非常に大きな出来事です。

“モダン JavaScript” を学ぶメリット

モダンな書き方を身につけると、次のようなメリットがあります。

  • コードが読みやすくなる
  • バグが減る
  • 再利用しやすくなる
  • 大規模なアプリでも破綻しにくい
  • ブラウザ API やライブラリを扱いやすくなる
  • フレームワークの理解が深まる

👉 特に、import / export や async / await は、現代の JavaScript を書くうえで欠かせない基礎です。

このシリーズで目指すこと

この「モダン JavaScript 入門」シリーズでは、古い書き方しか知らなかった方でも、無理なく “現代的な JavaScript” を理解できるように構成しています。

  • <script type="module"> の基本
  • import / export の使い方
  • async / await の書き方
  • fetch API
  • クラス構文
  • モジュール設計の考え方
  • 必要に応じてライブラリを使ったモダンな実装例

こうしたテーマを、ひとつずつ丁寧に解説していきます。

次回：<script type="module"> の基本へ

次回は、モダン JavaScript の入口である モジュール（ import / export ） を扱います。

  • なぜ <script type="module"> が必要なのか
  • 通常スクリプトとの違い
  • スコープの仕組み
  • window との関係
  • 実際のコード例

こうした内容を、図解を交えてわかりやすく整理していきます。