タグ機能追加の実践

今回の追加内容

以前作成したブログサイトをカスタマイズし、タグ機能を追加していきます。

全タグの一覧ページ表示
全タグの一覧ページからタグ毎の投稿記事一覧ページへの遷移
タグ毎の投稿記事一覧ページ表示
タグ毎の投稿記事一覧ページから各投稿ページへの遷移

を行えるようにします。

今回追加するタグ機能の動きの確認

まずは、今回追加するタグ機能の実行イメージを下記のボタンを押して確認してください。

タグ機能の追加（実践）

今回、修正するフォルダーとファイルは下記の通りです。

👉 前回までのブログサイト構築の実践で作成したプロジェクトを引き続き使用していきます。

C:\users\test\blog-dev
│  .eleventy.js               → 今回編集するEleventy定義
│  package-lock.json
│  package.json
│  
├─node_modules
│  │  .package-lock.json
│  │  
│  ├─.bin
│  │      acorn
│  ：      (以降省略)
│              
├─src
│  │  index.njk              → 今回編集する先頭ページ
│  │  posts.njk
│  │  style.css
│  │  tags.njk               → 今回作成するタグ毎の記事一覧ページ
│  │  
│  ├─posts
│  │      hello.md           → 今回編集する最初の記事データ
│  │      second.md          → 今回編集する２つ目の記事データ
│  │      
│  ├─tags
│  │      index.njk          → 今回作成する全タグ一覧ページ
│  │      
│  ├─_data
│  │      tagDefine.js       → 今回作成するタグ読み替え定義
│  │      
│  └─_includes
│          layout.njk
│          
└─_site
    │  index.html
    │  style.css
    │  
    └─posts
        │  index.html
        │  
        ├─hello
        │      index.html
        │      
        └─second
                index.html

タグ機能追加手順

下記の手順に従って、説明していきます。

ターミナル起動
投稿記事へのタグ付与
データフォルダーの作成
タグ読み替え定義の作成
タグ用フォルダーの作成
タグの一覧ページの作成
タグ毎の記事一覧ページの作成
先頭ページに全タグの一覧ページへの遷移追加
Eleventy定義ファイルにタグカスタムコレクション追加
Eleventyの起動
ブラウザによる表示確認

1. ターミナル起動

Windowsの場合：

「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。

スタートボタンを右クリック
「ターミナル」をクリック

👉 これからの作業はすべて起動された「ターミナル」のウインドウに入力します

2. 投稿記事へのタグ付与

プロジェクトの投稿記事フォルダー(例：C:\Users\test\blog-dev\src\posts)に移動し、投稿記事を編集します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

cd C:\Users\test\blog-dev\src\posts
notepad hello.md

メモ帳で開かれた、投稿記事のフロントマターに、tagsの行を追加して保存：

---
title: はじめての投稿
date: 2026-04-01
layout: layout.njk
tags: はじめて
---

こんにちは！これは最初の投稿です。

続いて、２つ目の記事を編集します。

以下を入力：

notepad second.md

メモ帳で開かれた、投稿記事のフロントマターに、tagsから始まる３行を追加して保存：

---
title: ２回目の投稿
date: 2026-04-02
layout: layout.njk
tags:
  - ２回目
  - JavaScript
---

２回目の投稿です。
JavaScriptでブログサイトを構築していきます。

👉 動作確認用に複数タグを追加しています。

3. データフォルダーの作成

プロジェクトのソースフォルダー（C:\Users\test\blog-dev\src）に戻り、データフォルダーを作成します。名前は、”_data”で作成します。

以下を入力：

cd ../
mkdir _data

作成したデータフォルダーに移動します。

以下を入力：

cd _data

4. タグ読み替え定義の作成

タグ読み替え定義を作成します。名前は、”tagDefine.js”で作成します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

notepad tagDefine.js

メモ帳にて、以下を入力して保存：

module.exports = {
  "はじめて": {
    yomi: "hajimete"
  },
  "２回目": {
    yomi: "2-kaime"
  },
  "JavaScript": {
    yomi: "javascript"
  },
};

5. タグ用フォルダーの作成

プロジェクトのソースフォルダー（C:\Users\test\blog-dev\src）に戻り、タグ用フォルダーを作成します。名前は、”tags”で作成します。

以下を入力：

cd ../
mkdir tags

作成したタグ用フォルダーに移動します。

以下を入力：

cd tags

6. タグの一覧ページの作成

タグの一覧ページを作成します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

notepad index.njk

メモ帳にて、以下を入力して保存：

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

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

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

👉 Eleventyでは、投稿記事のフロントマターに定義されている全ての tags を自動で収集し、”collections” という形で参照可能です。

上記の本文では、全てのタグを”collections”のキーから順番に tag 変数に取り出し、一覧としてリンクを作成しています。リンク作成の際、タグの読み替え定義（tagDefine）を使い、タグ名の日本語 → ローマ字変換を行っています。

7. タグ毎の記事一覧ページの作成

タグ毎の記事一覧ページを作成します。今回は、ページング機能を利用して作成します。名前は、”tags.njk”で作成します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

notepad tags.njk

メモ帳にて、以下を入力して保存：

---
layout: layout.njk
title: タグ一覧
pagination:
  data: collections.tagList
  size: 1
  alias: tag
permalink: "/tags/{{ tagDefine[tag].yomi or tag }}/index.html"
---

<h1>🔖 #{{ tag }}</h1>

<ul>
  {% for post in collections[tag] %}
    <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {% endfor %}
</ul>

👉 ページング処理にて、タグ毎の記事一覧が作成されます。

8. 先頭ページにタグの一覧ページへの遷移追加

プロジェクトのソースフォルダー(例：C:\Users\test\blog-dev\src)に移動し、先頭ページを編集します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

cd ../
notepad index.njk

メモ帳で開かれた、投稿記事の本文の投稿記事一覧へのリンクの下に、<br>タグとタグ一覧ページへのリンク行を追加して保存：

---
title: ブログサイト構築の実践
date: 2026-04-24
layout: layout.njk
---

<a href="/posts/">投稿記事一覧</a>
<br>
<a href="/tagss/">タグ一覧</a>

Eleventy定義にタグのカスタムコレクション追加

Eleventy定義を編集します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

notepad .eleventy.js

メモ帳で開かれた、Eleventy定義に、タグのカスタムコレクションを追加して保存：

module.exports = function (eleventyConfig) {

  eleventyConfig.addCollection("posts", function (collectionApi) {
    return collectionApi.getFilteredByGlob("src/posts/*.md");
  });

  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];
  });

  eleventyConfig.addPassthroughCopy("src/style.css");

  return {
    dir: {
      input: "src",
      output: "_site",
      includes: "_includes"
    },
    markdownTemplateEngine: "njk",
    htmlTemplateEngine: "njk"
  };
};

9. Eleventyの起動

プロジェクトのフォルダー（例：C:\Users\test\blog-dev）に移動し、古い _site フォルダーを削除後、Eleventyを起動します。

以下を入力：

cd ../
rmdir _site -Recurse
npx eleventy --serve

👉 HTMLファイルが作成され、テスト用のサーバーが起動されます。

10. ブラウザによる表示確認

ブラウザ（Edge または Chrome）を起動し、下記URLにアクセスします。

http://localhost:8080/

先頭ページが表示され、今回追加したタブ機能の動作を確認できると思います。

今回作成したサイトのフォルダーとファイル構成

ここまでの作業で下記のようなディレクトリ構成とファイルが作成されます。

C:\users\test\blog-dev
│  .eleventy.js               → 今回編集したEleventy定義
│  package-lock.json
│  package.json
│  
├─node_modules
│  │  .package-lock.json
│  │  
│  ├─.bin
│  │      acorn
│  ：      (以降省略)
│              
├─src
│  │  index.njk              → 今回編集した先頭ページ
│  │  posts.njk
│  │  style.css
│  │  tags.njk               → 今回作成したタグ毎の記事一覧ページ
│  │  
│  ├─posts
│  │      hello.md           → 今回編集した最初の記事データ
│  │      second.md          → 今回編集した２つ目の記事データ
│  │      
│  ├─tags
│  │      index.njk          → 今回作成した全タグ一覧ページ
│  │      
│  ├─_data
│  │      tagDefine.js       → 今回作成したタグ読み替え定義
│  │      
│  └─_includes
│          layout.njk
│          
└─_site
    │  index.html
    │  style.css
    │  
    ├─posts
    │  │  index.html
    │  │  
    │  ├─hello
    │  │      index.html
    │  │      
    │  └─second
    │          index.html
    │          
    └─tags
        │  index.html        → Eleventyにより作成された全タグ一覧ページ
        │  
        ├─2-kaime
        │      index.html    → Eleventyにより作成されたタグ毎の記事一覧ページ
        │      
        ├─hajimete
        │      index.html    → Eleventyにより作成されたタグ毎の記事一覧ページ
        │      
        └─javascript
                index.html    → Eleventyにより作成されたタグ毎の記事一覧ページ

✒️ タグ機能追加の実践

今回の追加内容

今回追加するタグ機能の動きの確認

タグ機能の追加（実践）

タグ機能追加手順

1. ターミナル起動

2. 投稿記事へのタグ付与

3. データフォルダーの作成

4. タグ読み替え定義の作成

5. タグ用フォルダーの作成

6. タグの一覧ページの作成

7. タグ毎の記事一覧ページの作成

8. 先頭ページにタグの一覧ページへの遷移追加

Eleventy定義にタグのカスタムコレクション追加

9. Eleventyの起動

10. ブラウザによる表示確認

今回作成したサイトのフォルダーとファイル構成

🔗 関連記事

🆕 最新の記事

📚 カテゴリー

🔖 タグ

📜 重要事項

✒️ タグ機能追加の実践

今回の追加内容

今回追加するタグ機能の動きの確認

タグ機能の追加（実践）

タグ機能追加手順

1. ターミナル起動

2. 投稿記事へのタグ付与

3. データフォルダーの作成

4. タグ読み替え定義の作成

5. タグ用フォルダーの作成

6. タグの一覧ページの作成

7. タグ毎の記事一覧ページの作成

8. 先頭ページにタグの一覧ページへの遷移追加

Eleventy定義にタグのカスタムコレクション追加

9. Eleventyの起動

10. ブラウザによる表示確認

今回作成したサイトのフォルダーとファイル構成

🔗 関連記事

🆕 最新の記事

📚 カテゴリー

🔖 タグ

📜 重要事項

【 タグ機能追加の実践 】

【　タグ機能追加の実践　】