初心者向けChatGPTコーディング術5選

2024年1月8日2024年9月9日

ChatGPTの登場で、多くの人の日常が変わりました。しかし、その潜在能力を最大限に活用できている人は意外と少ないのが現状です。

ChatGPTって便利そうだけど、どう使えばいいんだろう？

そんな疑問を持つ人は少なくありません。実際、多くの人がChatGPTの使い方に戸惑い、結果としてあまり活用できていないのが実情なのです。

そこで今回は、私が日々のコーディングで実践している活用法を5つ共有します。

この記事を読めば、あなたもChatGPTでコーディングの速度を劇的に上げることができるので、ぜひ参考にしてください。

エラー文章の確認

web制作を学ぶ過程で、エラーに直面するのは、避けることはできません。

私も毎日エラー文に直面しています。

特に初心者にとっては、エラーメッセージが難解な謎のように感じられることもあります。

そこでChatGPTが活用できます。

たとえば、JavaScriptでUncaught ReferenceError: foo is not definedというエラーメッセージが表示されたとき、どうしたらいいか迷ったら、そのメッセージをChatGPTに伝えてみてください。

ChatGPTは、エラーの原因を丁寧に分析し、どのように修正すればいいのか具体的なアドバイスをくれます。

この方法を使えば、初心者でも難しいエラーメッセージを理解し、問題を迅速に解決する力を身につけることができます。これにより、コーディングの学びがぐんと楽になり、Web制作の技術も自然と上達していきます。

HTMLの生成

Web制作の基本となるHTMLは時に時間のかかる実装もあります。

ChatGPTを利用することで、この過程を大幅に簡単にすることが可能です。

例えばデザインカンプのスクリーンショットをChatGPTに貼り付けて、「HTMLでマークアップして」と伝えるとHTMLを生成してくれます。

これだけで1セクションのマークアップが終了です。

後はCSSでスタイリングしていくだけなので、大幅に時間を短縮することができます。

デザインカンプをそのままスクリーンショットしたりすると、範囲が広いので適切にマークアップしてくれないので、1セクション毎日スクリーンショットをするなど、範囲を絞ってあげてください。

特にお問い合わせなどのフォームを生成するときなどは便利です！

例えば、シンプルなコンタクトフォームを作成したいと思ったとき、ChatGPTにその要件を伝えるだけで、適切なHTMLコードを提供してくれます。

今回はCSSも生成してもらいます。

すると下記のようなお問い合わせフォームが簡単に生成できました。

このようにChatGPTに具体的な要件を伝えることで、容易にHTMLコードを生成することができます。

ChatGPTから提供されるコードは、学習の参考にもなり、HTMLの知識を深めるのにも役立ちます。

JavaScriptの生成

Web制作において、JavaScriptは動的な機能を追加するのに不可欠です。

しかし、初学者の頃はJavaScriptのコーディングは特に難易度が高く感じられることがあります。

ここでChatGPTの力を借りることが、大きな助けになります。

例えば、「画像をクリックするとポップアップが表示される機能」をWebサイトに追加したいと考えた場合、その機能に必要なJavaScriptのコードをChatGPTに尋ねることができます。

具体的な要件や動作を詳細に説明すれば、ChatGPTはそれに合わせたJavaScriptコードを生成してくれます。

今回出してくれたコードは以下のようになりました。

<div class="image-popup" id="imagePopup" style="display: none;">
  <span class="image-popup__close" id="imagePopupClose">×</span>
  <img class="image-popup__content" id="popupImg">
</div>

<img src="path-to-your-thumbnail-image.jpg" alt="Thumbnail image" class="image-thumbnail" id="myImg">

/* The Modal (background) */
.image-popup {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

/* Modal Content (Image) */
.image-popup__content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* The Close Button */
.image-popup__close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.image-popup__close:hover,
.image-popup__close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Add animation */
.image-popup__content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}

@keyframes zoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

// Get the modal
var modal = document.getElementById("imagePopup");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("popupImg");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
}

// Get the <span> element that closes the modal
var span = document.getElementById("imagePopupClose");

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

画像をクリックするとちゃんとポップアップがでてきます。

細かい修正は必要ですが、概ねできていますね！

See the Pen GPTモーダル by ryoma (@hwjgdjpk-the-decoder) on CodePen.

もちろん「日本語でやりとりして」や「コードについて説明して」と伝えると丁寧に解説してくれます。

このように活用することで、普段は大変なJavaScriptの実装も大幅に時短することができます。