全てのタグ一覧の表示

前回の説明のとおり、Eleventyには、標準のままでは、登録されている全てのタグ一覧を表示する方法がありません。

これを実現する為には、若干のカスタマイズが必要です。

👉 カスタマイズには、以下の３つの方式をとることが可能です。

前提（３つの方式）

  1. key方式

collections のキーをそのまま使う

  1. Set方式

記事データ（item.data.tags）からタグを収集

  1. collection方式

addCollection("tagList") でタグ一覧を定義

1. key方式

Eleventyが作ったコレクションの名前をそのまま使って、新たにカスタムフィルターを作成して利用します。

例：

まず、.eleventy.jsに下記のカスタムフィルター（getAllTags）定義を作成します。

module.exports = function (eleventyConfig) {
              ：
  eleventyConfig.addFilter("getAllTags", function(collections) {
    const exclude = ["all", "nav", "post", "posts"];
    return Object.keys(collections).filter(k => !exclude.includes(k));
  });
              ：
};

👉 "all", "nav", "post", "posts"はEleventyが自動で作成するタグの為、省いています。

次に、このカスタムフィルター（getAllTags）を利用した全タグ一覧ページを作成します。

---
title: 全タグ一覧
date: 2026-05-15
layout: layout.njk
---

<h1>🔖 {{ title }}</h1>

<ul>
{% for tag in collections | getAllTags %}
  {% if collections[tag] and collections[tag].length %}
    <li>
  　　<a href="/tags/{{ tag }}/">{{ tag }}</a>
    </li>
  {% endif %}
{% endfor %}
</ul>

👉 非常にシンプルなカスタマイズで、全タグの一覧表が作成できます。

2. Set方式

記事データ（item.data.tags）からタグを収集し、新たにカスタムフィルターを作成して利用します。

例：

まず、.eleventy.jsに下記のカスタムフィルター（getAllTags）定義を作成します。

module.exports = function (eleventyConfig) {
              ：
  const excluded = ["all", "nav", "post", "posts"];
  eleventyConfig.addFilter("getAllTags", function(collection) {
    let tagSet = new Set();
    collection.forEach(item => {
      if ("tags" in item.data) {
        let tags = item.data.tags;
        tags = Array.isArray(tags) ? tags : [tags];
        tags.forEach(tag => {
          if (!excluded.includes(tag)) {
            tagSet.add(tag);
          }
        });
      }
    });
    return [...tagSet];
  });
              ：
};

👉 "all", "nav", "post", "posts"はEleventyが自動で作成するタグの為、省いています。

次に、このカスタムフィルター（getAllTags）を利用した全タグ一覧ページを作成します。

---
title: 全タグ一覧
date: 2026-05-15
layout: layout.njk
---

<h1>🔖 {{ title }}</h1>

<ul>
{% for tag in collections | getAllTags %}
  {% if collections[tag] and collections[tag].length %}
    <li>
  　　<a href="/tags/{{ tag }}/">{{ tag }}</a>
    </li>
  {% endif %}
{% endfor %}
</ul>

👉 key方式に比べ、カスタムフィルターのカスタマイズが少し複雑になりますが、正確な全タグの一覧表が作成できます。

3. collection方式

記事データ（item.data.tags）からタグを収集し、addCollection("tagList") で、新たにカスタムフィルターを作成して利用します。

例：

まず、.eleventy.jsに下記のカスタムコレクション（tagList）定義を作成します。

module.exports = function (eleventyConfig) {
              ：
  eleventyConfig.addCollection("tagList", function (collectionApi) {
    let tagSet = new Set();
    collectionApi.getAll().forEach(item => {
      if ("tags" in item.data) {
        let tags = item.data.tags;
        if (typeof tags === "string") tags = [tags];
        tags = tags.filter(tag => !["all", "nav", "post", "posts"].includes(tag));
        for (const tag of tags) tagSet.add(tag);
      }
    });
    return [...tagSet];
  });
              ：
};

👉 "all", "nav", "post", "posts"はEleventyが自動で作成するタグの為、省いています。

次に、このカスタムコレクション（tagList）を利用した全タグ一覧ページを作成します。

---
title: 全タグ一覧
date: 2026-05-15
layout: layout.njk
---

<h1>🔖 {{ title }}</h1>

<ul>
  {% for tag in collections.tagList %}
    <li>
      <a href="/tags/{{ tag }}">#{{ tag }}</a>
      <small>({{ collections[tag].length }} 件)</small>
    </li>
  {% endfor %}
</ul>

👉 これで、Set方式とほぼ同様のカスタマイズで、再利用性を高め、全タグの一覧表が作成できます。

利用都度、毎回作成されるKey方式、Set方式のカスタムフィルターと違い、カスタムコレクション（tagList）は、一度のみの作成で、再利用可能です。その為、パフォーマンスが高いです。

３つの方式の比較表

では、どの方式を使うのが良いのでしょうか？

下記に３つの方式の比較を示します。

観点 key方式 Set方式 collection方式
元データ collectionsのキー（構造） 記事の tags（実データ） 記事データ（内部はSet方式）
正確性 △（不要なキーが混ざる） ◎（実際に使われているタグのみ） ◎（Set方式ベースなので正確）
シンプルさ ◎（一番シンプル） △（コードが少し長い） ○（最初だけ定義が必要）
実務適性 △（小規模・検証向き） ◎（安全・柔軟） ◎（最も実務向き）

もう一段わかりやすく

key方式

👉 「見た目ベース」

  • Eleventyが用意した箱の名前を見るだけ
  • 余計なものが混ざる可能性あり

Set方式

👉 「事実ベース」

  • 実際の記事を見てタグを集める
  • 最も信頼できる

collection方式

👉 「完成されたデータ」

  • Set方式で作った結果を保存して再利用
  • 実務ではこれが最適

実務での結論

👉 最終的には collection方式がベスト

理由：

  • 正確（Set方式ベース）
  • 再利用できる
  • パフォーマンスが良い（毎回計算しない）

まとめ

  • key方式 = とりあえず拾う
  • Set方式 = 正しく集める
  • collection方式 = ちゃんと使うために保存する

おすすめの流れ（実務思考）

  • 最初：key方式（理解用）
  • 次：Set方式（正確さ理解）
  • 最終：collection方式（本番）

(つづく)