【第4回】AIのコードが「動くのに間違っている」を見抜く｜変数と型（嫁子が教えるTS講座）

学ぶ2026/08/17 公開

今回のゴール

コードの中の const、let が何をしているか分かる
数値・文字列・真偽値という3つの基本の型を見分けられる
型が違うと何が起きるかを、実例で1つ知る

ここから第2部（JavaScriptの基礎）です。前回までで作業する場所と記録の残し方は用意できたので、いよいよコードの中身に入ります。全体の流れは講座の目次へ。

嫁子: 第2部からは、AIが書いたコードを「読む」練習になるよ。

変数って、プログラムの中でいちばん出てくるものなの。AIに何か作らせたら、返ってきたコードの1行目から並んでる。だからここが読めないと、その先は全部おまじないに見えるんだよね。

逆に言えば、今日の内容だけで「このコードは何を持っている状態か」が見えるようになる。地味だけど、効き目は大きいよ。

なぜ学ぶか：AIへの指示が具体的になるから

AIに「合計金額を計算して」と頼むと、こんなコードが返ってきます。

const price = 1200;
const count = 3;
const total = price * count;

このとき、あなたが「price は税抜きなのか税込みなのか」を判断できるかどうかで、次の一言が変わります。

読めない場合	読める場合
「なんか違う気がします」	「`price` を税込みにしてください」
どこを直すか指定できない	直す場所を名指しできる

AIは、指し示された場所は正確に直します。問題は、こちらが指し示せるかどうかです。

① 変数は「名前のついた箱」ではない

よく箱に例えられますが、実際は値に名前をつけていると考えたほうが正確です。

const name = "嫁子";
console.log(name);   // 嫁子 と表示される

name という名前をつけておくと、あとから何度でもその値を呼び出せます。console.log() は「画面に表示して」という命令で、動作確認のときに大量に出てきます。

嫁子: console.log はね、プログラマがいちばん使う道具だと思っていいよ。

AIが書いたコードが変な動きをしたとき、途中に console.log を挟んで「この時点で中身は何？」と覗くの。原始的だけど、これが一番早いんだ。

② const と let の使い分け

変数を作る書き方は2つあります。使い分けの基準は単純です。

const tax = 0.1;    // あとから変えない
let count = 0;      // あとから変える
count = count + 1;  // これはOK

const で作ったものを書き換えようとすると、その場でエラーになります。

const tax = 0.1;
tax = 0.08;   // TypeError: Assignment to constant variable.

基本は全部 const で書き、変える必要が出たときだけ let に変える、という順番で覚えてください。逆をやると事故が増えます。

書き方	意味	使う場面
`const`	あとから変えない	ほとんどの場合
`let`	あとから変える	数を数える、状態を切り替える
`var`	古い書き方	今から書くコードでは使わない

嫁子: var は昔の書き方で、思わぬ場所から書き換えられる問題があったの。今は使わないよ。

ただ、ネットで見つけた古い記事には var がふつうに出てくるから、そこは気にしないでね。「あ、古い記事だな」と分かればそれで十分だよ。

AIも、指示しなければまず var は使わない。もし出てきたら「const で書いて」と言えばいいだけだね。

③ まず覚える3つの型

値には種類があります。第3部でやるTypeScriptは、この「種類」を厳密に扱う言語なので、ここが土台になります。

const price = 1200;          // number（数値）
const name = "牛乳";          // string（文字列）
const isDone = false;        // boolean（真偽値）

文字列はクォートで囲みます。囲まないと変数名として扱われ、エラーになります。

真偽値は true か false の2つしかありません。「終わったか」「ログインしているか」のような、はい・いいえで答えられる状態を持つのに使います。

④ 型が違うと、静かに壊れる

ここが今日いちばん大事なところです。JavaScriptは型が違ってもエラーにせず、勝手に解釈して進んでしまいます。

const a = 1200;
const b = "3";      // 見た目は数字だが文字列
console.log(a * b); // 3600（掛け算はできてしまう）
console.log(a + b); // "12003"（足し算は文字列の連結になる）

掛け算は数値として計算され、足し算は文字をつなげた結果になります。同じ2つの値なのに、演算子によって挙動が変わります。

これが「動くのに間違っている」の典型例で、しかもエラーが出ないので気づけません。

嫁子: フォームに入力された数字って、ぜんぶ文字列で届くの。だからこれ、実際によく起きる事故なんだ。

合計金額が "10001500" みたいになって初めて「あれ？」ってなる。金額の桁が異常に多いのは、たいていこれが原因だよ。

第3部でやるTypeScriptは、まさにこれを書いた瞬間に止めてくれる言語なの。今のうちに「型が混ざると事故る」という感覚だけ持っておいて。

つまずきポイント

= は「等しい」ではありません。「右のものを左に入れる」という意味です。等しいかを調べるときは === を使います（第6回でやります）。

変数名は英数字で書きます。日本語も技術的には使えますが、実務では使いません。goukeiKingaku のようにローマ字で書くか、totalPrice のように英語にします。

名前は説明的につけてください。a や data より totalPrice のほうが、あとで読む自分もAIも助かります。

嫁子: 変数名、AIに任せると英語で返ってくることが多いよね。読めなくて困るなら「変数名は日本語のコメントをつけて」と頼んでいいの。

遠慮する必要はないよ。分からないまま進めるほうが、ずっと損だから。

今回のまとめ

変数は値に名前をつける仕組みで、console.log() で中身を確認できる
基本は const、変える必要があるときだけ let。var は使わない
基本の型は数値（number）・文字列（string）・真偽値（boolean）の3つ
型が違っても JavaScript はエラーにせず進んでしまう（1200 + "3" は "12003"）
この問題を書いた瞬間に止めてくれるのが、第3部で学ぶTypeScript

次にやること

次回は配列とオブジェクトです。値を1つずつ扱うのではなく、まとめて持つ方法を学びます。買い物リストのような「複数のもの」を扱うには必ず必要になります。

今回の宿題：第2回で作った hello.js に、上の「型が違うと静かに壊れる」のコードを書き写して、node hello.js で実行してみてください。"12003" が出てくるのを自分の目で見ておくと、記憶に残ります。

嫁子: 読んで納得するのと、実際に "12003" が出るのを見るのは別ものだよ。

ここだけは手を動かしておいてね。この感覚が、TypeScriptを学ぶ動機そのものになるから。