入れ子テーブルのアコーディオン表示実装時の問題と解決策📊

はじめに (対象読者・この記事でわかること)

この記事は、Web開発者やフロントエンドエンジニアを対象にしています。特にJavaScriptを用いて動的なインタラクティブな機能を実装する方々に役立つ内容です。

この記事を読むことで、入れ子になったテーブルのアコーディオン表示を実装する際に発生しやすい問題点を理解し、具体的な解決策を学ぶことができます。イベントの伝播問題やCSSの優先順位問題といった実装時によく遭遇する課題を回避する方法を習得できます。

最近、複雑なデータを階層的に表示する必要があるプロジェクトに携わる機会があり、その過程でいくつかの課題に直面しました。その経験を活かし、同じような問題に直面している開発者の皆様の参考になればと考え、この記事を執筆しました。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

• HTML/CSSの基本的な知識
• JavaScriptの基本的な知識
• DOM操作の基本的な理解
• イベント処理の基本的な理解

入れ子テーブルのアコーディオン表示の概要と背景

Webアプリケーション開発において、階層的なデータを視覚的に分かりやすく表示する必要があるケースは多々あります。特に、親子関係を持つデータや階層構造を持つ情報を扱う際には、入れ子になったテーブルやリストが使われることがあります。

アコーディオン表示は、このような階層データをコンパクトかつ直感的に表示するためのUIパターンとして広く利用されています。ユーザーが特定の行や項目をクリックすることで、関連する詳細情報や子要素を展開・折りたたみできるため、画面スペースの効率的な利用が可能になります。

しかし、入れ子になったテーブルにアコーディオン機能を実装しようとすると、単純なアコーディオンとは異なる課題が発生します。特に、親要素と子要素の両方にアコーディオン機能を実装する場合、イベントの伝播問題やCSSの優先順位問題などが原因で、期待通りの動作にならないことがあります。

この記事では、そうした入れ子テーブルのアコーディオン表示実装時に発生しやすい問題点と、それらを解決するための具体的な方法について詳しく解説します。

入れ子テーブルのアコーディオン表示の実装方法と問題解決

ステップ1：基本的なアコーディオンの実装

まずは、単純なテーブルのアコーディオン表示を実装してみましょう。以下のようなHTML構造を考えます。

Html

<table class="accordion-table">
  <thead>
    <tr>
      <th>項目</th>
      <th>値</th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-header">
      <td>項目1</td>
      <td>表示ボタン</td>
    </tr>
    <tr class="accordion-content" style="display: none;">
      <td colspan="2">項目1の詳細情報</td>
    </tr>
    <tr class="accordion-header">
      <td>項目2</td>
      <td>表示ボタン</td>
    </tr>
    <tr class="accordion-content" style="display: none;">
      <td colspan="2">項目2の詳細情報</td>
    </tr>
  </tbody>
</table>

続いて、JavaScriptでクリックイベントを処理し、アコーディオンの開閉を実装します。

Javascript

document.addEventListener('DOMContentLoaded', function() {
  const headers = document.querySelectorAll('.accordion-header');

  headers.forEach(header => {
    header.addEventListener('click', function() {
      const content = this.nextElementSibling;
      content.style.display = content.style.display === 'none' ? 'table-row' : 'none';
    });
  });
});

この実装では、.accordion-headerクラスを持つ行をクリックすると、その次の要素である.accordion-contentクラスを持つ行の表示/非表示を切り替えています。これで基本的なアコーディオン機能は完成です。

ステップ2：入れ子テーブルへの適用

次に、このアコーディオン機能を入れ子になったテーブルに適用してみましょう。以下のようなHTML構造を考えます。

Html

<table class="parent-table">
  <thead>
    <tr>
      <th>親項目</th>
      <th>値</th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-header">
      <td>親項目1</td>
      <td>表示ボタン</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="2">
        <table class="child-table">
          <thead>
            <tr>
              <th>子項目</th>
              <th>値</th>
            </tr>
          </thead>
          <tbody>
            <tr class="accordion-header">
              <td>子項目1</td>
              <td>表示ボタン</td>
            </tr>
            <tr class="accordion-content" style="display: none;">
              <td colspan="2">子項目1の詳細情報</td>
            </tr>
            <tr class="accordion-header">
              <td>子項目2</td>
              <td>表示ボタン</td>
            </tr>
            <tr class="accordion-content" style="display: none;">
              <td colspan="2">子項目2の詳細情報</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="accordion-header">
      <td>親項目2</td>
      <td>表示ボタン</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="2">
        <table class="child-table">
          <thead>
            <tr>
              <th>子項目</th>
              <th>値</th>
            </tr>
          </thead>
          <tbody>
            <tr class="accordion-header">
              <td>子項目1</td>
              <td>表示ボタン</td>
            </tr>
            <tr class="accordion-content" style="display: none;">
              <td colspan="2">子項目1の詳細情報</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

このHTML構造では、親テーブルの中に子テーブルが入れ子になっています。基本的なアコーディオンのJavaScriptコードは変更せずに適用してみましょう。

ハマった点やエラー解決

このままでは、親テーブルのアコーディオンヘッダーをクリックした際に、子テーブルのアコーディオンも反応してしまう問題が発生します。これは、イベントの伝播（バブリング）が原因です。

また、CSSの優先順位の問題で、子テーブルの表示/非表示が正しく制御されないケースもあります。さらに、入れ子の階層が深くなるほど、イベント処理が複雑になり、意図しない動作を引き起こす可能性があります。

具体的には、以下のような問題が発生します：

1. 親テーブルのアコーディオンを開閉した際に、子テーブルのアコーディオンも意図せず開閉してしまう
2. 子テーブルのアコーディオンを開閉した際に、親テーブルのアコーディオンも反応してしまう
3. 複数のアコーディオンを同時に開閉しようとした際に、表示状態が不安定になる
4. CSSのスタイルが重なり合い、表示が崩れる

これらの問題は、イベントの伝播制御やDOM構造の理解不足が原因で発生することが多いです。

解決策

これらの問題を解決するためには、以下のような対策が有効です。

1. イベントの伝播を制御する

子要素で発生したイベントが親要素に伝わるのを防ぐために、event.stopPropagation()メソッドを使用します。

Javascript

document.addEventListener('DOMContentLoaded', function() {
  const headers = document.querySelectorAll('.accordion-header');

  headers.forEach(header => {
    header.addEventListener('click', function(event) {
      // イベントの伝播を停止
      event.stopPropagation();

      const content = this.nextElementSibling;
      content.style.display = content.style.display === 'none' ? 'table-row' : 'none';
    });
  });
});

2. 親子関係を明確にする

親要素と子要素で異なるクラス名を使用し、DOM操作の対象を明確にします。

Html

<!-- 親テーブル -->
<table class="parent-table">
  <tbody>
    <tr class="parent-accordion-header">
      <td>親項目1</td>
      <td>表示ボタン</td>
    </tr>
    <tr class="parent-accordion-content">
      <td colspan="2">
        <!-- 子テーブル -->
        <table class="child-table">
          <tbody>
            <tr class="child-accordion-header">
              <td>子項目1</td>
              <td>表示ボタン</td>
            </tr>
            <tr class="child-accordion-content" style="display: none;">
              <td colspan="2">子項目1の詳細情報</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

3. 別々のイベントリスナーを設定する

親要素と子要素で別々のイベントリスナーを設定し、それぞれの動作を独立させます。

Javascript

document.addEventListener('DOMContentLoaded', function() {
  // 親テーブルのアコーディオン
  const parentHeaders = document.querySelectorAll('.parent-accordion-header');
  parentHeaders.forEach(header => {
    header.addEventListener('click', function(event) {
      event.stopPropagation();
      const content = this.nextElementSibling;
      content.style.display = content.style.display === 'none' ? 'table-row' : 'none';
    });
  });

  // 子テーブルのアコーディオン
  const childHeaders = document.querySelectorAll('.child-accordion-header');
  childHeaders.forEach(header => {
    header.addEventListener('click', function(event) {
      event.stopPropagation();
      const content = this.nextElementSibling;
      content.style.display = content.style.display === 'none' ? 'table-row' : 'none';
    });
  });
});

4. CSSで表示制御を明確にする

CSSの優先順位問題を避けるために、クラスセレクタとIDセレクタを組み合わせて、表示制御の対象を明確にします。

Css

/* 親テーブルのアコーディオン */
.parent-accordion-content {
  display: none;
}

.parent-accordion-content.active {
  display: table-row;
}

/* 子テーブルのアコーディオン */
.child-accordion-content {
  display: none;
}

.child-accordion-content.active {
  display: table-row;
}

5. データ属性を活用する

HTML5のデータ属性を活用して、アコーディオンの状態を管理します。

Html

<tr class="accordion-header" data-accordion="parent">
  <td>親項目1</td>
  <td>表示ボタン</td>
</tr>
<tr class="accordion-content" data-accordion="parent">
  <td colspan="2">
    <table class="child-table">
      <tr class="accordion-header" data-accordion="child">
        <td>子項目1</td>
        <td>表示ボタン</td>
      </tr>
      <tr class="accordion-content" data-accordion="child">
        <td colspan="2">子項目1の詳細情報</td>
      </tr>
    </table>
  </td>
</tr>

Javascript

document.addEventListener('DOMContentLoaded', function() {
  // すべてのアコーディオンヘッダーに共通のイベントリスナーを設定
  const headers = document.querySelectorAll('.accordion-header');
  headers.forEach(header => {
    header.addEventListener('click', function(event) {
      event.stopPropagation();

      // データ属性から親子関係を判定
      const accordionType = this.getAttribute('data-accordion');
      const content = this.nextElementSibling;

      // 同じ階層の他のアコーディオンを閉じる（オプション）
      if (accordionType === 'parent') {
        const parentContents = document.querySelectorAll('.accordion-content[data-accordion="parent"]');
        parentContents.forEach(item => {
          if (item !== content) {
            item.classList.remove('active');
          }
        });
      } else if (accordionType === 'child') {
        const childContents = document.querySelectorAll('.accordion-content[data-accordion="child"]');
        childContents.forEach(item => {
          if (item !== content) {
            item.classList.remove('active');
          }
        });
      }

      // 現在のアコーディオンの開閉を切り替え
      content.classList.toggle('active');
    });
  });
});

6. CSS Gridを活用した代替案

テーブル構造ではなく、CSS Gridを活用したアコーディオン表示も検討できます。これにより、より柔軟なレイアウトが可能になります。

Html

<div class="accordion-grid">
  <div class="accordion-header" data-accordion="parent">
    <div>親項目1</div>
    <div>表示ボタン</div>
  </div>
  <div class="accordion-content" data-accordion="parent">
    <div>
      <div class="accordion-header" data-accordion="child">
        <div>子項目1</div>
        <div>表示ボタン</div>
      </div>
      <div class="accordion-content" data-accordion="child">
        <div>子項目1の詳細情報</div>
      </div>
    </div>
  </div>
</div>

Css

.accordion-grid {
  display: grid;
  grid-template-columns: 1fr auto;
}

.accordion-content {
  display: none;
  grid-column: 1 / -1;
}

.accordion-content.active {
  display: block;
}

この方法では、テーブルのセル結合の問題を回避できるため、より複雑なレイアウトにも対応しやすくなります。

まとめ

本記事では、入れにテーブルのアコーディオン表示実装時の問題と解決策 しました。

• イベントの伝播制御が必要であること
• 親子関係を明確にするためのクラス名の使い分けの重要性
• CSSの優先順位を意識したスタイリングの必要性
• データ属性を活用した状態管理の有効性
• CSS Gridを活用した代替案の可能性

この記事を通して、入れ子になったテーブルのアコーディオン表示を実装する際の課題を回避し、安定した動作を実現する方法を学ぶことができたと思います。

今後は、より複雑な階層構造を持つデータの表示方法や、アニメーション効果を追加したインタラクティブなUIの実装方法などについても記事にする予定です。

参考資料

• MDN Web Docs: イベントの伝播
• CSS-Tricks: The Accordion Component
• JavaScript.info: Event bubbling, capturing and delegation