Day 7・小さなAIプロダクトを完成させる(実践)
動かして直す＋型で守る
AI生成コードのエラーを、型チェックと実際の動作の両方で潰していく。
エラーは2種類ある
作ったものが一発で動くことはまれです。でも大丈夫。エラーには大きく2種類あって、それぞれ潰し方が決まっています。1つは「型エラー」で、コードを書いている段階でエディタが赤線を出すもの。もう1つは「実行時エラー」で、実際に動かしたときに起きるものです。
- 型エラー: 実行する前に、エディタや型チェックが教えてくれる(例: 存在しないプロパティ、型の食い違い)
- 実行時エラー: 実際に動かすと起きる(例: AIの返事が空、通信の失敗、想定外のデータ)
なぜ型が「早く気づく」武器になるのか
AIが生成したコードは、それらしく見えても細部がズレていることがあります。型があると、動かす前の段階でズレを赤線で示してくれます。実行してから初めて気づくより、はるかに早く・安く直せます。
型エラーを潰す
AIが書いたコードを貼り付けたら、まずエディタの赤線と、ターミナルでの型チェックを見ます。よくあるのはプロパティ名のズレです。サーバーは reply を返すのに、UIが message を読もうとしている、といった食い違いを型が捕まえます。
型が食い違っている
サーバーはreplyを返すのにmessageを読んでいる
const data: { reply: string } = await res.json();
setReply(data.message); // エラー: messageは存在しない型に合わせて直す
返ってくる形(reply)に合わせる
const data: { reply: string } = await res.json();
setReply(data.reply); // OKAIにはこう聞く
型エラーが出たら、そのエラーメッセージをまるごとコピーして「このTypeScriptの型エラーの意味と直し方を、初心者向けに説明して」と貼ると、原因と修正案が返ってきます。エラー文は隠さず全部渡すのがコツです。
実行時エラーを潰す
型チェックが通っても、実際に動かすと別の問題が出ることがあります。AIの返事が空だったり、通信が失敗したり。ここは「実際に動かして、想定外に備える」しかありません。返事が来ないときに備えて、値がないケースを型と条件分岐で守ります。
// replyが来ないかもしれないと型で表す
const data: { reply?: string } = await res.json();
// 値がある時だけ表示、なければ案内を出す
if (data.reply) {
setReply(data.reply);
} else {
setReply("うまく取得できませんでした。もう一度お試しください。");
}動かす前に必ず型チェック
コードを本番に上げる前に型チェック(tscやビルド)を通す習慣をつけましょう。型エラーを残したまま公開すると、ユーザーの前で壊れます。型は「公開前の最後の門番」です。
- AIのコードを貼ったら、まずエディタの赤線を全部消す
- ターミナルで型チェック(ビルド)を通す
- 実際に動かして、正常なケースを確認する
- 空・失敗など想定外のケースを試し、条件分岐で守る
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
「型エラー」と「実行時エラー」の違いとして正しいものは?
AIが生成したコードのエラーを、型と実行の両面でどう潰すか説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。