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
190
どうせキレイに書けない処理は逆に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
1.8k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.6k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.7k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.2k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.3k
Other Decks in Programming
See All in Programming
[Kotlin Fest 2024] もっとKotlinを好きになる!K2時代のKotlin Compiler Plugin開発
kitakkun
2
2.5k
技術サポートでよく見かけるパターンと便利な活用方法
tamai_63
0
490
Using Next.js as a full-stack framework / Next.jsをフルスタックフレームワークとして使ってみた
mongolyy
PRO
1
160
なぜキャッシュメモリは速いのか / Why is Cache Memory So Fast?
tomzoh
1
520
Swift 6 の地味な (?) アップデート
tajitaji
1
110
凝集性から考えるLaravelのmiddleware、routingに書くか? Policyに書くか?
newnomad
1
170
開発生産性の観点から考える自動テスト(2024/06版) / Automated Test Knowledge from Savanna 202406 Findy dev-prod-con edition
twada
PRO
14
7.3k
並行処理を学びGuzzleと仲良くなる
shimabox
2
410
visionOSアプリを作るなら今がチャンス!
risksrb
0
100
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
0
110
ビルドツールとはなにか?からはじめるGradle超入門 / JJUG CCC 2024 Spring
nhayato
1
180
ビッグデータにおける、RAGデザインパターン詳解
randoryo
0
110
Featured
See All Featured
Designing for Performance
lara
603
67k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
21
1.7k
Code Reviewing Like a Champion
maltzj
516
39k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Side Projects
sachag
451
41k
Speed Design
sergeychernyshev
6
180
ReactJS: Keep Simple. Everything can be a component!
pedronauck
661
120k
A better future with KSS
kneath
231
17k
Creatively Recalculating Your Daily Design Routine
revolveconf
213
11k
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ͳͲਓؒϝΠϯ ิॿͰ"*ͱ͍͏ίʔσΟϯάελΠϧ͕ ૿͍͑ͯΔ͕ɺݹ͖ྑ͖ʮؙ͛ʯఆ؍ଌ͍͖͍ͯͨ͠ɻ