大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話

吉祥寺.pm36【オンライン】2024/9/17

Transcript

1. 大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話 吉祥寺.pm36【オンライン】2024/9/17 まつひさ（hmatsu47）
2. 自己紹介 松久裕保（@hmatsu47） • https://qiita.com/hmatsu47 • 現在（最近）： ◦ 名古屋で Web インフラのお守り係をしています ◦ SRE チームに所属しつつ技術検証の支援をしています ◦ 大吉祥寺.pm では当日スタッフとして主に受付係をしていました 2
3. 大吉祥寺.pm にて • こんなことをやってました 3 　色々反省点はありましたが 　それはそれとして、今日は ←これの話をします
4. 投句箱の仕様・コンセプトなど • 認証なし・シンプルな入力項目 ◦ 一人一句まで ▪ 投句したらブラウザのローカルストレージに記録 ▪ 厳密な管理はしない（一人で複数端末を使い分けできるので） • 管理者（私）向けの一覧画面を用意 ◦ 投句者（詠み人）にプレゼントを渡したらチェック ◦ 投句を締め切ったら AI（?）による審査 ▪ こちらも厳密な認証などは設けない 4
5. 画面イメージ 5
6. 主な採用技術 • フロントエンドアプリケーション ◦ Next.js（14.2）App Router ◦ shadcn/ui ◦ Lambda Web Adapter • サーバー環境 ◦ AWS Lambda ◦ Amazon RDS for PostgreSQL + pgvector 6
7. Next.js（14.2）App Router • React Server Components を取り入れたフレームワーク https://nextjs.org/docs/app ◦ フロントエンドのサーバーから直接 DB アクセス ◦ PHP の再来（？） ▪ 言われてみれば確かにコンセプトが似てる…？ ◦ Next.js 14 で Server Actions も Stable に ▪ （フロントエンド）サーバーサイドで実行する非同期関数でデータ更新処理 ▪ Form を Submit →（フロントエンド）サーバーからデータ保存実行、など →今回はバックエンドサーバーを用意したくなかったので採用 7
8. shadcn/ui • UI コンポーネント集（≠ UI ライブラリ） https://ui.shadcn.com/ ◦ Radix UI + Tailwind CSS で書かれている（依存が少ない） ◦ 必要なコンポーネントだけ取り出してカスタマイズして使う ◦ 最近 Vercel の v0 が待機リストなしで公開ベータ化して話題に ▪ shadcu/ui を使って UI デザインを作ってくれる生成 AI サービス https://v0.dev/chat ▪ 投句箱開発時点では v0 の存在は知らず（去年の冬頃も話題になっていた） →ビルド後のコード量・依存パッケージを増やしたくなかったので採用 8
9. Lambda Web Adapter • Web フレームワークを AWS Lambda で使うアダプタ https://github.com/awslabs/aws-lambda-web-adapter ◦ Rust 製 ◦ コンテナに組み込んで使う ◦ Next.js 以外に Spring Boot や FastAPI などにも対応 →デプロイ先を Lambda@Edge や Cloudflare Workers などと迷ったが、 　DB に近い場所にデプロイするために Lambda を選択 9
10. Amazon RDS for PostgreSQL + pgvector • 投句の保存先 DB ◦ 「一句」とともにそれをベクトル化して保存 ◦ AI 審査（？）のときにベクトル検索で「想定解」と比較 ◦ アクセス頻度はごく少なめの想定 →なんでも良かったが使い慣れたものを選択 10
11. ところで • 大吉祥寺.pm 開催前 ◦ LT ネタの仕入れ（？）のため全国各地の資料館などを行脚 ▪ 北九州・恵那・長野・川崎・京都・調布・多摩・刈谷 https://hmatsu47.hatenablog.com/dai_kichijojipm_2024_out_of_lt ▪ 「本丸」NTT 技術史料館（武蔵野）には 2 回訪問 ▪ なお LT は 5 分間（正味 4 分半？） ◦ 当日スタッフとしてのミーティングにも参加 ▪ オンライン 2 回＋現地（吉祥寺遠征）1 回 →コーディングしている暇などない !? 11
12. というわけで • 頼みの綱は ChatGPT（GPT-4o）先生 ◦ でも、最近出たばかりの App Router を知ってるのか？ →あまり期待しないで聞いてみた 12
13. すると、 • 意外と知ってた → Server Action(s) は fetch で 　API に JSON を POST しようと 　したりいろいろ怪しかったが、 　知識のカットオフ（2023/10） 　を考えるとやむなし？ 13
14. 調子に乗って • いろいろお願いしてみた ◦ バリデーションを頼んだら普通に Zod を持ってきたり 14
15. しかし、ある時点で • それまで完全に出力されていたコードが省略され始めた ◦ トークン数の壁？ ▪ 裏側で履歴のチャンク分割→要約を経てプロンプトに渡し始めた？ ▪ それとも履歴を「間引き」してプロンプトに渡し始めた？ ◦ 「急に物忘れが始まった ChatG(PT) さん」みたいになった ▪ 初見だと困惑 !? 15
16. そこからは手作業による微調整で • 一旦完成！…したはずだった ◦ ところが、いざ本番環境向けに build してみるとボタンクリック →画面再描画などがうまく動かず ▪ 開発環境（npm run dev）では動いていたのに… 16
17. 想定以上に静的生成（SG）されていた • App Router では build 時にできるだけ SG に寄せる仕様 ◦ DB アクセス（参照系）も初期表示用のデータ取得とみなされる ◦ 結果、思わぬところまで SG になっていた ▪ fetch で API からデータを読み取ってキャッシュするのが面倒だったので、 サーバー処理で DB からデータを読み取る処理を記述 ▪ ここでキャッシュ指定を何も書かなかったために SG とみなされた模様 17
18. 修正して一応完成 • 一部セキュリティ的にアレな部分は残るが ◦ 使い道を考えればセーフ？ https://github.com/hmatsu47/talkbox 18
19. やってみた感想 • ChatGPT（GPT-4o）先生、意外といける ◦ 思ったより新しい技術にも対応してくれた • ただし「おまかせで完成」までは難しそう ◦ コード量が多くなってくると壊れ始める？ ◦ 微調整を始めると「正解が出るまでガチャ」になりがち ▪ そしてガチャが始まると正解は（ほぼ）出ない ▪ 生成 AI 自身に ReAct をさせてもおそらく似たような状況になりそう →完成させるには人の側にも対象技術に対する最低限の知識が必要 19
20. 最後に一句 • AI が　紡ぐ小箱で　句を募る ◦ ChatGPT 師範にスライド PDF を読み込ませて詠んでもらったら 今ひとつだったので修正 ◦ ちなみに、Anthropic Claude 3 Haiku に詠んでもらったところ 「技術と詩心が　手を携えて花開く　新しい扉」 という自由律すぎる句が出てきた 20