ChatGPTにコーディングしてもらいました
![](https://sinpe-pgm.com/wp-content/uploads/2022/01/computer_tokui_boy-150x150.png)
正直ChatGPTよく知らないんだけど、なにがすごいの?
![](https://sinpe-pgm.com/wp-content/uploads/2022/12/DSC02647-e1672070436919-150x150.jpg)
んー、わからないので試しに使ってみます。
早速チャグってみましょう!
ハンバーガーメニューのHTMLとCSSとjQueryを出力して!と言った結果がこれ
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/12578caec9ad75323d52cfb52c0b6322.png)
まぁ、実際に使うことはないですがすごいですね。。。もっと効果的な使い方がありそうなので模索してみます。
ググるみたいな感覚で、ChatGPTで検索が当たり前になりそうですね。チャグるとか言い出すのかな。
では、このコードを実際に表示してみましょうか。本当にできてるのか??
ChatGPTが出力したコードを表示させてみる
うん。できてますね。ボタン押したらメニューでてきます。一応。
See the Pen Untitled by shimpei (@shimpei) on CodePen.
他にも色々お願いしてみる
![](https://sinpe-pgm.com/wp-content/uploads/2021/12/DSC02647-150x150.jpg)
emmetの一覧を日本語にしてul liタグでhtmlとして表示。ulのクラスはnav-list。
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/f61cf13eafb4cd512579babd10551273-644x560.png)
これは使えそうですね。ul liでリスト作るときはemmetで一気にやりますが、ChatGPTでやるほうが自分でやる作業が少なくなりそうです。単純作業が膨大にある時とか、テーブルタグに変換とかもいい感じでした。次はスタイリングもお願いしてみましょう。
![](https://sinpe-pgm.com/wp-content/uploads/2021/12/DSC02647-150x150.jpg)
nav-listにおしゃれなスタイリングしてあげて。
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/5681e2d94b8027cdd95cf13326d668d4-644x623.png)
さっき作ったemmet一覧のnav-list
のことは忘れてしまっているようですね。
表示させて見ましょう。今度はどうでしょうか?
See the Pen ChatGPT emmet list by shimpei (@shimpei) on CodePen.
不出来で安心しましたが、フレックスできれいに横並びにしていますね。横並びのスタイリングとかお願いしたらはやそうですね。
最後に
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/Artificial-intelligence-bro-644x644.png)
見てみるとやりたくなったのではないでしょうか?ぜひ流行りのChatGPTで遊んでみましょう。
考え出すとアイデアが尽きないですね!
「JavaScriptの三項演算子を出力してもらう」「if文のコードを生成してもらう」
普段の業務に使える、助けになるレベルで使える可能性を感じました。
今回は始めて触りながら記事を書いたので雑でしたが、この記事を見てChatGPTに興味をもってもらえたら幸いです。
効果的な使い方があればぜひ教えてください。
最後までありがとうございました!