if ・ for ・ while ・ switch が分かる程度。関数・クラス・例外・非同期は知らない前提で書く.js を書いてエラーを読んで直せる。型変換・this ・クロージャ・非同期の動きを説明できる。ブラウザで DOM とイベントを使った小さな画面を作れる| 部 | 実行環境 | 章 | 勉強会（各 90 分） |
|---|---|---|---|
| 第1部 言語編 | Node.js | 01〜13 ＋付録 A1〜A3 | 第1〜4回 |
| 第2部 ブラウザ編 | ブラウザ | 14〜23 | 第5〜6回 |
各部の最後の章はハンズオンで、宿題にする。1 回の時間配分は、振り返りと質問 10 分 ／ 読み合わせ 50 分 ／ 演習 25 分 ／ 次回予告 5 分。
山場は後半に 2 段で置く。前半の山は型変換・this ・グローバル（04 ・ 07）、後半の山は最重要のクロージャ・非同期（09 ・ 11）。
| 回 | 章 | タイトル | 主な内容 |
|---|---|---|---|
| 第1回 | 01 | 背景 | JavaScript と ECMAScript、ブラウザと Node.js、Java とは別の言語 |
| 02 | 実行環境 | Node.js の導入、REPL、node file.js、console.log | |
| 03 | 値と変数 | let ・ const ・ var、プリミティブ型、数値は double だけ、テンプレート文字列、null と undefined | |
| 04 | 演算子と型変換 山 | == と ===、truthy ・ falsy、NaN、暗黙の変換、?? と ?. | |
| 05 | オブジェクトと配列 | 参照とコピー、分割代入、スプレッド、配列のメソッド、JSON | |
| 06 | 関数 | 宣言・式・アロー関数、既定値・残余引数、コールバック | |
| 第2回 | 07 | スコープ・this・グローバル 山 | ブロックスコープ、巻き上げ、グローバル変数の事故、globalThis、this の決まり方、strict モード |
| 08 | クラスとプロトタイプ | class、継承、裏にあるプロトタイプ | |
| 第3回 | 09 | クロージャ 山 | 外側の変数を覚える仕組み、カウンタ、ループ内の関数 |
| 10 | エラー処理とモジュール | try ・ catch ・ throw、import ・ export、npm の最小限 | |
| 第4回 | 11 | 非同期 山 | イベントループ、Promise、async ・ await、非同期のエラー |
| 12 | CommonJS と ES Modules | require と import、.cjs ・ .mjs ・ .js の決まり方（package.json の "type"）、__dirname と import.meta、古いコードの見分け方 | |
| 宿題 | 13 | ハンズオン | 小さな CLI ツールを作る（読み込み → 集計 → 非同期化）。第5回の冒頭で振り返る |
付録: A1 逆引き ／ A2 Java ・ C# ・ VBA との対応表 ／ A3 落とし穴カタログ（症状から原因を引く）
20〜22 は「Web でできること」の紹介。短い例を動かして見せるだけで、詳しくは説明しない。
| 回 | 章 | タイトル | 主な内容 |
|---|---|---|---|
| 第5回 | 14 | ブラウザで動かす | <script type="module">、開発者ツール、ローカルサーバ |
| 15 | DOM | 要素の取得・作成・書き換え、textContent と innerHTML | |
| 16 | イベント | addEventListener、伝播と委譲、イベントの中の this | |
| 17 | フォーム | 入力値の取得、検証、送信を止める | |
| 第6回 | 18 | 通信 | fetch、JSON、CORS の入口 |
| 19 | ブラウザの機能 | 保存の方法の比較（cookie ・ localStorage ・ sessionStorage ・ IndexedDB の使いどころだけ）、タイマー、履歴、クリップボード | |
| 20 | 紹介: 描画とメディア | Canvas、SVG、3D（three.js など）、動画、マイク・カメラ、音声合成、音の生成（Web Audio） | |
| 21 | 紹介: リアルタイム通信 | WebSocket、Server-Sent Events、WebRTC、チャット | |
| 22 | 紹介: ライブラリを埋め込む | CDN で React、UMD を <script> で読み込む、Mermaid でシーケンス図など | |
| 宿題 | 23 | ハンズオン | ToDo などの小さな画面を作る |
docs/ に HTML で置く（01-背景.html など）。共通 CSS は docs/css/style.css、サンプルは docs/samples/node --version の実測値を docs/ZZ-構成.html の 1 か所にだけ書くjsprimer は、GitBook のプラグイン js-console（codemirror-console）を使っている。コードの横のボタンを押すと、編集できるエディタ（CodeMirror）とコンソール風の出力欄が開き、ブラウザの中でコードを評価して console.log の出力とエラーを表示する。
| コードの種類 | ボタンを押したとき |
|---|---|
| ブラウザで動くもの（値・関数・クラス・クロージャ等） | その場で実行し、出力とエラーを表示する。コードは書き換えて再実行できる |
タイマー・Promise ・ async ・ await | 同じく実行する。出力は時間差で順に追加されていく（11 章の例はこちらを多めにする） |
Node.js でしか動かないもの（ファイルの読み書き・ディレクトリ一覧・require 等） | 実行はせず、Node.js で実際に動かしたときの出力を、あらかじめ記録したものとして表示する。「Node.js での実行結果」と明示し、書き換えはできない |
仕組みは自前で書き、docs/js/ に置く。CDN は使わない。実行する場所は部で分ける。
console を差し替えて出力を postMessage でページへ送るwindow ではなく self。07 章の例は実際に動かし、ブラウザ本体と結果が違えば本文で説明するfile:// で直接開いたときに Worker が動くかは未確認。動かなければ、ローカルサーバで開くよう案内する記録する出力は、docs/samples/ のコードを実際に Node.js で動かして得る。
なし。
tools/40_test/run-tests.cmd）data-run="worker" はブラウザで実行、"node" は Node.js の記録を表示、"file" は置いておくだけのファイル）。前後のナビ ・ 目次 ・ 章の色は tools/20_build/build-docs.ts で書き込むdata-run="dom" とし、iframe の中に HTML ・ CSS ・ スクリプトを置いて、画面と console を見せる（docs/js/frame.js）。CDN から読み込む例には data-net="cdn" を付けた。14 章のローカルサーバ（docs/samples/web/serve.mjs）は、資料のコードとファイルが一致することと、実際に応答することをテストで確かめる