【初心者向け】HTMLのoptgroup要素：使いやすく見やすいセレクトボックスを作る方法

`<optgroup>` 要素の構文

<optgroup> 要素の基本的な構文は以下の通りです。

<optgroup label="ラベル名">
  <option value="値1">オプション1</option>
  <option value="値2">オプション2</option>
  ...
</optgroup>

option 要素: グループに属する個々の選択肢を <option> 要素で定義します。
label 属性: グループのラベルとなるテキストを指定します。この属性は必須です。

`<optgroup>` 要素の例

国を選択するセレクトボックスを例に考えてみましょう。以下のコードは、ヨーロッパ、アジア、北米の選択肢をグループ化しています。

<select>
  <optgroup label="ヨーロッパ">
    <option value="FR">フランス</option>
    <option value="DE">ドイツ</option>
    <option value="IT">イタリア</option>
  </optgroup>
  <optgroup label="アジア">
    <option value="JP">日本</option>
    <option value="CN">中国</option>
    <option value="KR">韓国</option>
  </optgroup>
  <optgroup label="北米">
    <option value="US">アメリカ合衆国</option>
    <option value="CA">カナダ</option>
    <option value="MX">メキシコ</option>
  </optgroup>
</select>

このコードを実行すると、以下のようになります。

<optgroup> 要素を使用する利点は次のとおりです。

アクセシビリティの向上
スクリーンリーダーなどの支援技術を使用するユーザーにとって、optgroup は選択肢をより簡単に理解できるようにするのに役立ちます。
ユーザビリティの向上
特に選択肢が多い場合、optgroup を使用することで、ユーザーが目的の選択肢を見つけやすくなり、操作性を向上させることができます。
選択肢の整理
選択肢を論理的にグループ化することで、ユーザーにとって選択肢をより見つけやすく、理解しやすくなります。

無効化されたオプショングループ

<select>
  <optgroup label="開発中" disabled>
    <option value="not_yet_available">まだ利用できません</option>
    <option value="coming_soon">近日公開予定</option>
  </optgroup>
  <optgroup label="利用可能">
    <option value="option1">オプション1</option>
    <option value="option2">オプション2</option>
  </optgroup>
</select>

カスタムラベルのスタイル

<optgroup> 要素のラベルは、CSSを使用してスタイルを設定することができます。これにより、グループの見栄えをより良くしたり、ユーザーインターフェイス全体のデザインと一致させたりすることができます。

<style>
  optgroup[label="ヨーロッパ"] {
    font-weight: bold;
    color: #0099FF;
  }

  optgroup[label="アジア"] {
    font-style: italic;
    color: #663399;
  }

  optgroup[label="北米"] {
    text-decoration: underline;
    color: #990033;
  }
</style>

上記の CSS コードを追加すると、optgroup ラベルのスタイルがそれぞれ異なって表示されます。

JavaScriptを使用して、<optgroup> 要素とオプションを動的に生成することができます。これは、ユーザー入力に基づいて選択肢を生成したり、非同期でデータをロードしたりする場合に役立ちます。

<script>
  function generateOptions(data) {
    const select = document.querySelector('select');

    for (const category of data) {
      const optgroup = document.createElement('optgroup');
      optgroup.label = category.name;

      for (const option of category.options) {
        const optionElement = document.createElement('option');
        optionElement.value = option.value;
        optionElement.textContent = option.text;

        optgroup.appendChild(optionElement);
      }

      select.appendChild(optgroup);
    }
  }

  // サンプルデータ
  const data = [
    {
      name: 'ヨーロッパ',
      options: [
        { value: 'FR', text: 'フランス' },
        { value: 'DE', text: 'ドイツ' },
        { value: 'IT', text: 'イタリア' },
      ],
    },
    {
      name: 'アジア',
      options: [
        { value: 'JP', text: '日本' },
        { value: 'CN', text: '中国' },
        { value: 'KR', text: '韓国' },
      ],
    },
    {
      name: '北米',
      options: [
        { value: 'US', text: 'アメリカ合衆国' },
        { value: 'CA', text: 'カナダ' },
        { value: 'MX', text: 'メキシコ' },
      ],
    },
  ];

  generateOptions(data);
</script>

このコードは、data 変数に定義されたデータに基づいて optgroup 要素とオプションを動的に生成します。

単純な option 要素のグルーピング

最も単純な代替方法は、単に option 要素を視覚的にグループ化することです。これは、CSSを使用して margin、padding、および border などのプロパティを設定することで実現できます。

<select>
  <option value="FR">フランス</option>
  <option value="DE">ドイツ</option>
  <option value="IT">イタリア</option>
  <option value="JP">日本</option>
  <option value="CN">中国</option>
  <option value="KR">韓国</option>
  <option value="US">アメリカ合衆国</option>
  <option value="CA">カナダ</option>
  <option value="MX">メキシコ</option>
</select>

select optgroup[label="ヨーロッパ"] {
  font-weight: bold;
}

select optgroup[label="アジア"] {
  font-style: italic;
}

select optgroup[label="北米"] {
  text-decoration: underline;
}

この方法は、シンプルな視覚的なグループ化が必要な場合に有効ですが、optgroup 要素が提供するアクセシビリティの利点は得られません。

カスタム要素

optgroup の機能を完全に再現したい場合は、カスタム要素を作成することができます。これは、より複雑なですが、柔軟性と制御性に優れた方法です。

<select-with-groups>
  <group label="ヨーロッパ">
    <option value="FR">フランス</option>
    <option value="DE">ドイツ</option>
    <option value="IT">イタリア</option>
  </group>
  <group label="アジア">
    <option value="JP">日本</option>
    <option value="CN">中国</option>
    <option value="KR">韓国</option>
  </group>
  <group label="北米">
    <option value="US">アメリカ合衆国</option>
    <option value="CA">カナダ</option>
    <option value="MX">メキシコ</option>
  </group>
</select-with-groups>

class SelectWithGroups extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    const select = document.createElement('select');
    this.shadow.appendChild(select);

    this.groups = [];
  }

  connectedCallback() {
    const groups = this.querySelectorAll('group');

    for (const group of groups) {
      const label = group.getAttribute('label');
      const options = group.querySelectorAll('option');

      const optgroup = document.createElement('optgroup');
      optgroup.label = label;

      for (const option of options) {
        optgroup.appendChild(option);
      }

      this.select.appendChild(optgroup);
      this.groups.push(optgroup);
    }
  }
}

customElements.define('select-with-groups', SelectWithGroups);

この方法は、より多くの制御とカスタマイズが可能ですが、ブラウザの互換性と複雑さを考慮する必要があります。

サードパーティライブラリ

optgroup の機能を拡張するサードパーティライブラリがいくつかあります。これらのライブラリは、追加機能やアクセシビリティの向上を提供する場合があります。

これらのライブラリを使用する場合は、ライブラリのドキュメントを参照して、機能と使用方法を確認する必要があります。