前回との接続——値を持ち回るには名前が要る
前回のE-02では、値には文字列や数値といった種類、つまりデータ型があることを見ました。しかし、その値をプログラムの中で使い続けるには、値そのものをいちいち書くのではなく、名前を付けて呼び出せるようにする必要があります。計算の途中経過を保ったり、あとから参照したりするための土台が、今回の変数と代入です。ここはコードを読むうえで欠かせない、基本の道具になります。
このスライドのポイント
- E-02: 値には文字列・数値などの種類（データ型）があった
- 値をプログラムの中で使い続けるには、名前を付けて呼び出せるようにする必要がある
- 計算の途中経過を保つ／あとから参照する、ための土台が今回の内容
- コードを読むうえで欠かせない基本の道具
変数・代入・再代入の定義
変数とは、値に付けた名前のことです。そして代入とは、その名前と値を結びつける操作を指します。たとえばtotalという名前に1100という数値を結びつければ、以降はtotalと書くだけでその値を参照できます。さらに、結びつける先を新しい値に変えることを再代入と呼び、これがプログラムにおける状態の更新にあたります。付け加えると、こうした値はB-03で見たメモリ上に置かれています。
このスライドのポイント
- 変数＝値に付けた名前
- 代入＝名前と値を結びつける操作
- 再代入＝結びつける先を新しい値に変えること（＝状態の更新）
- こうした値はB-03で見たメモリ上に置かれる
なぜ必要か——値の変化を追えないと直せない
変数の考え方があやふやなままだと、コードのどこで値が変わったのかを追えなくなります。バイブコーディングでよくあるのが、「途中から値がおかしい」という種類の不具合です。どの行で、どの名前に、何が結びつけ直されたのかを追えなければ、その原因をAIに正しく説明することもできません。値の変化を1行ずつ追う力が、原因の切り分けを支えます。
このスライドのポイント
- 変数があやふやだと、どこで値が変わったのかを追えない
- バイブコーディング頻出: 「途中から値がおかしい」型の不具合
- どの行で・どの名前に・何が結びつけ直されたか、を追えないとAIに説明できない
- 値の変化を1行ずつ追う力が、原因の切り分けを支える
構造——変数は「値への名札」
変数は、値そのものを入れる箱というより、値を指し示す名札だと捉えると正確です。totalという名札が1100という値を指している、と考えてください。再代入が起きると、この名札の指す先が新しい値へ付け替えられます。前の値を消して書き換えるのではなく、名札を別の値に向け直すイメージです。この「名札の指す先が変わる」という2コマの動きが、状態の更新の正体です。
このスライドのポイント
- 変数は値を入れる箱ではなく、値を指し示す名札
- 「total という名札 → 1100」
- 再代入で、名札の指す先が新しい値へ付け替わる
- 前の値を書き換えるのではなく、名札を向け直すイメージ
処理の流れ——合計を1行ずつ追う（机上実行）
具体例として、買い物の合計金額を考えます。最初、totalは0から始まります。商品を1つ足すたびに、totalは新しい合計へと更新されていきます。そして最後にtotalが指している値が、求める結果です。ここで大切なのは、コードを上から順に読みながら、各行でtotalが何を指しているかを紙の上で追う練習です。これは机上実行と呼ばれ、AIが書いたコードを自分で検算する基本動作になります。
このスライドのポイント
- 例: 買い物の合計金額
- total は0から始まる
- 商品を足すたびに total が新しい合計へ更新される
- 最後に total が指す値が結果
- コードを上から読み、各行の total を紙の上で追う＝机上実行
技術サンプルカード
サンプルを見ていきます。種別はコードで、目的は再代入によってtotalの値が育っていく様子を追うことです。1行目でtotalを0に結びつけ、2行目では今のtotalに1200を足した結果を、あらためてtotalに結びつけ直します。3行目でさらに800を足し、最後に表示すると2000になります。読み方の要点は、同じtotalでも行ごとに指す値が違うこと、そしてイコールは数学の等しいではなく代入だということです。
混同しやすい概念——代入の「=」と数学の「＝」
混同しやすいのが、代入のイコールと、数学のイコールです。数学では、totalイコールtotalプラス800という書き方は成り立ちません。左右が等しいことはあり得ないからです。しかし代入としては、これは「今のtotalに800を足した結果を、新しくtotalに結びつける」という意味になり、まったく問題なく成立します。イコールを「等しい」ではなく「右の結果を左の名前に結びつける」と読み替えることが、コードを正しく追う鍵です。
このスライドのポイント
- 数学の「＝」: 左右が等しいことを表す（total = total + 800 は成立しない）
- 代入の「=」: 右の計算結果を左の名前に結びつける（total = total + 800 は成立する）
- 「等しい」ではなく「右の結果を左の名前に結びつける」と読み替える
バイブコーディングでの確認点
バイブコーディングでの確認点です。値が想定とずれる不具合を調べるときは、AIに「この変数の値を途中で表示してください」と頼むのが有効です。実行の途中でconsole.logを挟んで値を確かめれば、どの行で想定とずれ始めたのかを特定できます。原因の行が分かってから修正を頼めば、AIへの指示も具体的になります。
このスライドのポイント
- 値が想定とずれる不具合は、AIに「この変数の値を途中で表示して」と頼む
- 実行の途中で console.log を挟み、どの行でずれ始めたかを特定する
- 原因の行が分かってから修正を頼むと、指示が具体的になる
一問一答とまとめ
最後に一問一答です。totalイコールtotalプラス800、このイコールの意味は何でしょうか。（間）答えは、代入です。右側の計算結果を、左のtotalという名前に結びつけ直しています。30秒まとめとして、変数は値への名札、代入はその結びつけ、再代入は状態の更新でした。次回のE-04では、この代入の右側に書かれていた計算そのもの、式と演算子へ進みます。関連資料は「AI開発ワード100」と「エラー文の読み方」です。
このスライドのポイント
- 一問一答: 「total = total + 800 の『=』の意味は？」→ 代入
- 30秒まとめ: 変数＝値への名札／代入＝結びつけ／再代入＝状態の更新
- 次回 E-04: 代入の右側に書かれていた計算そのもの（式と演算子）へ
- 関連資料: 「AI開発ワード100」「エラー文の読み方」
