Hello World

ここ最近AIコーディングエージェントを使う機会が増えてきたので、アウトプットと勉強目的も兼ねてブログを作成することにした。

動機

理由は3つ。

1. AIコーディングエージェントとの協働開発

一つ目は、上述の通りAIコーディングエージェントを駆使しアウトプットとして公開したかったからである。 今回はClaude Code（Anthropic社のAIコーディングアシスタント）を利用した。

2. アイデアのストック

二つ目は、話のネタをストックするためである。

「こんなのはどうだろう、面白そうだな。便利そうだな。」という考えが浮かんでもメモに残さず忘れたり、残しても溜まる一方で何もしないということを繰り返してきたので、今度こそ有効活用しようという取り組みである。

これまでの失敗：

  • スマホや紙に残したメモ
  • Slackの個人チャンネル
  • Notionのデータベースなど

3. アウトプット能力の向上

三つ目は、自身のアウトプット能力の向上である。

AI による文章生成がより便利になる中で、むしろ「自分の言葉で書く」ことの価値が高まっていると前々から感じていた。 今のうちから自分の考えを自分の言葉で発信する習慣を身につけておくことは、AIと共存する時代において重要なスキルになると考えている。

このブログの技術スタック

以下の技術スタックで構築されている。

技術用途選定理由
Astro静的サイトジェネレーター高速で軽量、開発体験が良い
Tailwind CSSCSSフレームワークユーティリティファーストで効率的
BiomeLinter/Formatter高速で設定がシンプル
BunJavaScript RuntimeNode.jsより高速
GitHub Pagesホスティング無料で簡単にデプロイ可能

特筆すべき点は2点。

・Node.jsを使わずBunで開発環境を統一した。

パッケージのインストールやビルドが高速で、開発体験が向上した。

・開発環境でセルフCIスクリプトを作成し実行できるようにした。

これは他のリポジトリでClaude CodeやGemini CLIで色々と遊んでいた結果、GitHub Actionsの無料枠を超過したためである。。。

開発の過程でClaude Codeをどのように利用したか

最初は「GitHub Pagesでブログを作りたい」という漠然とした要望から、以下のような過程を経て完成に至った。

1. 初期セットアップ

# Astroのテンプレートから開始
bun create astro@latest

2. ローカルでのCI/CDの実行環境の整備

途中でGitHub Actionsの無料枠を超過したため、ローカル環境でCIを実行する仕組みを構築してもらった。

# 並列実行でタスクを高速化
bun run ci
  • typecheck、lint、format、testを並列実行
  • タイムアウト設定時間を短くし、Claude Codeへのフィードバックを効率化した
  • 視覚的な実行結果表示（✓/✗、実行時間、エラー詳細）
  • --skip や --only オプションで柔軟な実行制御

実際の実行結果はこのような見た目：

セルフCI実行結果

3. 不要な機能の削除とシンプル化

開発を進める中で、以下の機能を削除してシンプルにした。

  • PWA機能（Service Worker、オフライン対応）
  • 不要なパッケージ（sharp、marked）
  • 複雑なE2Eテスト（シンプルなページ遷移確認のみに）

これにより、ビルドが高速化し、メンテナンスが容易になった。 (今後気が向いたら機能追加するかも知れない。)

4. ブログ名の決定

Claude Codeが提案した候補から「Code & Living」を選択した。

  • Tech Craft Lab
  • Simple Dev Notes
  • Build & Learn
  • Dev Minimalist
  • Code & Living ✅

技術と日常を繋ぐというネーミングから採用。また、調べた限り商標として名前が使用されていなかったので。(どうでも良い)

5. 文章校正 with Google Gemini

詳細は割愛。

MCP（Model Context Protocol）の活用

このブログの開発では「Playwright MCP」を活用した。

Playwright MCPのインストールと利用例は以下の通り。

# Playwright MCPのインストール
claude mcp add playwright npx @playwright/mcp@latest

実際の動作確認では、以下のようなコマンドをClaude Code内で実行：

  • ページナビゲーション: browser_navigate
  • スクリーンショット撮影: browser_take_screenshot
  • ブラウザサイズ変更: browser_resize （レスポンシブテスト）
  • 要素のクリック: browser_click

自分の手で動作確認することなくClaude Codeに任せることができた。

https://zenn.dev/sesere/articles/4c0b55102dcc84 の記事を参考にさせていただきました。

Claude Code上でのGitHub CLIの実行

GitHub CLI（gh）との連携により、通常のgitコマンドでは実現できない以下のGitHub特有の操作が可能だった。

  • リポジトリの作成: gh repo create でGitHubリポジトリを作成
  • Pull Requestの作成: gh pr create でPRを作成
  • GitHub Actionsの状態確認: gh run list でワークフローの実行状態を確認

また本ブログ開発では利用しなかったが、別リポジトリでは以下の操作も行なっていたので備忘録として記載しておく。

  • Issueの管理: gh issue でIssueの作成や更新、削除
  • PRレビューコメントへの対応: Gemini Code Reviewからの指摘の修正・返信やレビューコメントのステータスの一括更新(resolve/outdatedなど)。
  • リリースの作成: gh release create でタグ付けとリリースノートを同時に作成

これらの機能により、ブラウザでGitHubを開くことなく、ほぼすべての操作をCLI上で完結できた。

最後に

AIコーディングエージェントを使いながら、GitHub CLIや最近のFEトレンドなどを知れたのは大きな学びだった。

※自分はサーバーサイドエンジニアのためフロントエンド領域にはそれほど明るくない

Hello, World! から始まるこのブログが、誰かの参考になれば幸いである。