入力に入ってくるデータには「種類」がある
前回のE-01では、どんなプログラムも入力・処理・出力の3つで説明できることを見ました。今回は、その入力に入ってくるデータそのものに注目します。実は、データには種類があります。そして、その種類を取り違えると、処理はエラーにならないまま静かに壊れることがあります。まずは、その種類を見分けられるようになりましょう。
このスライドのポイント
- 前回E-01: どんなプログラムも入力→処理→出力で説明できた
- 今回はその「入力」に入ってくるデータそのものに注目する
- データには種類があり、種類を取り違えると処理が壊れる
データ型とは値の種類
データ型とは、値の種類のことです。大きく4つを押さえます。文字列は文字の並びで、二重引用符で囲んで表します。数字を引用符で囲んだ「"1000"」も、計算対象ではなく文字列です。数値は計算できる数で、引用符なしの1000がこれにあたります。真偽値は、はいといいえを表すtrueとfalseの2つの値だけを持つ型です。未定義値は、まだ値が入っていない状態を表し、undefinedなどで示されます。
このスライドのポイント
- データ型＝値の種類
- 文字列＝文字の並び（"1000" も文字列）
- 数値＝計算できる数（1000）
- 真偽値＝はい・いいえの2値（true / false）
- 未定義値＝まだ値が入っていない状態（undefined 等）
型を間違えると起きる頻出バグ
型を意識しないと、バイブコーディングでよく起きるバグが読めません。代表例が、1000足す100のはずが1000100になってしまう現象です。これは数値の足し算ではなく、文字列どうしの連結が起きた結果です。特に、画面のフォームから届く値は、数値に見えても文字列として届くことが多く、これが事故の温床になります。型を疑えるかどうかで、原因の切り分け速度が大きく変わります。
このスライドのポイント
- 「1000 + 100 が 1000100 になる」＝文字列連結の事故
- 数値の足し算ではなく、文字列どうしの連結が起きている
- フォーム入力は数値に見えても文字列で届く、が事故の温床
4つの型を表で整理する
4つの型を、表で整理しておきましょう。型、例、できる処理、間違えるとどうなるか、の4列で並べます。文字列は連結ができますが、そのまま足し算はできません。数値は四則計算ができます。真偽値は条件の判定に使い、未定義値はまだ値がないことを表します。中央に置いてほしいのは、見た目そっくりな「"1000"」と「1000」が別物だ、という一点です。ここが多くの混乱の入口になります。
フォームの値は文字列で届く
具体例で流れを追います。フォームの金額欄に利用者が1000と打ち込むと、その値は多くの場合、文字列として届きます。これを数値へ変換しないまま別の金額に足すと、計算ではなく連結が起きます。前回のE-01で見た入力、あるいはD-03で見たリクエストのボディで届くデータにも、それぞれ型があります。値を扱う前に、いまこの値はどの型か、と一度立ち止まる。この一手が、静かな計算ミスを防ぎます。
このスライドのポイント
- フォームの金額欄に入れた「1000」は文字列として届く
- 数値へ変換せず足すと、計算ではなく連結になる
- 届くデータにはそれぞれ型がある。扱う前に型を確認する
技術サンプル: 型で結果が変わる
サンプルを見ます。種別はコードで、目的は、同じ足し算に見えて型によって結果が変わることを確かめることです。読み方は2点です。1つ目、変数aは数値どうしの足し算なので1100になります。2つ目、変数bは文字列と数値の組み合わせなので、連結されて「"1000100"」という文字列になります。二重引用符で囲むと文字列になる、という点も合わせて押さえてください。AIへの質問例はこうです。「この変数の型は何ですか。フォームから届く値の型変換はどこで行っていますか」。
このスライドのポイント
- 種別: code
- 目的: 同じ足し算に見えて、型によって結果が変わることを確かめる
- サンプル本体:
数値の1000と文字列の"1000"
混同しやすいのは、数値の1000と文字列の"1000"です。この2つは、画面に表示するとどちらも同じ1000に見えます。しかし、数値は計算できるのに対して、文字列は計算できません。表示が同じでも中身は別物だ、という感覚を持っておくと、原因不明に見える計算ミスの多くが、実は型の問題だったと見えてきます。
このスライドのポイント
- 数値の 1000 vs 文字列の "1000"
- 計算できる／できない、が本質的な違い
- 表示は同じ「1000」でも別物
バイブコーディングでの確認点
バイブコーディングでの確認点です。入力を扱うコードでは、この値はどの時点で数値に変換されますか、とAIに確認しましょう。そして、計算結果がおかしいときは、まず型を疑うのが近道です。AIへの質問例としては、「この計算に使う値の型は何で、変換はどこで行われていますか」が有効です。型を先に押さえておくと、修正の指示が具体的になります。
このスライドのポイント
- 入力を扱うコードでは「この値はどの時点で数値に変換されますか」を確認
- 計算結果がおかしいときは、まず型を疑う
- AIへの質問例あり
まとめと次回
最後に一問一答です。問題。「"1000" + 100」の結果は何になるでしょうか。……答えは、「"1000100"」という文字列です。数値の足し算ではなく、文字列の連結になるためです。30秒でまとめます。データ型は値の種類で、文字列・数値・真偽値・未定義値の4つをまず押さえます。型が違えば同じ足し算でも結果が変わり、特にフォームの値は文字列で届きます。次回は、こうした値に名前を付けて持ち回る変数へ進みます。関連資料は「AI開発ワード100」「エラー解決プロンプト50」です。
このスライドのポイント
- 一問一答:「"1000" + 100 の結果は？」→ "1000100"（文字列連結になる）
- 30秒まとめ: データ型は値の種類。4つの型を押さえ、型が違えば結果が変わる
- 次回E-03: 値に名前を付けて持ち回る変数へ
- 関連資料: 「AI開発ワード100」「エラー解決プロンプト50」
