Day 7・小さなAIプロダクトを完成させる(実践)

公開(Vercel)と卒業

Vercelで公開する道筋を押さえ、作ったものと設計を自分の言葉で説明できるようにする。

Vercelで公開する道筋

ローカル(自分のパソコン)で動いたら、いよいよ世界に公開します。Next.jsのアプリはVercelというサービスで簡単に公開できます。難しい設定はほとんどなく、コードを置いてボタンを押せば、あなただけのURLがもらえます。

コードをGitHubのリポジトリに置く
VercelにGitHubアカウントでログインし、そのリポジトリを選ぶ
APIキーなどの秘密は、Vercelの環境変数として設定する(コードには書かない)
デプロイ(公開)ボタンを押すと、ビルドが走ってURLが発行される
発行されたURLを開いて、実際に動くか確認する

公開前チェック

公開前に、型チェック(ビルド)が通ること、APIキーがコードに直書きされていないこと、環境変数がVercel側に設定されていることを必ず確認します。ビルドが通らないと公開自体が失敗します。

AIにはこう聞く

「Next.jsアプリをVercelに公開する手順を、GitHub連携と環境変数の設定を含めて順番に教えて。ビルドが失敗したときの確認ポイントも」と聞くと、詰まりやすい所まで案内してくれます。

自分の言葉で説明できるか

卒業の条件は、コードを丸暗記することではありません。「何を作ったか」「なぜこの設計にしたか」を自分の言葉で説明できることです。実装の細部はAIに任せていい。でも設計の意図を語れるかどうかが、あなたの価値になります。

説明できない状態

「AIが書いてくれたので、なぜこうなっているかは分かりません」

説明できる状態

「入力→AI→表示の一直線です。APIキーを守るためAI呼び出しはサーバー側に置き、UIとサーバーの間は型で約束しています。だからAI生成コードのズレにも早く気づけます」

なぜ「説明できる」が大事なのか

AIは実装を高速に生成します。だからこそ、設計を決め、意図を説明し、間違いを見抜く人の価値が上がります。型はその「見抜く」を助ける道具です。書くより、選び、守り、語れることが力になります。

Python編との往復で力がつく

この教材で身につけた「入力→処理→出力を一直線で考える」「型で境界を守る」「AIに実装を任せ、自分は設計と検証をする」という感覚は、TypeScriptだけのものではありません。Python編でAIのモデル側やデータ処理を学ぶと、フロント(TypeScript)とバック(Python)の両方が見えて、作れるものが一気に広がります。

TypeScriptで画面と入り口を作り、Pythonで中身の処理を作る。この往復を繰り返すたびに、AIプロダクトの全体像がはっきりしていきます。今日完成させた小さな一直線が、その出発点です。

作ったもの: 入力→AI→表示で動く小さなAIプロダクトを1つ完成させた
身につけた設計: UIとサーバーの役割分担、型による境界の約束
身につけた姿勢: 実装はAIに任せ、型で守り、意図を自分の言葉で説明する
次の一歩: Python編と往復し、フロントとバックの両面から作れるようになる

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

Vercelで公開する前に必ず確認すべきことはどれ?

あなたが作ったAIプロダクトについて、何を作ったか・なぜこの設計かを自分の言葉で説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。