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

大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話 吉祥寺.pm36【オンライン】2024/9/17 まつひさ（hmatsu47）

自己紹介 松久裕保（@hmatsu47） ● https://qiita.com/hmatsu47 ● 現在（最近）： ○ 名古屋で Web インフラのお守り係をしています ○ SRE チームに所属しつつ技術検証の支援をしています ○ 大吉祥寺.pm では当日スタッフとして主に受付係をしていました 2

• https://qiita.com/hmatsu47

大吉祥寺.pm にて ● こんなことをやってました 色々反省点はありましたが それはそれとして、今日は ←これの話をします 3

投句箱の仕様・コンセプトなど ● 認証なし・シンプルな入力項目 ○ 一人一句まで ■ 投句したらブラウザのローカルストレージに記録 ■ 厳密な管理はしない（一人で複数端末を使い分けできるので） ● 管理者（私）向けの一覧画面を用意 ○ 投句者（詠み人）にプレゼントを渡したらチェック ○ 投句を締め切ったら AI（?）による審査 ■ こちらも厳密な認証などは設けない 4

画面イメージ 5

主な採用技術 ● フロントエンドアプリケーション ○ Next.js（14.2）App Router ○ shadcn/ui ○ Lambda Web Adapter ● サーバー環境 ○ AWS Lambda ○ Amazon RDS for PostgreSQL + pgvector 6

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

• https://nextjs.org/docs/app

shadcn/ui ● UI コンポーネント集（≠ UI ライブラリ） https://ui.shadcn.com/ ○ Radix UI + Tailwind CSS で書かれている（依存が少ない） ○ 必要なコンポーネントだけ取り出してカスタマイズして使う ○ 最近 Vercel の v0 が待機リストなしで公開ベータ化して話題に ■ shadcu/ui を使って UI デザインを作ってくれる生成 AI サービス https://v0.dev/chat ■ 投句箱開発時点では v0 の存在は知らず（去年の冬頃も話題になっていた） →ビルド後のコード量・依存パッケージを増やしたくなかったので採用 8

• https://ui.shadcn.com/
• https://v0.dev/chat

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

• https://github.com/awslabs/aws-lambda-web-adapter

Amazon RDS for PostgreSQL + pgvector ● 投句の保存先 DB ○ 「一句」とともにそれをベクトル化して保存 ○ AI 審査（？）のときにベクトル検索で「想定解」と比較 ○ アクセス頻度はごく少なめの想定 →なんでも良かったが使い慣れたものを選択 10

ところで ● 大吉祥寺.pm 開催前 ○ LT ネタの仕入れ（？）のため全国各地の資料館などを行脚 ■ 北九州・恵那・長野・川崎・京都・調布・多摩・刈谷 https://hmatsu47.hatenablog.com/dai_kichijojipm_2024_out_of_lt ■ 「本丸」NTT 技術史料館（武蔵野）には 2 回訪問 ■ なお LT は 5 分間（正味 4 分半？） ○ 当日スタッフとしてのミーティングにも参加 ■ オンライン 2 回＋現地（吉祥寺遠征）1 回 →コーディングしている暇などない !? 11

• https://hmatsu47.hatenablog.com/dai_kichijojipm_2024_out_of_lt

というわけで ● 頼みの綱は ChatGPT（GPT-4o）先生 ○ でも、最近出たばかりの App Router を知ってるのか？ →あまり期待しないで聞いてみた 12

すると、 ● 意外と知ってた → Server Action(s) は fetch で API に JSON を POST しようと したりいろいろ怪しかったが、 知識のカットオフ（2023/10） を考えるとやむなし？ 13

調子に乗って ● いろいろお願いしてみた ○ バリデーションを頼んだら普通に Zod を持ってきたり 14

しかし、ある時点で ● それまで完全に出力されていたコードが省略され始めた ○ トークン数の壁？ ■ 裏側で履歴のチャンク分割→要約を経てプロンプトに渡し始めた？ ■ それとも履歴を「間引き」してプロンプトに渡し始めた？ ○ 「急に物忘れが始まった ChatG(PT) さん」みたいになった ■ 初見だと困惑 !? 15

そこからは手作業による微調整で ● 一旦完成！…したはずだった ○ ところが、いざ本番環境向けに build してみるとボタンクリック →画面再描画などがうまく動かず ■ 開発環境（npm run dev）では動いていたのに… 16

想定以上に静的生成（SG）されていた ● App Router では build 時にできるだけ SG に寄せる仕様 ○ DB アクセス（参照系）も初期表示用のデータ取得とみなされる ○ 結果、思わぬところまで SG になっていた ■ fetch で API からデータを読み取ってキャッシュするのが面倒だったので、 サーバー処理で DB からデータを読み取る処理を記述 ■ ここでキャッシュ指定を何も書かなかったために SG とみなされた模様 17

修正して一応完成 ● 一部セキュリティ的にアレな部分は残るが ○ 使い道を考えればセーフ？ https://github.com/hmatsu47/talkbox 18

• https://github.com/hmatsu47/talkbox

やってみた感想 ● ChatGPT（GPT-4o）先生、意外といける ○ 思ったより新しい技術にも対応してくれた ● ただし「おまかせで完成」までは難しそう ○ コード量が多くなってくると壊れ始める？ ○ 微調整を始めると「正解が出るまでガチャ」になりがち ■ そしてガチャが始まると正解は（ほぼ）出ない ■ 生成 AI 自身に ReAct をさせてもおそらく似たような状況になりそう →完成させるには人の側にも対象技術に対する最低限の知識が必要 19

最後に一句 ● AI が 紡ぐ小箱で 句を募る ○ ChatGPT 師範にスライド PDF を読み込ませて詠んでもらったら 今ひとつだったので修正 ○ ちなみに、Anthropic Claude 3 Haiku に詠んでもらったところ 「技術と詩心が 手を携えて花開く 新しい扉」 という自由律すぎる句が出てきた 20