実践③ AIチャットアプリ

TypeScript / React / OpenAI API で、LLM 統合をフルスタックで構築します。

章

18章

本文

約43万字

コード例

465本

目安の学習時間

約57時間

こんな方に向いています

エンジニア志望の方（教材のみ・人のレビューはありません）

中身

1. 01
   はじめにこのプロジェクトでは、AI チャットアプリをフルスタック + LLM 連携で制作します。目安 約1.5 時間
2. 02
   ヒアリング実務では、開発に入る前にクライアントから要望をヒアリングします。目安 約1 時間
3. 03
   企画書を読み解く実務では、ヒアリング結果を整理し「何を作るか・作らないか」をクライアントと合意するために企画書を作成します。目安 約 1 時間
4. 04
   要件定義書を読み解く要件定義書は、企画書の「何を実現したいか」を エンジニアが扱える具体的な要件 に翻訳したドキュメントです。目安 約 1.5 時間
5. 05
   基本設計書を読み解く基本設計書は「外部仕様」を決めるドキュメントです。目安 約 1.5 時間
6. 06
   詳細設計書を読み解く詳細設計書は、基本設計の各要素を 実装可能な粒度 まで分解するドキュメントです。目安 約2.5 時間
7. 07
   実装の進め方ここまでの Chapter 3 〜 6 で、企画書・要件定義・基本設計・詳細設計と上流の成果物を読み解いてきました。目安 約1時間
8. 08
   環境構築とリポジトリの起動目安 約3 時間
9. 09
   API スケルトンとモック応答ユーザーが送ってきた message を受け取り、ブランドのトーンに合わせた 固定応答 を返す API を組み立てます。目安 約 5 時間
10. 10
    履歴管理とインメモリストア前章のチャット API はステートレスでしたが、本来 AI チャットは ==過去の文脈を踏まえた応答== が肝です。目安 約5 時間
11. 11
    Frontend チャット UI と API 連携Vite + React の Frontend に、画面下部の入力欄と、ユーザー / アシスタントの吹き出しを並べたチャット UI を実装します。目安 約 8 時間
12. 12
    OpenAI API への差し替えとプロンプト設計前章までのモック応答を、本物の OpenAI API 呼び出しに差し替えられるようにします。目安 約6 時間
13. 13
    エラーハンドリングと安全装置AI チャットは「OpenAI の調子」「ネットワークの揺らぎ」「ユーザーの想定外入力」の三方向からエラーを浴びる宿命があります。目安 約4 時間
14. 14
    モバイル UI とアクセシビリティ調整Figma のモバイルデザインに合わせて、ヘッダ / メッセージリスト / 入力欄が縦に並んだレイアウトを仕上げます。目安 約4 時間
15. 15
    仕上げ（CSS・エラー・セキュリティ・デプロイ）機能が動くだけでは「実装完了」とは言えません。目安 約 8 時間
16. 16
    実装FAQ実装中によく出る症状・対処法のリファレンス。
17. 17
    テストと動作確認UT[単体テスト] --> IT[統合テスト]。目安 約 4 時間
18. 18
    用語ミニ辞書この章は 辞書として使う章 です。目安 通読不要

手に入るもの

• ・教材の本文と、章ごとの進め方
• ・書き上げた成果物1本

サポートと条件

サポート

Tapのみ・30日

受講料充当

充当の対象外です

閲覧期間

教材の閲覧は無期限です

• ※ 人によるレビュー・提出物の添削・ライブ講義・1on1 はありません
• ※ 単品はゆめさくエンジニアの受講料への充当の対象外です。充当をご希望の場合はコースをお選びください