Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Rout...
Search
hmatsu47
PRO
September 17, 2024
Technology
0
54
大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、 Lambda Web Adapter を使って公開した話
吉祥寺.pm36【オンライン】2024/9/17
hmatsu47
PRO
September 17, 2024
Tweet
Share
More Decks by hmatsu47
See All by hmatsu47
Aurora DSQL のトランザクション(スナップショット分離と OCC)
hmatsu47
PRO
0
4
いろんなところに居る Amazon Q(Developer)を使い分けてみた
hmatsu47
PRO
0
24
ゲームで体感!Aurora DSQL の OCC(楽観的同時実行制御)
hmatsu47
PRO
0
13
PostgreSQL+pgvector で GraphRAG に挑戦 & pgvectorscale 0.7.x アップデート
hmatsu47
PRO
0
32
LlamaIndex の Property Graph Index を PostgreSQL 上に構築してデータ構造を見てみる
hmatsu47
PRO
0
17
PostgreSQL+pgvector で LlamaIndex の Property Graph Index を試す(序章)
hmatsu47
PRO
0
17
HeatWave on AWS という選択肢を検討してみる
hmatsu47
PRO
0
14
HeatWave on AWS のインバウンドレプリケーションで HeatWave エンジン有効時のレプリケーションラグを確認してみた!
hmatsu47
PRO
0
22
CloudWatch Database Insights 関連アップデート
hmatsu47
PRO
0
57
Other Decks in Technology
See All in Technology
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
roppongirb_20250911
igaiga
1
240
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
830
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1k
KotlinConf 2025_イベントレポート
sony
1
140
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
270
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
How to Ace a Technical Interview
jacobian
279
23k
The Pragmatic Product Professional
lauravandoore
36
6.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
BBQ
matthewcrist
89
9.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
A better future with KSS
kneath
239
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Site-Speed That Sticks
csswizardry
10
820
What's in a price? How to price your products and services
michaelherold
246
12k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
大吉祥寺.pm の LT で ChatGPT の力を借りて Next.js App Router ベースの投句箱を作って、
Lambda Web Adapter を使って公開した話 吉祥寺.pm36【オンライン】2024/9/17 まつひさ(hmatsu47)
自己紹介 松久裕保(@hmatsu47) • https://qiita.com/hmatsu47 • 現在(最近): ◦ 名古屋で Web インフラのお守り係をしています
◦ SRE チームに所属しつつ技術検証の支援をしています ◦ 大吉祥寺.pm では当日スタッフとして主に受付係をしていました 2
大吉祥寺.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
shadcn/ui • UI コンポーネント集(≠ UI ライブラリ) https://ui.shadcn.com/ ◦ Radix UI
+ Tailwind CSS で書かれている(依存が少ない) ◦ 必要なコンポーネントだけ取り出してカスタマイズして使う ◦ 最近 Vercel の v0 が待機リストなしで公開ベータ化して話題に ▪ shadcu/ui を使って UI デザインを作ってくれる生成 AI サービス https://v0.dev/chat ▪ 投句箱開発時点では v0 の存在は知らず(去年の冬頃も話題になっていた) →ビルド後のコード量・依存パッケージを増やしたくなかったので採用 8
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
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
というわけで • 頼みの綱は 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
やってみた感想 • ChatGPT(GPT-4o)先生、意外といける ◦ 思ったより新しい技術にも対応してくれた • ただし「おまかせで完成」までは難しそう ◦ コード量が多くなってくると壊れ始める? ◦
微調整を始めると「正解が出るまでガチャ」になりがち ▪ そしてガチャが始まると正解は(ほぼ)出ない ▪ 生成 AI 自身に ReAct をさせてもおそらく似たような状況になりそう →完成させるには人の側にも対象技術に対する最低限の知識が必要 19
最後に一句 • AI が 紡ぐ小箱で 句を募る ◦ ChatGPT 師範にスライド PDF を読み込ませて詠んでもらったら 今ひとつだったので修正
◦ ちなみに、Anthropic Claude 3 Haiku に詠んでもらったところ 「技術と詩心が 手を携えて花開く 新しい扉」 という自由律すぎる句が出てきた 20