ChatGPTクローン開発で学ぶモダンAIアプリケーション構築 Next.js篇
発売日: 2026/5/29
想定ページ数: 228ページ
ISBN: 9784295604013
全文検索: 非対応
★★★★★
★★★★★
0件
-
-
-
-
本書は、Next.jsフレームワークを用いてChatGPTクローンを作成する実践的なチュートリアルです。生成AIアプリケーション開発の基礎から、高度な機能実装までを網羅。初心者から中級者まで、段階的に学習を進められます。具体的には、開発環境構築、UI実装、チャット機能実装、データベース連携、認証機能実装、デプロイまでを丁寧に解説。豊富なサンプルコードと図解で、スムーズな学習をサポートします。生成AI開発に興味のある方、Next.jsを習得したい方にとって必携の一冊です。
【目次】
前書き
第1章 はじめに
第2章 開発環境構築
第3章 Next.jsプロジェクトの作成
第4章 アイコン画像を追加する
第5章 チャットのUIを実装
第6章 チャット機能の実装
第7章 チャットUIの改善
第8章 データベースの設定
第9章 サインアップ機能実装
第10章 サインイン機能実装
第11章 ヘッダーの実装
第12章 チャットを保存できるようにする
第13章 ブラウザを再読み込みしてもメッセージが消えないようにする
第14章 過去のチャット履歴を表示する
第15章 チャットのタイトルを作成する
第16章 サイドバーを開閉できるようにする
第17章 新しいチャットを開始する
第18章 大規模言語モデルを切り替えられるようにする
第19章 チャットの削除機能
第20章 カラーモードを切り替えられるようにする
第21章 Googleログイン機能
第22章 Vercelにデプロイする
あとがき
-
はじめに
-
本チュートリアルの動画解説について
-
メールマガジンについて
-
免責事項
-
2.1 Homebrewのインストール
-
2.2 nodenvのインストール
-
2.3 nodenvの初期化
-
2.4 nodenvの確認
-
2.5 Node.jsのインストール
-
2.6 Node.jsのバージョンを設定
-
2.7 pnpmのインストール
-
2.8 Dockerのインストール
-
2.9 Docker Desktopの起動
-
2.10 Dockerの確認
-
2.11 エディタについて
-
3.1 本章のコード
-
3.2 Next.jsのプロジェクトを作成する
-
3.3 タイトルメタデータを変更
-
3.4 今後プロジェクトで使用する場合
-
5.1 本章のコード
-
5.2 コンポーネントの設計
-
5.3 レイアウトの実装
-
5.4 page.tsxの作成
-
5.5 メッセージのコンポーネントを作成
-
5.6 メッセージ一覧を表示するコンポーネントを作成
-
5.7 Chatコンポーネントを作成
-
5.8 ChatInputコンポーネントを作成
-
5.9 ChatInputコンポーネントをChatコンポーネントに組み込む
-
5.10 Chatコンポーネントをpage.tsxに組み込む
-
5.11 フォーマッターを入れよう
-
9.1 本章のコード
-
9.2 サインアップのUIを作成
-
9.3 共通のUIコンポーネントを作成
-
9.4 コンポーネントを組み合わせる
-
9.5 サインアップのライブラリ追加
-
9.6 トークンを作成するためのSECRETを設定
-
9.7 PrismaのAdapterを追加
-
9.8 NextAuthの設定
-
9.9 Route Handlerを作成
-
9.10 データベースの実装
-
9.11 bcryptを追加
-
9.12 schema validatorを追加
-
9.13 Server Actionを作成
-
9.14 authorize関数を実装
-
9.15 サインアップの処理を実行
-
9.16 ユーザー情報の登録を確認
-
9.17 チャットページを認証する
-
9.18 SessionProviderでラップする
-
9.19 エラー時にメールアドレスが消えないようにする
-
9.20 トーストでエラー表示する
-
10.1 本章のコード
-
10.2 サインインのUIを作成
-
10.3 サインインフォームを作成
-
10.4 サインイン処理を実装
-
10.5 サインイン処理をコンポーネントに渡す
-
10.6 サインインフォームを表示
-
10.7 サインイン処理の結果を表示
-
11.1 本章のコード
-
11.2 ヘッダーUIの実装
-
11.3 メニューアイコンの実装
-
11.4 ヘッダーコンポーネントを組み込む
-
11.5 ログアウトリンクを動作させる
-
11.6 未認証時のリダイレクト先をサインインページに変更する
-
11.7 ドロップダウンを動作させる
-
11.8 アバターメニュー以外をクリックしたらメニューを閉じるようにする
-
11.9 Avatar画像をユーザーごとに変更する
-
13.1 本章のコード
-
13.2 Chatの履歴ページを作成する
-
13.3 メッセージを取得する
-
13.4 メッセージの型を定義する
-
13.5 メッセージを送信したらURLを変更する
-
15.1 本章のコード
-
15.2 チャットテーブルにtitleカラムを追加する
-
15.3 チャットのタイトルを保存できるようにする
-
15.4 タイトルを作成する
-
15.5 画面を更新しなくてもサイドバーの履歴を更新する
-
16.1 本章のコード
-
16.2 Reactコンテキストの作成
-
16.3 Providerの作成
-
16.4 Hookの作成
-
16.5 Providerでラップする
-
16.6 サイドバーの開閉ボタンの追加
-
16.7 クッキーの状態を確認する
-
18.1 本章のコード
-
18.2 モデル切り替えの設計
-
18.3 OpenAIのAPIキーを取得する
-
18.4 OpenAIのAPIキーを環境変数に設定する
-
18.5 ライブラリをインストールする
-
18.6 モデルの一覧を作成する
-
18.7 モデルをリクエストに含める
-
18.8 APIでモデルを切り替えられるようにする
-
18.9 チャットのモデルの選択肢を作成する
-
18.10 モデルの選択肢を表示する
-
18.11 モデルを選択したときにクッキーに保存する
-
18.12 モデル選択以外をクリックしたらドロップダウンを閉じる
-
19.1 本章のコード
-
19.2 チャットの削除機能の設計
-
19.3 チャットの削除のUIを作成する
-
19.4 ドロップダウンを作成する
-
19.5 クリックしたときだけドロップダウンを表示する
-
19.6 メニューボタン以外をクリックしたときにドロップダウンを閉じる
-
19.7 チャット削除のモーダルを表示する
-
19.8 削除のAPIを実行する関数を実装する
-
19.9 SidebarHistoryにDeleteModalを追加する
-
19.10 チャットを削除する関数を実装する
-
19.11 削除APIを実装する
-
19.12 チャットを削除したら画面を更新する
-
21.1 本章のコード
-
21.2 Googleログインのための設定
-
21.3 環境変数の設定
-
21.4 Auth.jsの設定
-
21.5 server actionの追加
-
21.6 Googleログインボタンの作成
-
21.7 Googleログインボタンを組み込む
-
22.1 本章のコード
-
22.2 VercelでPrismaとNeonを使用するための設定
-
22.3 prismaの成果物を生成するコマンドをscriptに追加する
-
22.4 buildの実行
-
22.5 GitHubのアカウントを作成する
-
22.6 GitHubのリポジトリを作成する
-
22.7 リポジトリにコードをプッシュする
-
22.8 Vercelのアカウントを作成する
-
22.9 Projectをimportする
-
22.10 VercelでPostgresを作成する
-
22.11 再度デプロイする
-
22.12 Google OAuthの設定
試し読み
試し読み
試し読み
