JavaScript ガイド
このガイドについて
JavaScript の基礎を 変数からブラウザ操作・非同期処理まで体系的に学ぶ 全 11 章のガイドです。プログラミングが初めての人でも読み進められるよう、各章にコード例と初級者向け解説を添えています。
このガイドの特徴
- 基礎から順番に: 変数・データ型から始め、関数 → オブジェクト → ブラウザ操作 → 非同期処理まで連続した流れで学べる
- コード例重視: すべてのコードに実行結果コメントを付け、「何が起きるか」を目で追える
- 初級者向け解説: 各章の要所に
:::tipで補足を入れ、つまずきやすいポイントを先回りで解説 - モダンな書き方: アロー関数・分割代入・スプレッド構文・async/await・オプショナルチェイニング (
?.)・Null 合体 (??) など現在主流の記法を扱う
ガイドの構造
11 章の概要
| 章 | テーマ | 概要 |
|---|---|---|
| 変数と定数 | データの入れ物 | let / const / var の違い、スコープ、ホイスティング、TDZ |
| データ型 | 値の種類 | プリミティブ 7 種と参照型、typeof、Array.isArray() |
| 条件分岐 | 処理の分岐 | if / 三項演算子 / switch、truthy・falsy、Null 合体 ?? |
| ループ処理 | 繰り返し | for / while / for...of / for...in の使い分け |
| 関数 | 処理のまとまり | 関数宣言 / 関数式 / アロー関数、this、デフォルト・レスト引数 |
| オブジェクト | データの構造化 | リテラル、分割代入、スプレッド、オプショナルチェイニング ?. |
| 配列 | 順序付きの集まり | 基本操作と高階関数 (map / filter / reduce)、Array.at() |
| DOM 操作 | HTML を動かす | 要素の取得・操作・生成、textContent と innerHTML の使い分け |
| イベント処理 | ユーザー操作に反応 | リスナー登録、イベント伝播、イベント委任 |
| 非同期処理 | 待つ処理を書く | コールバック → Promise → async/await、Promise.allSettled |
| ベストプラクティス | 良いコードへ | 命名規則・構造化・エラー処理・モジュール・デバッグ |
推奨される読み方
- はじめて学ぶ人: 変数と定数 から順番に読み、コードを実際に書いて動かしながら進める
- 基礎を一度学んだ人: 表から気になるトピックを直接開いて拾い読みでも OK
- ブラウザ操作だけ知りたい人: DOM 操作 → イベント処理 → 非同期処理 の流れがおすすめ
コードを試すときは
各コード例は ブロックごとに独立 しています。ブラウザのコンソールなどで試すときは、1 つのブロックずつ実行してください。同じ変数名（const user など）を別のブロックで使い回している箇所があるため、まとめて貼り付けると Identifier 'x' has already been declared エラーになることがあります。
このガイドの立ち位置
本ガイドは JavaScript という言語そのものの基礎 に重点を置いています。本サイトの他の体系学習ガイドは、いずれも JavaScript の知識を前提にしているため、本ガイドはそれらの 入口 にあたります。
- TypeScript ガイド — JavaScript に型を足して安全に書く。本ガイドの「JS 基礎」が前提
- Clean Code — 書けるようになったコードの品質を上げる設計規範
JavaScript の基礎を本ガイドで固め、型を TypeScript ガイドで身につけ、品質を Clean Code で底上げする、という流れが想定動線です。
役立つリソース
さらに学習を深めるための定番リソースです。
- MDN Web Docs (JavaScript) — 最も信頼できる公式リファレンス
- JavaScript Primer — 日本語で書かれた網羅的な入門書 (無料)
- JavaScript.info — 基礎から応用まで体系的にまとめられた解説サイト
それでは 変数と定数 から始めましょう。