if ・ for ・ while ・ switch が分かる程度。関数・クラス・例外・非同期は知らない前提で書く.js を書いてエラーを読んで直せる。型変換・this ・クロージャ・非同期の動きを自分のことばで説明できる。ブラウザで DOM とイベントを使った小さな画面を作れるthis ・グローバル)。JavaScript らしい落とし穴を知る。後半の山は 09(クロージャ)と 11(非同期)。最も大事な仕組みで、ここを越えると実務のコードが読めるようになる| 回 | 範囲 | ねらい |
|---|---|---|
| 第1回 | 01〜06 | 環境を動かし、値・型変換・関数に慣れる。01〜03 は読み流し、04 に時間を寄せる |
| 第2回 | 07〜08 | this ・グローバル変数・プロトタイプ(前半の山) |
| 第3回 | 09〜10 | クロージャ(後半の山)、エラー処理とモジュール |
| 第4回 | 11〜12 | 非同期(後半の山)、CommonJS と ES Modules |
| 宿題 | 13 | ハンズオン。第5回の冒頭で振り返る |
| 第5回 | 14〜17 | 第1部の宿題の振り返り。ブラウザで動かし、DOM ・ イベント ・ フォームで画面を動かす |
| 第6回 | 18〜22 | 通信 ・ 保存(18 〜 19 に 45 分)、Web でできることの紹介(20 〜 22 に 30 分。例を動かして見せるだけ) |
| 宿題 | 23 | ハンズオン(ToDo)。勉強会の最後に見せ合う |
1 回は 90 分。振り返りと質問 10 分 / 読み合わせ 50 分 / 演習 25 分 / 次回予告 5 分。第6回は内容が多いので、収まらなければ第7回を足す。
参加者には、事前に Node.js を入れて node --version が表示される状態にしておいてもらう(02 章)。第2部は Chrome か Edge を使う。20 〜 22 章の一部の例は、CDN から読み込むのでネットワークが必要。
資料のコードと出力は、次の環境で実際に動かして確かめた。
| もの | 版 |
|---|---|
| Node.js | v26.11.1 |
| ブラウザ(「▶ 実行」ボタン) | Chromium(Chrome ・ Edge と同じエンジン) ・ Firefox |
Node.js は v26 系の、資料を作る時点の最新版を使う。版を上げたら、この表を書き換え、テストを流し直す。
js/runner.js が、<div class="example" data-run="…"> で囲んだ例にボタンを付けるdata-run="worker" の例は、Web Worker(js/worker.js)の中で実行する。ページと別のスレッドなので、無限ループでも資料は固まらない。5 秒で打ち切るjs/inspect.js が作る。Node.js の console.log と同じ形になるように、Node の表示の決まりを写しているfile://)ときは、Worker を作れないため、data-run="worker" の例も iframe で実行する。この場合は無限ループを書くとページごと固まる。fetch は file:// では使えないので、通信を使う例は理由を表示して止まるdata-run="dom" の例(第2部)は、HTML ・ CSS ・ スクリプトの組を iframe の中に置いて動かし、画面と console を見せる。console の受け渡しは js/frame.js が行う。ページと同じ流れで動くので、時間で打ち切れないdata-run="node" の例は、Node.js でしか動かないもの。Node.js で実行した結果を記録しておき、ボタンを押すと表示するdata-run="file" は、置いておくだけのファイル(読み込まれる側のモジュールや package.json)。ボタンは付けないdata-net="cdn" を付けた例は、CDN からライブラリを読み込む。テストを JSL_NET=0 で流すと、これらを飛ばすpre.output が記録した出力。JavaScript が動かない環境(Markdown など)ではそのまま見えるjs/ のファイルはビルドの要らない JavaScript で書いている| 制約 | 起きること |
|---|---|
| エラーの文面は V8 のもの | 載せたエラーの文面は Node.js ・ Chrome ・ Edge と同じ V8 のもの。Firefox では同じエラーが別の文面で出る。Safari では確かめていない |
値の表示は js/inspect.js による写し | Promise の状態(<pending> など)や、エラーが起きた場所(スタック)は、Node.js と同じには出ない |
第2部の例(data-run="dom")は時間で打ち切れない | 無限ループを書くと、ページごと固まる。タブを閉じて開き直す |
| ネットワークが要る例がある | 20 〜 22 章の CDN を使う例と、18 章の通信の例は、オフラインでは動かない |
ファイルとして直接開いた(file://)とき | 第1部の例も iframe で動くので、5 秒の打ち切りが効かず、無限ループで固まる。globalThis は self ではなく window になる(07 章)。fetch は使えない。エラーの内容をブラウザが隠すことがある。公開ページか、ローカルサーバ経由(14 章)で開けば、どれも起きない |
| 3 桁区切りなどの書式は、実行する環境の言語設定に従う | toLocaleString() を言語の指定なしで呼ぶ例(04 ・ 10 ・ 13 ・ 15 ・ 17 章)は、日本語の環境(ja-JP)で読む前提で書いている。英語の設定でも同じに見えるが、ほかの言語の設定では区切りの記号が変わる(ドイツ語なら 1.234.567)。環境によらず揃えたいときは toLocaleString("ja-JP") と言語を指定する |
node tools/20_build/build-docs.ts で、前後のナビ ・ 目次 ・ 章の色 ・ 資料一覧を書き込むtools/40_test/run-tests.cmd でテストを流す。資料の例を Node.js で動かした結果と、ブラウザ(Chromium ・ Firefox)で「▶ 実行」を押した結果の両方を、載せた出力と比べる。Firefox のエラーの文面は、tests/helpers/browser-errors.ts の対応表で載せた文面に読み替えて比べる。資料に例を足して Firefox だけ食い違ったら、この表に足す。docs/samples のファイルが資料と一致しているか、23 章の完成形が操作どおりに動くか、ページが横にはみ出さず Console に警告が出ないかも確かめるhtml2md --root . --dir docs --dir notes で Markdown を作り直す