【ChatGPT】Web制作でJavaScriptを正確に出力してもらうコツ

ソフトウェア

2023/12/15

この記事は、ChatGPTを使ってWebサイトの制作で必要なJavaScript（Jquery含む）のコードを正しく出力してもらう方法について書いてます。

もうコーディングするのにChatGPTは必須ですよね。

そんなChatGPTですが、命令が適切でないと吐き出すコードも動かなかったりするので、命令の仕方は大事です。

Contents

1 ChatGPTでWebサイト制作のJavaScriptを出力してもらうコツ
2 ChatGPTは命令の仕方で結果の精度が変わります

ChatGPTでWebサイト制作のJavaScriptを出力してもらうコツ

で、ポイントとしては以下の通りです。

該当するコードを出来るだけ整理して張り付ける
一気に指示せずに、段階的に小分けにして命令する
内容は出来るだけ具体的に書く

以下で、非表示の要素がslideToggle()するというjQueryのコードを書いてもらうという例に沿って紹介します。

該当するコードを出来るだけ整理して張り付ける

たとえば、こんなコードだったとします。

  <ul>
    <li class="box">
      <div class="box_header">見出し</div>
      <div class="box_body">
        <div class="box_body_inner">
          <p class="box_lead">リード文</p>
          <p class="box_txt">
            本文です。本文です。本文です。
          </p>
        </div>
      </div>
    </li>
    <li class="box">
      <div class="box_header">見出し</div>
      <div class="box_body">
        <div class="box_body_inner">
          <p class="box_lead">リード文</p>
          <p class="box_txt">
            本文です。本文です。本文です。
          </p>
        </div>
      </div>
    </li>
    <li class="box">
      <div class="box_header">見出し</div>
      <div class="box_body">
        <div class="box_body_inner">
          <p class="box_lead">リード文</p>
          <p class="box_txt">
            本文です。本文です。本文です。
          </p>
        </div>
      </div>
    </li>
  </ul>

  <style>
    .box_header {
      color: black;
    }

    .box_header.is_show {
      color: blue;
    }

    .box_body {
      display: none;
    }
  </style>

この場合、このままコードを張り付けるのではなくて、以下のように必要な部分だけ載せます。


  <ul>
    <li class="box">
      <div class="box_header">見出し</div>
      <div class="box_body"></div>
    </li>
    <li class="box">
      <div class="box_header">見出し</div>
      <div class="box_body"></div>
    </li>
    <li class="box">
      <div class="box_header">見出し</div>
      <div class="box_body"></div>
    </li>
  </ul>

  <style>
    .box_header {
      color: black;
    }

    .box_body {
      display: none;
    }
  </style>

あくまでイメージです。

↑最初のコードくらいなら整理する必要はないですが、boxの中が100行とかあったり、他にも関係する要素が複数ある場合などは、このように調整してください。

一気に指示せずに、段階的に小分けにして命令する

たとえば、以下のような指示ではなく、

jQueryで以下の条件を満たすコードを書いて。
.box_headerをクリックしたら、.is_showが付与されているか確認してください。
.is_showがあれば削除して、クリックした.box_headerの次の.box_bodyをslideUpしてください。
.is_showがなければ付与して、.box_bodyすべてをslideUpしてから、クリックした.box_headerの次の.box_bodyをslideDownしてください。

こんな感じで小分けにするとバグのないコードが出力されやすいです。

jQueryで以下の条件を満たすコードを書いて。
.box_headerをクリックしたら、
.is_showを付与して、クリックした.box_headerの次の.box_bodyをslideDownしてください。

こちらもあくまでもイメージです。

実際にこれくらいは一気に命令して問題ないです。

内容は出来るだけ具体的に書く

これは2つ目の「一気に指示せずに、段階的に小分けにして命令する」のコードをみてもらいたいのですが、クラス名をつけて1つ１つの処理を詳しく書いてます。

これを、「.box_headerをクリックしたら次の要素を開いてください」みたいな感じだとあんまりよくないです。

ChatGPTは命令の仕方で結果の精度が変わります

この記事では、あくまでイメージとして簡単な内容でしたが、実際に複雑な処理をするコードを出してもらうときにはかなり重要です。

まあ、それでもある程度意図を汲んで正しい回答をしてくれることが多いので、ほんとすごいなーと思います。

今では、基本ChatGPTは開きっぱなしで、チャットの返信やなんとなく思いついたこととか、なんでも相談するようになってます。