カテゴリ一覧 著者一覧
ChatGPTクローン開発で学ぶモダンAIアプリケーション構築 Next.js篇 
0件
1,980円(税込)
獲得ポイント: 20pt
通常:
20pt

ChatGPTクローン開発で学ぶモダンAIアプリケーション構築 Next.js篇 

発売日: 2026/5/29
EPUB EPUBリフロー
想定ページ数: 228ページ
ISBN: 9784295604013
全文検索: 非対応
本書は、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にデプロイする
あとがき

目次

電子書籍閲覧に関するご注意
目次
前書き
はじめに
本チュートリアルの動画解説について
メールマガジンについて
免責事項
第1章 はじめに
1.1 本書の目的
1.2 本書の対象者
1.3 本書の全体像
1.4 書式例
1.5 ターミナルコマンド
1.6 ソースコード
1.7 ライブラリのインストールによるコード差分について
1.8 長いソースコードの改行
1.9 サンプルコード
1.10 本書の内容と正誤表
1.11 本書の構成と狙い
第2章 開発環境構築
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章 Next.jsプロジェクトの作成
3.1 本章のコード
3.2 Next.jsのプロジェクトを作成する
3.3 タイトルメタデータを変更
3.4 今後プロジェクトで使用する場合
第4章 アイコン画像を追加する
4.1 本章のコード
4.2 画像の追加
第5章 チャットのUIを実装
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 フォーマッターを入れよう
第6章 チャット機能の実装
6.1 本章のコード
6.2 ライブラリのインストール
6.3 大規模言語モデル用のライブラリをインストール
6.4 Googleのアカウントを作成
6.5 GeminiのAPIキーを取得
6.6 ドットenvファイルの作成
6.7 ドットファイルのサンプル作成
6.8 .env.exampleをGitで管理する
6.9 Route Handlerの作成
6.10 チャットのUIを作成
6.11 Chatを送信する
6.12 チャットをしてみよう
第7章 チャットUIの改善
7.1 本章のコード
7.2 Shift+Enterでメッセージを送信
7.3 Markdownテキストを表示する
7.4 コードブロックを表示する
7.5 CodeBlockコンポーネントをMarkdownコンポーネントに組み込む
7.6 自動で下にスクロールさせる
7.7 あいさつメッセージを表示
第8章 データベースの設定
8.1 本章のコード
8.2 Docker Composeを使ってデータベースを立ち上げる
8.3 Prismaのセットアップ
8.4 環境変数の設定
8.5 ドットファイルのサンプル更新
8.6 Schemaの定義
8.7 マイグレーションの実行
8.8 成果物の確認
8.9 マイグレーションスクリプトを追加
8.10 migrationの実行結果確認
8.11 Prisma Studioの起動
8.12 Prisma Clientの実装
第9章 サインアップ機能実装
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章 サインイン機能実装
10.1 本章のコード
10.2 サインインのUIを作成
10.3 サインインフォームを作成
10.4 サインイン処理を実装
10.5 サインイン処理をコンポーネントに渡す
10.6 サインインフォームを表示
10.7 サインイン処理の結果を表示
第11章 ヘッダーの実装
11.1 本章のコード
11.2 ヘッダーUIの実装
11.3 メニューアイコンの実装
11.4 ヘッダーコンポーネントを組み込む
11.5 ログアウトリンクを動作させる
11.6 未認証時のリダイレクト先をサインインページに変更する
11.7 ドロップダウンを動作させる
11.8 アバターメニュー以外をクリックしたらメニューを閉じるようにする
11.9 Avatar画像をユーザーごとに変更する
第12章 チャットを保存できるようにする
12.1 本章のコード
12.2 ai SDKの動作を確認する
12.3 idをuuidに変更する
12.4 チャットを保存するテーブルを作成する
12.5 チャットで認証をする
12.6 チャットを保存する
12.7 AIからのメッセージを保存する
12.8 session.user.idを設定する
12.9 複数回のメッセージ送信を可能にする
12.10 チャットの保存を確認する
第13章 ブラウザを再読み込みしてもメッセージが消えないようにする
13.1 本章のコード
13.2 Chatの履歴ページを作成する
13.3 メッセージを取得する
13.4 メッセージの型を定義する
13.5 メッセージを送信したらURLを変更する
第14章 過去のチャット履歴を表示する
14.1 本章のコード
14.2 サイドバーのUIを作成する
14.3 データベースからチャットの履歴を取得する
14.4 APIを作成する
14.5 サイドバーにチャットの履歴を表示する
第15章 チャットのタイトルを作成する
15.1 本章のコード
15.2 チャットテーブルにtitleカラムを追加する
15.3 チャットのタイトルを保存できるようにする
15.4 タイトルを作成する
15.5 画面を更新しなくてもサイドバーの履歴を更新する
第16章 サイドバーを開閉できるようにする
16.1 本章のコード
16.2 Reactコンテキストの作成
16.3 Providerの作成
16.4 Hookの作成
16.5 Providerでラップする
16.6 サイドバーの開閉ボタンの追加
16.7 クッキーの状態を確認する
第17章 新しいチャットを開始する
17.1 本章のコード
17.2 ヘッダーに新しいチャットを作成するボタンを実装する
17.3 サイドバーに新しいチャットを作成するボタンを実装する
第18章 大規模言語モデルを切り替えられるようにする
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章 チャットの削除機能
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 チャットを削除したら画面を更新する
第20章 カラーモードを切り替えられるようにする
20.1 本章のコード
20.2 tailwindの設定ファイル
20.3 global.cssを修正する
20.4 next-themesをインストールする
20.5 next-themesを設定する
20.6 テーマ切り替えボタンを作成する
20.7 ThemeSwitchをヘッダーに追加する
第21章 Googleログイン機能
21.1 本章のコード
21.2 Googleログインのための設定
21.3 環境変数の設定
21.4 Auth.jsの設定
21.5 server actionの追加
21.6 Googleログインボタンの作成
21.7 Googleログインボタンを組み込む
第22章 Vercelにデプロイする
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の設定
あとがき
著者紹介
def合同会社 吉田智哉 / @tomoya_y0shida
得意分野:
自己紹介:
今まで経験したプロジェクト
転職支援:
趣味:
著書
メッセージ:
ブログ
Udemy
メールマガジンについて

ユーザーレビュー

まだレビューが投稿されていません