本稿は JavaScript の文法に関する記事です。変数・関数・条件分岐・ループ・配列・連想配列など、JavaScript で日常的に使われる基本構文を扱います。

子ページから項目を選択してください。

本ページの子ページ

• 記述方法 — HTML への埋め込み・外部ファイル読込
• コメント — // と /* */
• 変数の宣言 — var / let / const の使い分け
• 関数 — function 宣言・関数式・アロー関数
• 演算子 — 算術／比較／論理／代入
• 条件文 — if / else / switch / 三項演算子
• 配列 — Array の基本
• 連想配列 — オブジェクトリテラル
• ループ処理 — for / while / for-of / forEach
• 同期処理
• 非同期処理 — Promise / async / await
• 確認ウィンドウを表示する方法 — alert / confirm
• 文字の置換 — String.replace
• base url を取得する方法
• form の submit 前に javascript を呼び出す方法
• undefined のイコール判定
• JavaScript のみで form を post で submit する方法

文法の全体像

カテゴリ	主なキーワード
変数宣言	var、let、const
データ型	number、string、boolean、null、undefined、bigint、symbol、object
演算子	算術 (+ - * / %)、比較 (=== !==)、論理 (&& ||)、ぬる合体 (??)、オプショナルチェイン (?.)
制御構文	if、else、switch、for、while、for...of、for...in、break、continue
関数	function 宣言、関数式、=> (アロー関数)、デフォルト引数、可変長引数 (...)
オブジェクト	オブジェクトリテラル { key: value }、分割代入 const { a } = obj;
配列	[]、スプレッド ...、map、filter、reduce
クラス	class、extends、super
モジュール	import / export (ES Modules)
非同期	Promise、async / await
エラー処理	try / catch / finally / throw

変数宣言の使い分け

キーワード	スコープ	再代入	再宣言	用途
const	ブロック	不可	不可	基本これを使う
let	ブロック	可	不可	変化する変数
var	関数	可	可	レガシー。新規コードでは避ける

比較演算子の注意点

• == は型変換ありの比較 (0 == "0" は true)。基本は使わない
• === は厳密比較。これを使う
• NaN === NaN は false。判定は Number.isNaN(x)
• null == undefined は true、null === undefined は false

関数の3つの形

// 関数宣言 function add(a, b) { return a + b; } // 関数式 const sub = function(a, b) { return a - b; }; // アロー関数 const mul = (a, b) => a * b;

近年の重要な追加

• ES2015 (ES6): let/const、アロー関数、テンプレートリテラル、class、モジュール、Promise
• ES2017: async / await
• ES2020: オプショナルチェイン (?.)、ぬる合体 (??)、BigInt
• ES2021〜: 論理代入 (??=)、Array#at、structuredClone (環境依存)

注意点

• 古いブラウザサポートが必要な場合はBabel + polyfillを併用
• 厳密モード 'use strict'; を冒頭に書く (モジュールでは自動で有効)
• 本番コードでは TypeScript も検討。型ミスをコンパイル時に検出可能

関連

• 親カテゴリ: JavaScript