TS初めてのTypeScript

Day 6・AIをフロントから呼ぶ(この教材の看板)

APIルート(route.ts)でLLMを叩く最小実装

route.tsでリクエストを受け、LLMに問い合わせて結果を返す最小構成を型付きで書く。

route.ts は「サーバー側の入口」

Next.jsでは、決まった場所に置いた route.ts というファイルがサーバー側の入口になります。画面からのお願い( で送られてくる)をここで受け取り、返事を返します。中身はいたってシンプルで、「受け取る → LLMに聞く → 返す」の3ステップです。

TYPESCRIPT
// この関数名 POST は「POSTリクエストを受け取る係」という意味の決まり
// Request と Response はブラウザ標準の型。追加で覚えることは少ない
export async function POST(req: Request): Promise<Response> {
  // 1) 画面から送られてきたデータを取り出す
  const body = await req.json();
  const prompt: string = body.prompt;

  // 2) LLMに聞く(この行は次のコードで実装する)
  const answer = await askLLM(prompt);

  // 3) 結果をJSONで返す
  return Response.json({ answer });
}
app/api/chat/route.ts — 最小の入口

ここで注目してほしいのは と await です。LLMへの問い合わせは時間がかかる処理なので、「答えが返るまで待つ」という印として await を付けます。async は「この関数は待つ処理を含みます」という宣言です。詳しくはDay5の の話とつながっています。

LLMに問い合わせる部分

実際にLLMを呼ぶ部分です。多くのLLMは「HTTPでJSONを送ると、JSONで答えが返る」というAPIになっています。ここでキー(process.env)を使い、fetch でLLMのサーバーに問い合わせます。

TYPESCRIPT
// 返ってくる形をあらかじめ型で決めておく
interface LLMResponse {
  text: string;
}

async function askLLM(prompt: string): Promise<string> {
  const res = await fetch("https://api.example-llm.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // キーはサーバーの環境変数から。ブラウザには出ない
      Authorization: "Bearer " + process.env.LLM_API_KEY
    },
    body: JSON.stringify({ prompt })
  });

  // 返事の形を LLMResponse だと明示する
  const data = (await res.json()) as LLMResponse;
  return data.text;
}
LLMを呼ぶ関数(概念を示す最小例)

なぜ返事に型(LLMResponse)を付けるのか

LLMからの返事を data.text のように使うとき、型がないと data.txet のようなタイプミスに気づけません。型を付けておけば、間違ったプロパティ名を書いた瞬間にエディタが赤線で教えてくれます。AIが生成したコードのミスも同じ仕組みで早く見つかります。

型なし: どんなプロパティでも書けてしまう

TYPESCRIPT
const data: any = await res.json();
return data.txet; // タイプミスでも誰も止めてくれない
// 実行して初めて undefined になり、原因探しに時間を溶かす

型あり: 間違いをその場で検知

TYPESCRIPT
interface LLMResponse { text: string; }
const data = (await res.json()) as LLMResponse;
return data.txet; // ここで即エラー。text の打ち間違いだと分かる

AIにはこう聞く

「Next.jsのapp/api/chat/route.tsで、POSTでpromptを受け取り、LLMのAPIをfetchで呼んで結果をJSONで返す最小のroute.tsを書いて。返り値には型を付けて、APIキーはprocess.envから読むこと」と頼めば、この形の下地が出てきます。返ってきたコードはキーの置き場所と型の有無を必ず自分で確認します。

エラー処理を忘れずに

LLMのAPIは失敗することがあります(ネットワーク不調、キー切れ、混雑など)。res.ok が false のときの分岐や try/catch を入れないと、画面が無言で固まります。最小実装でまず動かし、次にエラー処理を足す順番がおすすめです。

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

理解度チェック

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

Q1

Next.jsの route.ts に書いた POST 関数の役割として正しいのは?

Q2

LLMからの返事に interface LLMResponse のような型を付ける利点として最も適切なのは?

Q3

APIルート(route.ts)からLLMを呼ぶ最小実装の流れを、awaitを使う理由も含めて説明してください。

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