どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

w QPUBUPE5BLVNB)"/"5"/* w -*/&Ϡϑʔגࣜձࣾ ΤϯδχΞϦϯάϚωʔδϟʔ 'SPOU&OE w ࠓ೔͸౦ژ͔ΒདྷͯେࡕΦϑΟεͰ࢓ࣄͯ͠ ͔Βདྷ·ͨ͠ w Ԡื࣌ʹॻ͍ͯͨωλ͸·ͨ࣍ͷLZPUPKT Ͱ঺հͰൃද͠·͢ ࣗݾ঺հ

Slide 3

Slide 3 text

w QPUBUPE5BLVNB)"/"5"/* w -*/&Ϡϑʔגࣜձࣾ ΤϯδχΞϦϯάϚωʔδϟʔ 'SPOU&OE w ࠓ೔͸౦ژ͔ΒདྷͯେࡕΦϑΟεͰ࢓ࣄͯ͠ ͔Βདྷ·ͨ͠ w Ԡื࣌ʹॻ͍ͯͨωλ͸·ͨ࣍ͷLZPUPKT Ͱ঺հͰൃද͠·͢ ࣗݾ঺հ 地味に1年ぶりの登壇&前回もkyotojs

Slide 4

Slide 4 text

"*ʹίʔυΛॻ͔͍ͤͨͰ͢ΑͶʁ

Slide 5

Slide 5 text

ॻָ͍ͯͯ͘͠ͳ͍෦෼Λಛʹ೚͍ͤͨͰ͢ΑͶʁ

Slide 6

Slide 6 text

Ͱ΋ָ͘͠ͳ͍ίʔυ΄Ͳෳࡶ͡Όͳ͍Ͱ͔͢ʁ

Slide 7

Slide 7 text

ෳࡶͳίʔυ͸೚ͤͨ͘ͳ͍Ͱ͢ΑͶʁ

Slide 8

Slide 8 text

อकੑߟྀ͢Δͱࣗ෼Ͱॻ͔͟ΔΛಘ·ͤΜΑͶʁ

Slide 9

Slide 9 text

ຊ౰͔ʁ

Slide 10

Slide 10 text

ਓ͕ؒॻ͍ͯ΋Ͳ͏ͤԚ͍ίʔυͳΒྑ͍ͷͰ͸ʁ

Slide 11

Slide 11 text

.1͕અ໿͞ΕͨͳΒɺͦΕ͸े෼ͳ੒ՌͳͷͰ͸ʁ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

今回作ったもの • ゲームの Tier List (キャラランク)作成ツール • ゲーム内での強弱を整理し、SNSなどでシェアするために使われる概念 • 今遊んでいるゲームが古いものしか存在しないので作ることに • ツールが存在するかは有志の活発度によるが、存在するゲームでは概ね以下の機能を備えている • D&Dやスワイプによるシンプル操作の Tier List 作成 • 作成した Tier List の画像出力(PNG)

Slide 14

Slide 14 text

Slide 15

Slide 15 text

%%Λߦ͏࣮૷ͷ໘౗͞ʹର͢ΔΈΜͳͷ൓Ԡू %%Λߦ͏࣮૷ͷ໘౗͞ʹର͢ΔΈΜͳͷ൓Ԡू しれっとDOMの画像出力でも苦労しようとしてるぞしれっとDOMの画像出力でも苦労しようとしてるぞクリックだけじゃなくスワイプ対応も必須なのが最悪クリックだけじゃなくスワイプ対応も必須なのが最悪俺は特に困らず実装できたけど嫌いな人多そう俺は特に困らず実装できたけど嫌いな人多そう $('[draggable]') ↑これやめろ $('[draggable]') ↑これやめろ

Slide 16

Slide 16 text

ࣗ෼Ͱ࣮૷ͨ͠Βԯ߷ͰҰੜ΍Βͳ͍

Slide 17

Slide 17 text

ͷͰ"*ʹԡ͠෇͚ͯΈΔ

Slide 18

Slide 18 text

今回は GPT-4o を UI から利用。特に複雑な処理が AI 側では必要ないため。

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

「AIに敬語使うんですねｗ」 ↑やってるとき知り合いに言われた

Slide 21

Slide 21 text

思ってたのと違ったので画像で指示 (UIは本質ではないため後で自分で書く)

Slide 22

Slide 22 text

後でメンテするので実装のイメージを詳細に

Slide 23

Slide 23 text

ライブラリを使おうとしてくる

Slide 24

Slide 24 text

拒否する

Slide 25

Slide 25 text

微妙な要件のニュアンスは追加で指示する

Slide 26

Slide 26 text

原因を実装から読み取って指示しても、どれかを直すとどれかのバグが再発するように

Slide 27

Slide 27 text

出力されるソースコードも予想通り迫力のあるものが増えてきた

Slide 28

Slide 28 text

ここらで損切りしたら

Slide 29

Slide 29 text

ライブラリを解禁する大体うまくいった (UIは都度都度こっちで肉付けをしていったのでAIは記述なし)

Slide 30

Slide 30 text

出力されるソースコードも人間が扱える範囲で一旦着地

Slide 31

Slide 31 text

所要時間 2024/06/17 17:15 2024/06/18 01:30 8時間15分(うち4時間のサボり含む)

Slide 32

Slide 32 text

所要気力 ∞ 0 ※ ただし UI を組むのが苦ではない人に限る

Slide 33

Slide 33 text

૯ׅ w ࠓճ͸ʮ%%Λϒϥ΢βͰѻ͏ίʔυʯΛ୊ࡐʹ"*ʹ೚ͤͯΈͨ w ࣗ෼Ͱటष͍࣮૷ΛؤுΔPSϥΠϒϥϦ೚ͤʹͳΔྖҬʹ͍ͭͯɺࠓճ͸ޙ ऀͰ࣮ݱͰ͖ͨɻલऀ͕ཧ૝Ͱ͸͋Δ͕ɺΤοδέʔεͷରԠ͕೉͍͠ɻ w ͱ͸͍͑ʮέΞϨεϛε͕ൃੜͮ͠Β͍ʯʮ࣮૷͕໘౗Ͱ͋ͬͨΓ౎౓ௐ΂Δ ඞཁ͕͋Δ͚ͩͰ೉қ౓ࣗମ͸ߴ͘ͳ͍ʯ΋ͷΛ೚ͤΔͷ͸࠷దͩͱײͨ͡ɻ ࠓճ͸׶͑ͯ͢΂ͯ೚͕ͤͨɺۀ຿Ͱ΋%%͚ͩԡ͠෇͚ΔͳͲ͸͋Γɻ w ࠷ۙ͸$PQJMPUͳͲਓؒϝΠϯิॿͰ"*ͱ͍͏ίʔσΟϯάελΠϧ͕ ૿͍͑ͯΔ͕ɺݹ͖ྑ͖ʮؙ౤͛ʯ΋ఆ఺؍ଌ͍͖͍ͯͨ͠ɻ