TL;DR

  • 気軽なアウトプットのために個人ブログを作成
  • Astro + マークダウンファイルでシンプルな構成
  • 全てAI（Claude）とspec-kitを使って開発

はじめに

個人ブログを作りました。以前から欲しいなと思っていましたが、面倒が勝ってしまっていました。

ですが、AIを使えば一瞬で出来そうと思ったので、使ってみたかった技術を使いながら作ってみました。

すでにいくつか投稿済みですが、作った記念に、なぜ作ったのか、どんな技術を使ったのか、どう作ったのかをまとめておきます。

なぜ作ったのか

個人ブログを作った理由は主に3つあります。

1. 気軽にアウトプットしたい

日々の開発で学んだことや、考えていることを気軽にアウトプットしたいと思っていました。

2. 既存プラットフォームの懸念

ZennやQiitaのような素晴らしいサービスもありますが、少し懸念がありました。

もし記事が広まって、間違った情報や意図しない読み取られ方をして炎上したりすると怖いということです。 そうなると、見栄えも気にして書く必要があるので気軽にアウトプットするのが難しくなります。

3. 完全に見られないのも寂しい

とはいえ、メモ帳などに書いて全く誰にも見られないのは悲しいので、GitHubなどにリンクを貼っておいて、たどり着いた人に見てもらえたら嬉しいという思いで開発することにしました。

機能紹介

このブログには以下の機能を実装しました。

1. 一覧と詳細

トップページには記事の一覧が表示され、各記事をクリックすると詳細ページに遷移します。

2. マークダウン

記事執筆に便利な以下のマークダウン記法をサポートしています。

  • GitHub Flavored Markdown - 表、取り消し線、タスクリストなど
  • 脚注 - 詳細な説明を脚注として追加可能1
  • カスタムコンテナ - :::note や :::warning などの装飾ブロック
  • シンタックスハイライト - コードブロックの表示
  • 画像キャプション - 画像に説明文を追加可能

3. キーワード検索

Pagefindを使った全文検索機能を実装しています。記事のタイトルや本文から素早く目的の記事を見つけることができます。

4. タグによる絞り込み

記事に設定したタグを使って絞り込み機能を実装しています。

5. ダークモード

ライト/ダークモードの切り替えに対応しています。システムの設定に応じて自動的にテーマが切り替わり、手動での切り替えも可能です。

今後も使いながら必要な機能を追加していく予定です。

技術構成

このブログは以下の技術で構成されています。

  • Astro - 静的サイトジェネレーター
  • TypeScript - 型安全性
  • pnpm - パッケージマネージャー
  • Pagefind - 静的サイト向け検索エンジン
  • remark - マークダウンパーサー
  • rehype - HTMLプロセッサー
  • oxlint - リンター
  • oxfmt - フォーマッター
  • Cloudflare Pages - ホスティング

記事管理

記事はすべてマークダウンファイルで管理しています。

  • UUIDベースのURLで記事を一意に識別
  • frontmatterでメタデータ（タイトル、日付、タグなど）を管理
  • ファイル名は YYYY-MM-DD-タイトル.md の形式で管理

Claude Code × Spec Kit

このブログは、ほぼ100%AIで開発しました。

  • Claude - Anthropic社のAIアシスタント
  • spec-kit - Spec-Driven開発のためのツールキット

開発プロセス

spec-kitを使用してSpec-Driven開発を実践しました。spec-kitのワークフローに沿って、Claudeと対話しながら開発を進めました。

  1. /speckit.specify で仕様書を作成

    • ブログに必要な機能や要件を整理
    • ユーザーストーリーや制約事項を明文化
    • specs/*/spec.md として仕様書を生成

  2. /speckit.plan で技術選定と設計

    • Astroを静的サイトジェネレーターとして選定
    • マークダウンベースの記事管理システムの設計
    • アーキテクチャや技術スタックの決定
    • specs/*/plan.md として設計書を生成

  3. /speckit.tasks でタスク分割

    • 実装を小さなタスクに分解
    • 優先順位の決定と依存関係の整理
    • specs/*/tasks.md としてタスクリストを生成

  4. /speckit.implement で実装

    • タスクに沿って順次実装
    • Claudeがコードを生成し、レビューも実施

仕様書や設計書があることで、Claudeに具体的な指示を出しやすく、また実装の意図を明確に保つことができました。

さいごに

個人ブログができたので、これから技術的なことから趣味のことまで、気軽にアウトプットしていこうと思います。

References

  1. このような脚注が使えます ↩