TS初めてのTypeScript

初めての◯◯シリーズ

初めてのTypeScript — AIプロダクトを作る

7日で、TypeScriptの基礎から「AIをフロントから呼ぶ小さなAIプロダクト」の完成まで。型があると、AIが生成したコードの間違いに早く気づけます。 実装はAIに任せ、型で守り、説明できる状態を目指します。登録不要・進捗はこのブラウザに保存されます。

学習の進捗0/32 レッスン
  1. 0

    Day 0・なぜTypeScript／JSからの一歩

    TypeScriptがAIプロダクト作りで選ばれる理由と、JavaScriptに型を足したものであることを理解し、型があると何が嬉しいかを説明できる。

    0/4 完了

  2. 1

    Day 1・変数・基本型・関数

    型注釈と型推論を理解し、基本型と関数の型が読める・書ける。anyを避ける意識を持つ。

    0/4 完了

  3. 2

    Day 2・オブジェクト・配列・型に名前をつける

    オブジェクトと配列の型を書け、interface/typeでデータの形に名前をつけられる(APIのJSONに対応)。

    0/4 完了

  4. 3

    Day 3・ユニオン・絞り込み・ジェネリクス(読める範囲で)

    ユニオン型・リテラル型・型の絞り込みを理解し、Array<T>やPromise<T>などジェネリクスを読める。

    0/4 完了

  5. 4

    Day 4・非同期とfetchでAPIを叩く

    Promiseとasync/awaitを理解し、fetchでAPIを呼んで結果を型で扱える。失敗に備えられる。

    0/4 完了

  6. 5

    Day 5・React/Next.jsの超入門

    コンポーネント・propsの型・useStateの型を理解し、画面に表示してイベントを扱える。Next.jsのApp Routerの超基本がわかる。

    0/4 完了

  7. 6

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

    AIプロダクトの構成(UI→APIルート→LLM)を理解し、APIルートからLLMを呼ぶ最小実装ができる。ストリーミングの考え方と、型・検算で安全にする方法を持つ。

    0/4 完了

  8. 7

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

    入力→AI→表示の一直線で、AIチャットまたは要約UIを1つ完成させ、Vercelで公開する道筋と、動かして直す/型で守る感覚を得る。

    0/4 完了