ChatGPT4にアコーディオンメニューを作らせたらびっくりするほど頑張る

以前、公開した記事の時点ではChatGPTは3.5だったのですが、今回どうようの内容でどのくらい違いが出るのか試してみたいと思います。結論から言うと、ChatGPT4やばいね。

サンプル

メニュー 1

メニュー 1 の内容です。

メニュー 2

メニュー 2 の内容です。

メニュー 3

メニュー 3 の内容です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アコーディオンメニュー</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="accordion" role="presentation">
    <input type="checkbox" id="menu1" class="accordion__input" role="menuitemcheckbox" aria-checked="false">
    <label for="menu1" class="accordion__label" tabindex="0">メニュー 1</label>
    <div class="accordion__content" role="region" aria-labelledby="menu1">
      <p>メニュー 1 の内容です。</p>
    </div>

    <input type="checkbox" id="menu2" class="accordion__input" role="menuitemcheckbox" aria-checked="false">
    <label for="menu2" class="accordion__label" tabindex="0">メニュー 2</label>
    <div class="accordion__content" role="region" aria-labelledby="menu2">
      <p>メニュー 2 の内容です。</p>
    </div>

    <input type="checkbox" id="menu3" class="accordion__input" role="menuitemcheckbox" aria-checked="false">
    <label for="menu3" class="accordion__label" tabindex="0">メニュー 3</label>
    <div class="accordion__content" role="region" aria-labelledby="menu3">
      <p>メニュー 3 の内容です。</p>
    </div>
  </section>
<script src="scripts.js"></script>
</body>
</html>

CSS

.accordion {
  display: block;
}

.accordion__input {
  display: none;
}

.accordion__label {
  display: block;
  padding: 1rem;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion__label:hover {
  background-color: #e0e0e0;
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

.accordion__input:checked + .accordion__label + .accordion__content {
  max-height: 200px;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const accordionLabels = document.querySelectorAll(".accordion__label");

  accordionLabels.forEach((label) => {
    label.addEventListener("keydown", (event) => {
      const key = event.key;

      if (key === "Enter" || key === " ") {
        event.preventDefault();
        label.previousElementSibling.click();
      }
    });
  });
});

このサンプルコードでは、アコーディオンメニューを実現するために、チェックボックスとラベルを用いています。チェックボックスを選択すると、対応するラベルとコンテンツが開閉する仕組みになっています。

JavaScriptコードでは、アコーディオンメニューのラベルに対して、keydownイベントリスナーを追加しています。EnterキーまたはSpaceキーが押されたときに、対応するチェックボックスをクリックする動作を実行します。これにより、キーボード操作でアコーディオンメニューを開閉できるようになります。

注意: このサンプルコードは、シンプルなアコーディオンメニューの実装を示しています。実際のプロジェクトでは、ブラウザの互換性やパフォーマンスに注意し、適切にテストを行ってください。

WCAG 2.1 レベル AA をクリアするためには、以下の点に注意してください。

HTML の lang 属性を設定し、ページの言語を明示的に示します。
meta タグで文字コードを指定し、正しく文字が表示されるようにします。
meta タグで viewport を設定し、モバイルデバイスでの表示に対応します。
label タグを使用して、チェックボックスに適切なラベルを提供します。これにより、スクリーンリーダーがラベルを読み上げることができます。

このコードでは、アコーディオンメニューに role 属性や aria-* 属性を追加しています。ただし、WAI-ARIA の使用には注意が必要です。過剰な使用はアクセシビリティを悪化させる場合があります。

キーボード操作に対応させるためには、JavaScript を使用してイベントリスナーを追加する必要があります。

は？凄すぎるんだが。となりました。本当に簡単な挙動であれば全部任せたらいいんじゃないかな、と思えます。
もちろんこのままだと色々手直ししたい部分はあったり、CSSも変更したりしたいのですが速攻で作って速攻で実装する、みたいなことをやりたいときやプロトタイプを作りたいというときはこれでいいのかもしれません。

はー、恐ろしい世の中になっちゃいましたね。