gatsby-theme-blog にタグ機能を追加する

gatsby-theme-blog を使用しているブログにタグ機能を追加しました。タグ機能の実装には Roo Code + GitHub Copilot Pro + Claude 3.5 Sonnet を活用し、効率的に開発を進めることができました。

実装した機能

1. 記事へのタグ付け
2. タグ一覧ページ（/tags）
3. 個別のタグページ（/tags/{tag-name}）
4. 記事一覧ページでのタグ表示

実装の概要

1. GraphQL スキーマの拡張

gatsby-node.js で BlogPost タイプに tags フィールドを追加します：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type BlogPost implements Node {
      tags: [String]
    }
  `)
}

2. タグページの生成

同じく gatsby-node.js で、タグ一覧ページと個別のタグページを生成します：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    {
      allBlogPost {
        group(field: tags) {
          fieldValue
          totalCount
        }
      }
    }
  `)

  // タグ一覧ページの生成
  createPage({
    path: "/tags",
    component: path.resolve("./src/templates/tags.js"),
    context: {
      tags: result.data.allBlogPost.group
    }
  })

  // 個別のタグページを生成
  result.data.allBlogPost.group.forEach((tag) => {
    createPage({
      path: `/tags/${tag.fieldValue}`,
      component: path.resolve("./src/templates/tag.js"),
      context: {
        tag: tag.fieldValue
      }
    })
  })
}

3. Theme UI でのスタイリング

タグのスタイルは Theme UI を使用して定義しました：

badges: {
  tag: {
    backgroundColor: "primary",
    color: "background",
    padding: "4px 8px",
    borderRadius: "4px",
    fontSize: 1,
    fontWeight: "normal",
    textTransform: "lowercase",
    "&:hover": {
      backgroundColor: "secondary",
      transition: "background-color 0.2s"
    }
  }
}

4. ナビゲーションへの追加

gatsby-config.js の menuLinks にタグ一覧ページへのリンクを追加：

menuLinks: [
  {
    name: "Blog",
    url: "/"
  },
  {
    name: "Tags",
    url: "/tags"
  }
]

開発ツール

今回の開発では以下のツールを活用しました：

1. Roo Code: VSCode 拡張として動作する AI アシスタント。コードの作成や修正を対話形式で進められます。

2. GitHub Copilot Pro: Roo Code の API Provider として利用しました（現在 experimental 版が利用可能）。

3. Claude 3.5 Sonnet: GitHub Copilot の Claude 3.5 Sonnet を利用しました。

まとめ

gatsby-theme-blog へのタグ機能の追加は、現代的な開発ツールを活用することで効率的に実装することができました。特に AI ツールは、開発速度の向上に大きく貢献しました。