前回との接続
前回のF-01では、同じJavaScriptでもブラウザとNode.jsという2系統の実行環境で動くことを確認しました。今回は言語そのものの性質に戻り、変数の「見える範囲」に注目します。E-03で学んだ変数には、実はどこからでも自由に使えるわけではなく、参照できる範囲があらかじめ決まっている、という性質があります。この範囲を取り違えることが、AIが生成したコードで頻発する「未定義」エラーの多くの正体なのです。
このスライドのポイント
- 前回F-01: 同じJavaScriptでもブラウザとNode.jsの2系統の実行環境で動く
- 今回: 言語そのものの性質に戻り、変数の「見える範囲」に注目する
- E-03で学んだ変数には、参照できる範囲が決まっているという性質がある
- この範囲の取り違えが、AI生成コードの「未定義」エラーの多くの正体
スコープとブロックの定義
スコープとは、変数を参照できる範囲のことです。そして、波かっこで囲まれたまとまりをブロックと呼びます。原則はとてもシンプルで、変数は宣言されたブロックや関数の中でだけ見えます。位置関係でいうと、内側からは外側の変数が見えますが、外側からは内側の変数は見えません。入れ子の箱をイメージしてください。外の箱の中身は内の箱から見えますが、その逆はできない、という向きの決まりだと捉えると理解しやすくなります。
このスライドのポイント
- スコープ＝変数を参照できる範囲
- ブロック＝波かっこ { } で囲まれたまとまり
- 原則: 変数は宣言されたブロック（や関数）の中でだけ見える
- 向き: 内側からは外側の変数が見える／外側からは内側の変数は見えない
なぜ必要か
この向きを知らないと、まず「is not defined」という未定義のエラーが読めません。よくあるのは、関数やブロックの外で計算結果を使いたいのに、その変数を中で宣言してしまうケースです。すると外側からはその変数が見えず、原因がわからないままAIへ修正を頼んでも、的外れな指示になって空回りします。エラーの原因が「そもそも存在しない」のか、それとも「ここからは見えない」だけなのかを区別できることが、確認の第一歩になります。
このスライドのポイント
- 知らないと「is not defined（未定義）」エラーが読めない
- ありがちな失敗: 外で使いたい結果を、ブロックや関数の中で宣言してしまう
- 外側から見えず、AIへの修正指示が空回りする
- 「存在しない」のか「ここからは見えない」のかの区別が確認の第一歩
構造
構造は入れ子の箱で捉えます。外側の箱で宣言した変数は、内側の箱から参照できます。反対に、内側の箱で宣言した変数は、外側からは参照できません。図では、外から内への矢印は通れず、内から外への矢印は通れる、という一方通行として描いています。この「見える向き」さえしっかり押さえておけば、コードのどの変数がどこまで届くのかを、上から順に目で追えるようになります。読む力の土台になる考え方です。
このスライドのポイント
- 入れ子の箱で捉える
- 外側の箱で宣言した変数は、内側の箱から参照できる
- 内側の箱で宣言した変数は、外側からは参照できない
- 「見える向き」の一方通行を目で追えるようにする
Webアプリでの具体例
具体例として、E-06で学んだループを思い出してください。ループの中で宣言した変数を、ループが終わった後で使おうとすると失敗します。中で宣言した変数は、ブロックの外からは見えないからです。だからこそ、合計のように後で使いたい値は、あらかじめ外側で宣言しておきます。「なぜ合計をループの外で宣言するのか」という素朴な疑問に、スコープという考え方が明確な答えを与えてくれます。経費の金額を足し合わせる処理などが、まさにこの形になります。
このスライドのポイント
- E-06で学んだループを例に取る
- ループの中で宣言した変数を、ループの後で使おうとすると失敗する
- 中で宣言した変数はブロックの外からは見えないため
- 後で使う値（合計など）は、あらかじめ外側で宣言しておく
技術サンプルカード
今回のサンプルは実際のコードです。totalはループの外側で宣言しているので、ループが終わった後も値が残り、最後に600を表示できます。一方、doubledはループのブロックの中で宣言しているため、ブロックの外から参照しようとするとエラーになります。読み方の要点は2つで、doubledはブロックの中だけの変数であること、そしてtotalは外で宣言したからこそ残ること、です。AIには「この変数のスコープはどこからどこまでですか」と質問し、範囲を言葉にさせて確認しましょう。
混同しやすい概念
混同しやすいのは、「変数が存在しない」ことと「ここからは見えない」ことの違いです。前者は、その変数がそもそもどこにも宣言されていない状態です。後者は、変数は確かに宣言されているのに、いま使おうとしている場所が、その変数のスコープの外にある状態です。困ったことに、エラーメッセージはどちらの場合も似た文言になります。だからこそ、「宣言はそもそもあるのか」「使う場所は範囲の内か外か」を分けて考える必要があります。
このスライドのポイント
- 「変数が存在しない」と「ここからは見えない」は別物
- 存在しない＝どこにも宣言されていない状態
- 見えない＝宣言はされているが、使う場所がスコープの外にある状態
- エラーメッセージはどちらも似た文言になるので、分けて考える
バイブコーディングでの確認点
確認点です。未定義のエラーに出会ったら、まずAIに2点を示させます。その変数がどこで宣言されているか、そしてどこで使おうとしているか、です。この2点の位置関係がはっきりすれば、「宣言し直す」のか、それとも「宣言する場所を外側へ動かす」のか、対処の方向がおのずと決まります。エラー文だけを見て闇雲に直そうとせず、宣言と参照の位置を突き合わせる習慣をつけましょう。質問例は「この変数はどこで宣言され、どこで使われていますか」です。
このスライドのポイント
- 未定義エラーに出会ったら、AIに2点を示させる
- ①その変数がどこで宣言されているか
- ②どこで使おうとしているか
- 位置関係が定まれば「宣言し直す」か「宣言する場所を外へ動かす」か対処が決まる
まとめと次回
一問一答です。「ブロックの内側で宣言した変数は、外から見えるでしょうか」。（間）答えは、見えません。見える向きは内から外の一方向で、外から内は見えないのが原則です。30秒でまとめると、スコープは変数を参照できる範囲のことであり、内側から外側は見え、外側から内側は見えない、この決まりが未定義エラーを読む土台になります。次回F-03では、データを直接変えるのか、新しく作るのかという2つの更新方式へ進みます。関連資料は「エラー文の読み方」「リファクタリング指示文50」です。
このスライドのポイント
- 一問一答: ブロックの内側で宣言した変数は外から見える？
- 答え: 見えない（内→外は見える、外→内は見えない）
- 30秒まとめ: スコープ＝参照できる範囲。未定義エラーを読む土台
- 次回F-03: データを直接変えるか、新しく作るか
- 関連資料: 「エラー文の読み方」「リファクタリング指示文50」
