モダンJavaScriptとは｜基礎を学ぶ

このレッスンで分かること

ES6 (2015) で JavaScript が大きく変わった ─ let / const、アロー関数、class、テンプレートリテラル

毎年新バージョンがリリース ─ ES2017 で async/await、ES2020 で ?. ??

var は使わず、let / const を使う (ブロックスコープ)

const を基本、再代入が必要なときだけ let

モダンJavaScript とは

ES6（ES2015）以降のJavaScriptの進化を理解し、モダンな書き方を学ぶ準備をしよう。本レッスンでは、モダンJavaScript の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

モダンJavaScriptとは

JavaScriptは1995年に誕生してから、大きな進化を遂げてきました。特に2015年に発表されたES6（ECMAScript 2015）は、JavaScriptの書き方を大きく変えた転換点です。

ECMAScriptとは

ECMAScriptは、JavaScriptの言語仕様を定めた標準規格です。毎年新しいバージョンがリリースされ、便利な機能が追加されています。

ES6 (2015)はlet/const、アロー関数、クラス、テンプレートリテラル、分割代入など
ES2017はasync/await
ES2020はオプショナルチェーン(?.)、Nullish合体演算子(??)

let/const と var の違い

ES6以前は変数宣言にvarしか使えませんでしたが、今はletとconstを使います。

JavaScript

//  var: 関数スコープ、再宣言可能（バグの原因になりやすい）
var x = 10;
var x = 20; // エラーにならない！

//  let: ブロックスコープ、再代入可能
let y = 10;
y = 20; // OK
// let y = 30; // エラー！再宣言できない

//  const: ブロックスコープ、再代入不可
const z = 10;
// z = 20; // エラー！再代入できない

ブロックスコープ

letとconstはブロックスコープを持ちます。{}の中で宣言した変数はその外からアクセスできません。

JavaScript

if (true) {
  let message = "Hello";
  console.log(message); // "Hello"
}
// console.log(message); // エラー！ブロックの外からはアクセスできない

// varの場合は...
if (true) {
  var greeting = "Hi";
}
console.log(greeting); // "Hi"（アクセスできてしまう！）

strictモード

"use strict";を記述すると、より厳格なルールでコードがチェックされます。

JavaScript

"use strict";

// 宣言していない変数への代入がエラーになる
// x = 10; // ReferenceError!

// 関数の重複パラメータがエラーになる
// function f(a, a) {} // SyntaxError!

モダンJavaScriptでは、ES Modules(import/export)を使うと自動的にstrictモードになります。

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

全モダンプロジェクトで前提 ─ React / Vue / Node の現代コードベースはほぼ ES2015+
TypeScript も土台は ES ─ 型注釈を除けばだいたい ES のサブセット
Babel / esbuild でトランスパイル ─ 古いブラウザ向けに ES5 へ変換 (今は対象が縮小)
Node.js のバージョン管理 ─ ES の機能は Node のメジャーバージョンで対応が違う

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

var を使っている ─ ホイスティングのバグの温床、let / const に置き換え
== を使っている ─ 型変換の挙動が罠、=== を使う
for-in で配列を回している ─ プロトタイプチェーンを舐めるので NG、for-of を使う
ES2020 機能を使っていない ─ obj?.user?.name ?? "unknown" で書ける場面で長いネストを書いている

パフォーマンス考慮事項

const / let は最適化されやすい ─ V8 はブロックスコープのほうがインライン化しやすい
for-of は for よりわずかに遅い ─ Iterator プロトコル経由、ホットパスでは for(i)
テンプレートリテラルはわずかに遅い ─ + 連結より若干オーバーヘッドあり、99% は気にしない
async/await は Promise 包装 ─ コールバックスタイルより同等以上、可読性で勝つ

この章のポイント

ここまでの要点 ES6+ の let / const、アロー関数、class、テンプレートリテラルが現代 JS の基礎。var == for-in は使わない。

まとめ

特徴	var	let	const
スコープ	関数	ブロック	ブロック
再代入	○	○
再宣言	○

基本方針: まずconstを使い、再代入が必要な場合のみletを使いましょう。varは使いません。

よくある質問

Q. 実務ではどんな場面でこの知識を使いますか？

A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。

Q. コードレビューで指摘されやすいポイントは？

A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。

Q. 次に学ぶべき内容は何ですか？

A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。

次のレッスン

次は テンプレートリテラル で、ES6（ES2015）以降のJavaScriptの進化を理解し、モダンな書き方を学ぶ準備をしようを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

モダンJavaScriptとはの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. モダンJavaScriptとはとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン