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
440
3
Share
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
2024.06.28 に開催された #kyotojs での登壇資料です。
https://kyotojs.connpass.com/event/321343/
potato4d(Takuma HANATANI)
June 28, 2024
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.5k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
5k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7.1k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.4k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.8k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
28k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.7k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.9k
Other Decks in Programming
See All in Programming
Goの型安全性で実現する複数プロダクトの権限管理
ishikawa_pro
2
1.4k
Agentic AI: Evolution oder Revolution
mobilelarson
PRO
0
230
Redox OS でのネームスペース管理と chroot の実現
isanethen
0
500
Ruby and LLM Ecosystem 2nd
koic
1
1.4k
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
n4mlz
0
270
KagglerがMixSeekを触ってみた
morim
0
360
AWS re:Invent 2025の少し振り返り + DevOps AgentとBacklogを連携させてみた
satoshi256kbyte
1
110
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて!
k0kubun
3
2.7k
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
220
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
300
AI 開発合宿を通して得た学び
niftycorp
PRO
0
190
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
160
Featured
See All Featured
Balancing Empowerment & Direction
lara
5
1k
Mobile First: as difficult as doing things right
swwweet
225
10k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.6k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.2k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
300
Technical Leadership for Architectural Decision Making
baasie
3
300
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
700
エンジニアに許された特別な時間の終わり
watany
106
240k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
WCS-LA-2024
lcolladotor
0
510
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ͳͲਓؒϝΠϯ ิॿͰ"*ͱ͍͏ίʔσΟϯάελΠϧ͕ ૿͍͑ͯΔ͕ɺݹ͖ྑ͖ʮؙ͛ʯఆ؍ଌ͍͖͍ͯͨ͠ɻ