ChatGPTが楽しすぎる。アコーディオンメニュー作らせてみた。

この記事は近年のAI事情に戦々恐々しているWebデザイナーやコーダーに向けた記事になります。

Just a moment...

chat.openai.com

ChatGPTにアコーディオンメニューを作らせてみた

今更ではあるのですがChatGPTの紹介もしつつどこまで遊べるのかを確認していました。

ChatGPTとは簡単に言ってしまえばチャット感覚でテキストを送ると具体的な形でアウトプットしてくれるサービスです。
Googleさんの場合は「キーワードから検索結果を出力してくれる」のに対してChatGPTは「テキストを解析した上で解答を出力してくれる」というものであり、その精度がものすごいと話題になっています。

というわけで以下の命令文を実行してみました。

クリックしたときに動くアコーディオンメニューを生成してください。
JavaScriptは使用しないことが条件です。

すると、以下の返答をいただきました。

<div class="accordion">
  <div class="accordion-header" tabindex="0">
    <h2>Accordion Title 1</h2>
  </div>
  <div class="accordion-content">
    <p>Accordion content 1 goes here</p>
  </div>
  <div class="accordion-header" tabindex="0">
    <h2>Accordion Title 2</h2>
  </div>
  <div class="accordion-content">
    <p>Accordion content 2 goes here</p>
  </div>
  <div class="accordion-header" tabindex="0">
    <h2>Accordion Title 3</h2>
  </div>
  <div class="accordion-content">
    <p>Accordion content 3 goes here</p>
  </div>
</div>

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-header {
  cursor: pointer;
}

.accordion-header:after {
  content: "+";
  font-size: 1.5em;
  float: right;
}

.accordion-header[aria-expanded="true"]:after {
  content: "-";
}

.accordion-header:focus + .accordion-content {
  max-height: 500px;
}

上記のHTML,CSSを使用すれば、クリックしたときにアコーディオンメニューが動作するアコーディオンメニューを生成することができます。
複数のアコーディオンがある場合は、それぞれのアコーディオンの要素に対してclassを付けて、上記のHTML,CSSを使用することで実現できます。

ぎえええぇぇ！？十数秒で生成してくれました。しかし、これが本当に使い物になるのか疑問です。

実際に出力したアコーディオンメニューがこちら

な、なんか惜しい。。。けど下地としては十分で、あとはHTMLとCSSをちょっと修正するとそれなりのものになりそうです。

現時点ではベースとなるHTMLやCSSを生成してもらえるだけでもありがたいなぁと思いますが、後1年後とかどうなってるのでしょう？
様々な条件を付け加えることで求めている完璧なものまで作りきってしまいそうで恐ろしい時代になったものだと思います。