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
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
Search
potato4d(Takuma HANATANI)
June 28, 2024
Programming
3
340
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
2024.06.28 に開催された #kyotojs での登壇資料です。
https://kyotojs.connpass.com/event/321343/
potato4d(Takuma HANATANI)
June 28, 2024
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.1k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.8k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.9k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.5k
Other Decks in Programming
See All in Programming
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
590
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
100
Rubyでつくるパケットキャプチャツール
ydah
0
170
php-conference-japan-2024
tasuku43
0
430
為你自己學 Python
eddie
0
520
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
860
Building Applications with DynamoDB
mza
93
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Statistics for Hackers
jakevdp
797
220k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Optimising Largest Contentful Paint
csswizardry
33
3k
Transcript
None
w QPUBUPE5BLVNB)"/"5"/* w -*/&Ϡϑʔגࣜձࣾ ΤϯδχΞϦϯάϚωʔδϟʔ 'SPOU&OE w ࠓ౦ژ͔ΒདྷͯେࡕΦϑΟεͰࣄͯ͠ ͔Βདྷ·ͨ͠
w Ԡื࣌ʹॻ͍ͯͨωλ·ͨ࣍ͷLZPUPKT ͰհͰൃද͠·͢ ࣗݾհ
w QPUBUPE5BLVNB)"/"5"/* w -*/&Ϡϑʔגࣜձࣾ ΤϯδχΞϦϯάϚωʔδϟʔ 'SPOU&OE w ࠓ౦ژ͔ΒདྷͯେࡕΦϑΟεͰࣄͯ͠ ͔Βདྷ·ͨ͠
w Ԡื࣌ʹॻ͍ͯͨωλ·ͨ࣍ͷLZPUPKT ͰհͰൃද͠·͢ ࣗݾհ 地味に1年ぶりの登壇&前回もkyotojs
"*ʹίʔυΛॻ͔͍ͤͨͰ͢ΑͶʁ
ॻָ͍ͯͯ͘͠ͳ͍෦Λಛʹ͍ͤͨͰ͢ΑͶʁ
Ͱָ͘͠ͳ͍ίʔυ΄Ͳෳࡶ͡Όͳ͍Ͱ͔͢ʁ
ෳࡶͳίʔυͤͨ͘ͳ͍Ͱ͢ΑͶʁ
อकੑߟྀ͢ΔͱࣗͰॻ͔͟ΔΛಘ·ͤΜΑͶʁ
ຊ͔ʁ
ਓ͕ؒॻ͍ͯͲ͏ͤԚ͍ίʔυͳΒྑ͍ͷͰʁ
.1͕અ͞ΕͨͳΒɺͦΕेͳՌͳͷͰʁ
None
今回作ったもの • ゲームの Tier List (キャラランク)作成ツール • ゲーム内での強弱を整理し、SNSなどでシェアするために使わ れる概念 •
今遊んでいるゲームが古いものしか存在しないので作ることに • ツールが存在するかは有志の活発度によるが、存在するゲーム では概ね以下の機能を備えている • D&Dやスワイプによるシンプル操作の Tier List 作成 • 作成した Tier List の画像出力(PNG)
今回作ったもの • ゲームの Tier List (キャラランク)作成ツール • ゲーム内での強弱を整理し、SNSなどでシェアするために使わ れる概念 •
今遊んでいるゲームが古いものしか存在しないので作ることに • ツールが存在するかは有志の活発度によるが、存在するゲーム では概ね以下の機能を備えている • D&Dやスワイプによるシンプル操作の Tier List 作成 • 作成した Tier List の画像出力(PNG)
%%Λߦ͏࣮ͷ໘͞ʹର͢ΔΈΜͳͷԠू %%Λߦ͏࣮ͷ໘͞ʹର͢ΔΈΜͳͷԠू しれっとDOMの 画像出力でも苦労しようとしてるぞ しれっとDOMの 画像出力でも苦労しようとしてるぞ クリックだけじゃなく スワイプ対応も必須なのが最悪 クリックだけじゃなく スワイプ対応も必須なのが最悪
俺は特に困らず 実装できたけど嫌いな人多そう 俺は特に困らず 実装できたけど嫌いな人多そう $('[draggable]') ↑これやめろ $('[draggable]') ↑これやめろ
ࣗͰ࣮ͨ͠Βԯ߷ͰҰੜΒͳ͍
ͷͰ"*ʹԡ͚ͯ͠ΈΔ
今回は GPT-4o を UI から利用。特に複雑な処理が AI 側では必要ないため。
None
「AIに敬語使うんですねw」 ↑やってるとき知り合いに言われた
思ってたのと違ったので画像で指示 (UIは本質ではないため後で自分で書く)
後でメンテするので 実装のイメージを詳細に
ライブラリを 使おうとしてくる
拒否する
微妙な要件のニュアンスは 追加で指示する
原因を実装から読み取って指示しても、どれかを直すとどれかのバグが再発するように
出力されるソースコードも予想通り迫力のあるものが増えてきた
ここらで損切りしたら
ライブラリを解禁する 大体うまくいった (UIは都度都度こっちで肉付けをしていったのでAIは記述なし)
出力されるソースコードも人間が扱える範囲で一旦着地
所要時間 2024/06/17 17:15 2024/06/18 01:30 8時間15分(うち4時間のサボり含む)
所要気力 ∞ 0 ※ ただし UI を組むのが苦ではない人に限る
૯ׅ w ࠓճʮ%%ΛϒϥβͰѻ͏ίʔυʯΛࡐʹ"*ʹͤͯΈͨ w ࣗͰటष͍࣮ΛؤுΔPSϥΠϒϥϦͤʹͳΔྖҬʹ͍ͭͯɺࠓճޙ ऀͰ࣮ݱͰ͖ͨɻલऀ͕ཧͰ͋Δ͕ɺΤοδέʔεͷରԠ͕͍͠ɻ w ͱ͍͑ʮέΞϨεϛε͕ൃੜͮ͠Β͍ʯʮ࣮͕໘Ͱ͋ͬͨΓௐΔ ඞཁ͕͋Δ͚ͩͰқࣗମߴ͘ͳ͍ʯͷΛͤΔͷ࠷దͩͱײͨ͡ɻ ࠓճ͕͑ͯͯͤͨ͢ɺۀͰ%%͚ͩԡ͚͠ΔͳͲ͋Γɻ
w ࠷ۙ$PQJMPUͳͲਓؒϝΠϯ ิॿͰ"*ͱ͍͏ίʔσΟϯάελΠϧ͕ ૿͍͑ͯΔ͕ɺݹ͖ྑ͖ʮؙ͛ʯఆ؍ଌ͍͖͍ͯͨ͠ɻ