【備忘録】ClaudeのProjectsを使用して簡易なブログアプリを構築する #1（Claude Projectsの準備）

ClaudeのProjects機能を活用しながら個人ブログサイト(GitHub)を構築する備忘録。（※ 記事作成時点で、開発自体はまだ序盤。）
本稿はProjectsの準備について。

目的

• 最優先：自前のブログサイトを持つ
  • Zenn敷いてはQiitaに投稿するまでもないような物をアウトプットする場が欲しかった
  • （ただし、この記事作成時点で結局そのようなものもQiitaへ投稿する方針にした。本記事もそう。）
  • 技術の勉強よりかは早く手軽に構築することをやや重視
• 次点：ClaudeのProjects機能を有効活用した実感を得たい

最低限の要件

• 無料で運用できること
• ブログ記事の一覧表示
• ブログの詳細ページ
• Markdown書式の本文表示に対応
• 保守性の確保
  • デプロイが簡単であること
  • ActionsでCDの実装
  • 投稿記事はサブモジュールのプライベートリポジトリ内にmdファイル形式で簡易に管理
• 等...
  あとは GitHubリポジトリのIssueで随時管理

予め決めていた使用技術

• Next.js & Vercel & GitHub Actions
  • いくつかの技術ブログサイトをめぐってWappalyzerで使用技術を見ていると、Next.js & Vercelの組み合わせをよく見かけていたので、少し調べたところ軽量なブログアプリの開発とデプロイが容易であると思えたため採用。記事をPushしてサイトへ自動反映させるためにActionsも使用。

Claude Projects

Project knowledge

How should Claude respond?

Projects内共通のプロンプト設定

Next.jsで低コストなブログサイトの構築を試みています。
- 添付のproject_structure.txtにプロジェクトのツリー構造を参照の上、回答に必要な各ファイルを熟読した後に私に回答すること
- 既存のファイルを編集するときは、要件を満たす必要最低限の編集にとどめること
- パッケージの追加導入の提案は下記に従うこと
    - 要件を満たす最小限の導入にとどめること
    - 継続的にメンテナンスされていること
    - Starやダウンロード数の観点から信頼性が高いと思われること
    - package.jsonに記載のバージョンと整合すること
なお、私はフロントエンド、JS,TSの初心者なので詳しく教えてください。パッケージやメソッドや関数の意味と用途も丁寧に教えてください。

各行の意図

• Next.jsで低コストなブログサイトの構築を試みています。
  • アプリが軽量であることの認識を合わせる意図
• 添付のproject_structure.txtにプロジェクトのツリー構造を参照の上、回答に必要な各ファイルを熟読した後に私に回答すること
  • project_structure.txt については後述
  • 「必要なファイルを熟読した後に」
    • 主要なファイルをアップロードしていたとしても、そのままだと質問時に参照されるべきファイルが無視されて一から作成されたり、見せろと要求されることがある。いや、アップロードされてるやん、と。
    • このフレーズを入れたことにより、project_structure.txt に明示してあるファイルはおよそちゃんと認知し読んだ上で回答してくれるようになった。
• 既存のファイルを編集するときは、要件を満たす必要最低限の編集にとどめること
  • (主にpythonでの開発時)以前コードを渡して修正してもらうとき、以下のようなことに悩まされた。
    • 既存のコメント文が除去される
    • 変数名や定数名が容赦なく変更される
    • 使用モジュールが勝手に変更される...等
    • とにかく全体的に書き換えられてしまいがち
  • 修正を依頼したコードになるまでの経緯や根拠があることも多いため、質問要件を満たす最小限のコード編集に留めるように指示する。ただし言及されていない箇所に欠陥やリスクがある場合は指摘してくれなくなる。
• パッケージの追加導入の提案は下記に従うこと
  • ここは要求する項目そのままの意味
    • 要件を満たす最小限の導入にとどめること
    • 継続的にメンテナンスされていること
    • Starやダウンロード数の観点から信頼性が高いと思われること
    • package.jsonに記載のバージョンと整合すること
• なお、私はフロントエンド、JS、TSの初心者なので詳しく教えてください。パッケージやメソッドや関数の意味と用途も丁寧に教えてください。
  • これは意味そのまま。こちらが詳しくないという前提で丁寧に解説してほしい。

project_structure.txt

Claudeにファイルの構成を周知するためのファイル。現状と回答が前提とする背景との乖離を低減させる。

• 作成済みファイルを重複で新規提案することを抑止
• モジュールの呼び出し元と先の候補を周知させる
• アプリの技術構成を配慮した回答を促す(Actions, Vercelなど)

本ファイルはルートに配置してあるpythonスクリプト適宜実行して作成する。

プロジェクト構造:
  app/
    - favicon.ico
    - fonts
    - globals.css
    - HomeClient.tsx
    - layout.tsx
    - page.tsx
    - posts
  app/posts/
    - [slug]
  app/posts/[slug]/
    - page.tsx
    - Post.module.css
  lib/
    - api.ts
  .gitignore
  README.md
  .github/workflows/
    - deploy.yml
  .vercel/
    - project.json
    - README.txt
  .next/
    - app-build-manifest.json
    - build-manifest.json
    - cache
    - package.json
    - react-loadable-manifest.json
    - server
    - static
    - trace
    - types
  pages/api/images/
    - [...path].ts

アップロードするファイル

フォルダを跨いで同名のファイルが存在するため、pythonスクリプトの実行で指定の控えフォルダへファイルをコピーする際に、フォルダ階層の情報をファイル名に追記している。

---

次回からは実際にProjects上で質問しながらIssueの機能追加を試みたメモを記述する。