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
350
どうせキレイに書けない処理は逆に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.2k
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.9k
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
4k
私たちはなぜ 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.6k
Other Decks in Programming
See All in Programming
バッチを作らなきゃとなったときに考えること
irof
2
500
Rails アプリ地図考 Flush Cut
makicamel
1
130
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
720
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
130
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
250
CI改善もDatadogとともに
taumu
0
190
DROBEの生成AI活用事例 with AWS
ippey
0
140
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
350
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Embracing the Ebb and Flow
colly
84
4.6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Into the Great Unknown - MozCon
thekraken
35
1.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
KATA
mclloyd
29
14k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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ͳͲਓؒϝΠϯ ิॿͰ"*ͱ͍͏ίʔσΟϯάελΠϧ͕ ૿͍͑ͯΔ͕ɺݹ͖ྑ͖ʮؙ͛ʯఆ؍ଌ͍͖͍ͯͨ͠ɻ