chatGPTによる対話的なプログラミング
@itohiro73: 今話題のChatGPTさんにTwitterっぽいWebアプリをReact/TypeScripで実装してもらいました。完成したものはこちら。アイコンの画像だけ手動で自分のにリンク入れ替えましたが、それ以外は全部AIが実装してくれました。 ↑これをみて、やばいとわかったmiyamonz.icon
例
miyamonz.iconReactとTypeScriptでSlackみたいなwebアプリ書いて。Hooksを使って。
このようなことを書くと、そういうコードを返す
さらに、間違いとか、修正箇所を指摘、提案すると、そのとおり直してくれる
これがやばいmiyamonz.icon
この修正の精度はかなり高い
内容が論理的、日本語としてわかりやすければ、解することができる
ものによっては一発で作る
@ImAI_Eruel: ChatGPTにブラウザで動くゲームを作ってという指示をしてみたところ、そのまんまコピペでブラウザ上で動く(ちゃんと自分で操作できる)ブロック崩しゲームのコードを出力してくれました (なお、具体的な内容の指示やデバッグはゼロ)
日本語ができればプログラミングできなくてもゲームが作れる
https://pbs.twimg.com/media/FjNQBn2aYAAE_7v.jpg
miyamonz.iconが作ったもの
@moyaminC: chatGPTで適切に指示出しするとこんくらいのガントチャート風UI書かせることできた この体験でmiyamonz.iconが学んだこと
「機械的に書けること」の範囲が広がる
GitHub Copilotだけでもある程度これは実現されていたが、さらにこの範囲がぐっと広がった
AIに食わせるのに適したコードの書き方を意識すべき
インターフェースを切る
適切な命名する
適切な粒度でモジュールを分ける
これらは、人間がコードを書く場合も適切な行為だったが、AIにもやさしい
AIは、優秀でコストが低い部下として使える
対話を繰り返す中で、自分の指示文章が短く的確な表現になる
もうちょい具体的なプログラミング指示について
コンポーネントのリファクタリングも指示ができる
しかし、どこで切りだすかは、同じコードに対して2回やったところ、各々違うところでやってた
ここは、どの部分で切り分けるかこちらが指示すれば良い
「定数変数はトップレベルに書け」という命令を、対話中に入れたら、この命令のもうちょっとあとに行った指示でもこれに従っていたのを観測した
なので、対話冒頭に、良い書き方、推奨する書き方を列挙しておくと良さそう
「コードを書く際は、その内容を説明しないでください。わかったら了解と返事する」という指示便利
AIは変数名、名前等をみて、意味を解するので、適切な名前のインターフェースを書くことで、コード全体を入力しなくても良い
これは、モジュラーに分ける、レイヤーに分けるといった一般的なプログラミングの設計論が、AIにも効果的
面白いmiyamonz.icon
適当に書いたlambda上のdynamodbにputするバックエンドのコードで
「リポジトリ層としてdynamodbへアクセスするコードを別ファイルに切り出して、dynamodbへの依存を隠蔽して」
みたいなことはできた
(細かいニュアンスは違ったかも。体感だと、ここの指示の語彙は丁寧にしたほうが良い)
twitter風UIの人が、さらにこういう実験をしてる
@itohiro73: さてさて、昨日はChatGPTさんとReact/TypeScriptでWebフロントエンド開発を一緒にやってみたわけですが、ChatGPTさんともうちょっと抽象的なレイヤーからプロダクト開発をしてみたいという衝動にかられました。 ChatGPTさんと一緒にプロダクト開発を要件定義からスタートしてみるとどうなるでしょう?
上流にあたるようなもの
機能要件、要件定義
それらの抽象度の変更
ユースケース
PlantUML生成!!
(自然言語の文書を特定の機械判読可能なコードへの変換!!!)
バックログ絵の受け入れ基準
@thekitze: asking ChatGPT to refactor a php + jquery app to next.js with typescript, formik, tailwind, and auth0 🤯🤯🤯
https://video.twimg.com/ext_tw_video/1598413987674292226/pu/vid/480x270/cN1nN2D4VH6Xo1-h.mp4
ヤバすぎて草mrsekut.icon
ほんとうにねmiyamonz.icon
リプライで誰かが言ってる
@andreasklinger: @thekitze I love how it shows how redundant those preference discussions are. You can transpile it from one to the other now and it anyway gets compiled to some binary in the end.
好みの議論は助長で、変換してコンパイルしてしまえばいい
使いやすさとか、メンテナビリティ、ライブラリの持続性とかは大事だと思ってるが
そうでないところは、あんまり気にしないでも良いのかもな、とも思ったmiyamonz.icon
まあ、手軽に変換ができるからこそ、良いライブラリにさっさと置き換えろよ、とも言えるが
これ全体も参考になるが、途中で、定めた情報をjsonやcsvに変換するところも便利
https://gyazo.com/f85bbbba5edd59bfee4e1ed5ed8f563d
https://gyazo.com/dd03a2ef4de47ccb97efdb5b7682fa1d
プログラミング関連で一番バズってそうな日本語のはこれかな
エンジニア終了の日も近いかも
https://pbs.twimg.com/media/Fi3Np-taAAA9lvt.jpghttps://pbs.twimg.com/media/Fi3Np-vacAATFsq.jpghttps://pbs.twimg.com/media/Fi3Np_AaEAAf1ri.jpg
@igz0: OpenAIのChatGPTヤバすぎワロタ 生半可なスキルを持つITエンジニア全員廃業するわこんなん
https://pbs.twimg.com/media/Fi4tP2cUUAAic0q.jpghttps://pbs.twimg.com/media/Fi4tQHSagAAKpVk.jpghttps://pbs.twimg.com/media/Fi4tQcPakAEQPdM.jpg
やりたいことを聞く→エラーが出る→それを修正してもらう→完成
っていう流れがきれいに行き過ぎて興奮した。
留意する点を教えてくれるのもありがたすぎる。
https://pbs.twimg.com/media/Fi4Z1gEaMAAemYD.pnghttps://pbs.twimg.com/media/Fi4Z2g0aEAASPiI.pnghttps://pbs.twimg.com/media/Fi4Z3V4akAYxMJN.png