Chat-GPTにお絵描きツール作らせてみた | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

みなさんこんにちは！受託プロダクトチームインターン生の肖かえいです!!
ここ最近、Javascriptを勉強するにあたって、去年大学で受けた授業を思い出します。
その授業では簡単javascriptを使って簡単なお絵描きツールを作りました。
その時、実装するにあたって結構時間がかかって悪戦苦闘しました。
その時にchat-gptがあればな…。
ということでchat-gptにやらせてみよう！！
要件としては
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
・マウスクリック中に線がかける
・線のいろが変えられる
・２回のクリックで直線がひける
・大きさ可変の四角形が描画できる
・一括削除のボタンで描いたものが消える
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
この要件をchat-gptに指示してみた結果html,css,javascriptのコードがアウトプットされました。
これをエディターに入れてみると…。
おお！いい感じ！！
しかし、直線がひけず…。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
・マウスクリック中に線がかける→〇
・線のいろが変えられる→〇
・２回のクリックで直線がひける→〇
・大きさ可変の四角形が描画できる→〇
・一括削除のボタンで描いたものが消える→×
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
という結果になりました。
かなり良いのでは！？ここまでで所要時間はたったの５分！！技術の進歩は凄まじいです。

---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------