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
28
大吉祥寺.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
さいきんの MySQL との付き合い方 〜 MySQL 8.0 より後の世界へようこそ 〜
hmatsu47
PRO
0
12
ベクトルストア入門
hmatsu47
PRO
0
11
Aurora DSQL について
hmatsu47
PRO
0
9
DynamoDB Global Tables MRSC・pgvector 0.8.0・caching_sha2_password 関連アップデート
hmatsu47
PRO
0
10
10 年(+1 年)の振り返りと 2025 年の活動予定
hmatsu47
PRO
0
24
RDS/Aurora アップデート(2024 年版)
hmatsu47
PRO
0
31
Aurora DSQL と楽観的同時実行制御(OCC)
hmatsu47
PRO
0
43
Claude 3.5 で Haiku
hmatsu47
PRO
0
26
HeatWave on AWS の PrivateLink インバウンドレプリケーションで Aurora フェイルオーバーに追従する
hmatsu47
PRO
0
23
Other Decks in Technology
See All in Technology
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.4k
データモデルYANGの処理系を再発明した話
tjmtrhs
0
210
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
250
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.5k
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.9k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
330
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
8
890
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
120
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Six Lessons from altMBA
skipperchong
27
3.6k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Facilitating Awesome Meetings
lara
53
6.3k
KATA
mclloyd
29
14k
How STYLIGHT went responsive
nonsquared
99
5.4k
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