Web制作の現場におけるChatGPTの使い方

ChatGPTで色々聞くと便利だぜ！なんでもできるぜ！と言いながら使い方によってはとんでもないドジっ子にもなるChatGPTさん。
そんなこんなで基本の使い方からWeb制作の現場で使える例を記事にしてみます。

We’ve trained a model called ChatGPT which interacts in a conversational way. The dialogue format makes it possible for ChatGPT to answer followup questions, ad...

思いついた言葉でサンプルコードを出力する
代わりにマークアップさせる
JavaScriptもあっさり書いてくれる
エクセルなんかもアイディア次第で
アイディア出しのアドバイザーとして
まとめ：ざっくりとした疑問やアイディア出しにも使える

思いついた言葉でサンプルコードを出力する

ほてまる

divを使って３カラムのレイアウトを作ってほしいにゃ。 HTMLとCSSそれぞれのサンプルコードを出力もおねがいするニャ。

<div class="container">
  <div class="column" id="column1">Column 1</div>
  <div class="column" id="column2">Column 2</div>
  <div class="column" id="column3">Column 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1;
  padding: 10px;
  text-align: center;
}

#column1 {
  background-color: lightblue;
}

#column2 {
  background-color: lightgray;
}

#column3 {
  background-color: lightcoral;
}

このコードで、.container要素はflexによってフレックスボックスとして扱われ、.column要素はflex: 1によってフレックスアイテムとして扱われます。これによって、3つのカラムが等しい比率で画面に表示されます。各カラムには、paddingとtext-alignスタイルが適用され、さらに#column1, #column2, #column3にはそれぞれ別の背景色が設定されています。

上記のようにサンプルコードも出してくれるし解説もしてくれます。
もはやHTMLやCSSの学習サービスを利用しなくてもいいかもしれない、とはいえidいらなくね？とか色々自分で調整が必要なサンプルコードではあるので、ざっくりとしたコードを思い出したいときに重宝します。

代わりにマークアップさせる

ほてまる

以下のリストをHTMLでマークアップしてくださいニャ～。
ラーメン
つけ麺
油そば
チャーシュー麺
こってりラーメン

以下が、HTMLでのマークアップ例です。

<ul>
  <li>ラーメン</li>
  <li>つけ麺</li>
  <li>油そば</li>
  <li>チャーシュー麺</li>
  <li>こってりラーメン</li>
</ul>

このコードでは、<ul>要素を使って項目のリストを作成します。各項目は<li>要素で囲まれます。このマークアップでは、視認性を高めるために整列された点のリストとなります。

JavaScriptもあっさり書いてくれる

ほてまる

JavaScriptでボタンを押すとブラウザをシェイクするサンプルコードを出力してくださいニャ

const button = document.querySelector("button");

button.addEventListener("click", function () {
  const x = window.scrollX;
  const y = window.scrollY;

  window.onscroll = function () {
    window.scrollTo(x, y);
  };

  for (let i = 0; i < 3; i++) {
    setTimeout(function () {
      window.scrollTo(x + 10, y + 10);
      setTimeout(function () {
        window.scrollTo(x, y);
      }, 50);
    }, 50 * i);
  }

  setTimeout(function () {
    window.onscroll = function () {};
  }, 150);
});

このコードは、ページ上の「button」という名前のボタンを検索し、クリックイベントを処理する関数を登録します。この関数は、3回繰り返しのセットタイムアウトを使用して、ブラウザをシェイクするためのスクロールアニメーションを実行します。最後に、window.onscroll関数をクリアすることで、ブラウザをシェイク終了するようにしています。

エクセルなんかもアイディア次第で

ほてまる

エクセルのセルA1とB1が同一か判断し、同一である場合はTRUEを、同一でない場合はFALSEをC1に出力するようにしてくださいニャ

=IF(A1=B1,"TRUE","FALSE")

このIF関数は、A1とB1が同一であるかを判断します。同一である場合は、"TRUE"を、同一でない場合は、"FALSE"を出力します。

この式を実行するには、Microsoft Excelを開き、C1セルにこの式を入力します。入力した式が評価され、セルA1とB1が同一であるかに応じて、TRUEまたはFALSEが出力されます。

アイディア出しのアドバイザーとして

るり

人間中心設計専門家としてこれから行う問いかけに日本語で応じるようにしてください。潰瘍性大腸炎の患者さんが今後安心して生活をしていくために医療従事者がサポートするために必要なカスタマージャーニーマップを一緒に作ってくださいミャ。

はい、了解しました。潰瘍性大腸炎の患者さんのカスタマージャーニーマップを作成することで、彼らが安心して生活を送れるように支援することができます。

まず、潰瘍性大腸炎の患者さんの現状とニーズを確認することから始めましょう。彼らが抱える問題や不安な点、望むことなどを整理します。

次に、患者さんが望むゴールに向かって進むためのステップを考えます。例えば、診察や検査、治療、リハビリテーションなどです。

さらに、各ステップで患者さんが遭遇する課題や壁、そしてそれらを乗り越えるために必要な支援を明確にすることも重要です。

最後に、全体の流れをマップ形式でグラフィカルに表現し、患者さんが望むゴールに向かって迂回路なく進めるよう支援することができます。

このように、カスタマージャーニーマップを作成することで、潰瘍性大腸炎の患者さんが今後安心して生活をするために医療従事者が提供できる支援を明確にすることができます。

るり

ステージ、顧客接点、顧客行動、顧客心理、課題ごとにテーブル形式で出力してくださいミャ。

まとめ：ざっくりとした疑問やアイディア出しにも使える

ChatGPTを使うアイディアは色々なSNSで拡散されていてとてもおもしろいです。そんな発想があったのか！！ということとそんな発想に応えることができるChatGPTは素晴らしいですね。
但し、ChatGPTも限界は当然あります。複雑な問いに対してはフリーズしてしまったり、長文による返答途中でシャットダウンしてしまったり。
特定のURLをスクレイピングしてもらうようなことやHTMLそのものの編集、読み込みなども難しいです。

これからのAI業界に期待が高まりますね。