話題のChatGPTを使ってコーディングをしてみる
ChatGPTのログイン方法や、サービスの利用法などは、検索すればいくらでもわかるので、細かい話は省略しますが、今回は、ChatGPTを使って、ウェブサイトをコーディングさせてみました。
とはいえ、一応ChatGPTについてChatGPTに聞いてみました。
とてもよくわかりますが、もっとわかりやすくしてもらいましょう。
なるほどですね。
ここで、一つ気づいて欲しいポイントがあります。ChatGPTは、細かく説明しなくても、文章の流れを組んで、回答してくれます。まさに人工知能ですね。
レスポンシブでウェブサイトを作るコードを教えて
手始めに、少しざっくりですが、聞いてみました。
無駄のない教科書のようなお手本ですね。
これは、もう少し具体的に聞いてみたくなりますね。
アコーディオンの実装方法は？
少し具体的にUIの実装方法を聞いてみました。
おお、なんかちゃんとしたコードが返ってきましたね。せっかくなのでCodePenを使って再現してみましょう。
ちゃんとアコーディオンになってますね。
モーダルウィンドウは？
ちょっと雑な質問の仕方ですが、きっと理解してくれるはずです。
良さそうですね。CodePenで再現してみます。
非常にシンプルですが、期待通りです。実際はモーダルウィンドウは、各種デバイスでの対応を含めると、もっと深いものですが、良い感じです。
かっこいいホバーアニメーションをCSSで実現したい
ちょっと抽象的な質問をしてみたらどうでしょう？
ドロップシャドウで浮き出る感じをかっこいいとしているようです。
WebGLを使って立方体をぐるぐる回したい
WebGLはいけるんでしょうか？
頂点シェーダーとかフラグメントシェーダーとかで実現しようとしていましたが、これはダメでした。コードが途中で止まっちゃいました。
ライブラリを指定したらもっとシンプルになると思いましたので、three.jsでお願いしてみました。
完璧です。。。
まとめ
エクセルと一緒に使ったり、いろいろな利用方法を試している方がいますが、今回はフロントエンドのコードを生成してもらいました。
普段、わからないことがあると、ググるのが定番なのですが、ChatGPTはググるよりも効率的かつ、的確に、回答しれくれます。時代が変わりそうな雰囲気がプンプンしますね。話題になるわけです。
Discussion