Level 4 実践: 文体ルールをメモリに書いて品質を統一する

このチュートリアルについて

概念・仕組みを先に理解したい方は Level 4 の概念ガイドを参照してください。

CLAUDE.md はプロジェクトルートだけに置くものではありません。サブディレクトリに置いた CLAUDE.md はそのディレクトリ以下に適用され、ユーザーホームの ~/.claude/CLAUDE.md は全プロジェクト共通のルールになります。この階層構造を活用して、ブログ記事の文体品質を安定させます。

対象読者: Level 3 を完了した方。複数のブログ記事を生成して文体のばらつきを感じている方。

学習時間の目安: 読了 10分 + 実践 30分

前のレベルからの引き継ぎ

Level 3 では /blog コマンドでブログ記事を量産できるようになりましたが、文体にばらつきが出ていました。

生成した記事の文体ばらつきの例:

記事1: 「型推論とは、〜する機能です。」（断定調）
記事2: 「App Router を使うことができます。」（〜できます調）
記事3: 「以下のようにして設定してみましょう。」（〜しましょう調）

Step 1: ユーザーレベルの CLAUDE.md を作成する

~/.claude/CLAUDE.md はすべてのプロジェクトに適用される個人設定です。個人の好みや共通ルールを書きます。

~/.claude/CLAUDE.md の全文:

# ユーザー設定 — Claude へのグローバル指示

## 私について

フロントエンドエンジニア。Next.js / TypeScript / Tailwind CSS を主に使う。
個人ブログとポートフォリオサイトの開発に Claude Code を使っている。

## コミュニケーションスタイル

- 日本語で回答する
- 簡潔に、要点を先に述べる
- コードの説明は「何をしているか」ではなく「なぜそうするか」を重視する
- 不明点があれば実装前に確認する（推測で進めない）

## コーディングのデフォルト設定

- 言語: TypeScript（型定義を省略しない）
- スタイリング: Tailwind CSS
- テスト: Vitest + Testing Library
- パッケージマネージャー: npm

## 出力形式の好み

- コードブロックにはファイルパスをコメントで入れる
- 差分（diff）形式ではなく、ファイル全体を出力する
- 複数ファイルを変更する場合は、変更するファイルの一覧を最初に提示する

Step 2: ブログ専用の CLAUDE.md を作成する

src/content/posts/CLAUDE.md を作成します。このファイルはブログ記事を生成・編集するときだけ適用される局所ルールです。

src/content/posts/CLAUDE.md の全文:

# ブログ記事ルール

このディレクトリ以下の MDX ファイルはブログ記事です。
記事を生成・編集する際は以下のルールを必ず守ってください。

## 文体

- **常体（だ・である調）ではなく敬体（です・ます調）を使う**
- 断定表現を優先する: 「〜できます」よりも「〜します」「〜なります」
- 「〜してみましょう」「〜してください」は使わない（押しつけに聞こえるため）
- 一文は60字以内を目安にする

## 構成ルール

- 導入で「この記事を読むと何ができるようになるか」を1〜2文で述べる
- h2 見出しは4〜6個（少なすぎると深さが足りない、多すぎると散漫になる）
- 各セクションは「定義 → 例 → 応用」の順で書く
- コード例は必ず実際に動作するものを使う

## 品質基準

- 合計文字数: 1500字以上 3000字以下
- コードブロック: 1記事あたり最低3つ
- 各コードブロックにはファイルパスかコンテキストを示すコメントを入れる

## frontmatter

```yaml
---
title: "記事タイトル"
date: "YYYY-MM-DD"
description: "50〜100字の要約。検索結果のスニペットになる"
tags: ["タグ1", "タグ2"]   # 2〜4個
published: false            # レビュー前は false
---

禁止事項

「〜と思います」「〜かもしれません」などの曖昧表現
実在しないライブラリのバージョン・API の記述
未確認の情報を確認済みのように書くこと


---

## Step 3: /memory で階層が反映されていることを確認する

Claude Code を起動して `/memory` を実行します。

```bash
cd my-portfolio
claude

> /memory

出力例:

Active memory files (in order of priority):
  1. /Users/yourname/.claude/CLAUDE.md           (global)
  2. /Users/yourname/my-portfolio/CLAUDE.md      (project)
  3. /Users/yourname/my-portfolio/src/content/posts/CLAUDE.md  (local)

Current directory: /Users/yourname/my-portfolio

3層が認識されていることを確認できます。優先順位は「ローカル > プロジェクト > グローバル」です。

Step 4: 文体が統一されていることを確認する

/blog コマンドで新しい記事を生成して、文体を確認します。

> /blog React の useEffect を完全理解する

生成された src/content/posts/react-use-effect-guide.mdx の冒頭:

---
title: "React の useEffect を完全理解する"
date: "2026-03-29"
description: "useEffect の動作原理と依存配列の仕組みを理解し、よくある無限ループや意図しない副作用を防ぐ方法を解説します。"
tags: ["React", "Hooks", "useEffect"]
published: false
---

`useEffect` は React のライフサイクルを関数コンポーネントで扱うための Hook です。
この記事では、`useEffect` の動作原理と依存配列の仕組みを理解し、
よくある誤用パターンを回避する方法を解説します。

## useEffect の基本

`useEffect` は、コンポーネントのレンダリング後に副作用（データ取得・DOM 操作・タイマー設定など）を実行するための Hook です。

「〜です。」「〜します。」の敬体で統一され、「〜してみましょう」などのパターンが使われていないことを確認できます。

Step 5: .claude/rules/ へのルール分割

ルールが増えてきた場合は .claude/rules/ ディレクトリに分割して管理し、プロジェクトの CLAUDE.md から @ インポートで読み込む方法があります。

mkdir -p my-portfolio/.claude/rules

.claude/rules/writing-style.md:

# 文章スタイルルール

- 敬体（です・ます調）を使う
- 断定表現を優先する
- 一文は60字以内
- 「〜してみましょう」は使わない

.claude/rules/coding-style.md:

# コーディングスタイルルール

- TypeScript の型定義を省略しない
- コンポーネントは export default function で定義
- スタイリングは Tailwind CSS のみ
- テストファイルは __tests__/ ではなく *.test.tsx で配置

プロジェクトの CLAUDE.md に @ インポートを追加します。

## ルール参照

@.claude/rules/writing-style.md
@.claude/rules/coding-style.md

@ インポートを使うことで、ルールを種類ごとに管理しながら CLAUDE.md をシンプルに保てます。

この時点の my-portfolio

my-portfolio/
├── CLAUDE.md                     # 更新: @インポートを追加
├── .claude/
│   ├── settings.json
│   ├── commands/
│   │   ├── blog.md
│   │   └── review.md
│   └── rules/                    # 追加: ルールファイル
│       ├── writing-style.md
│       └── coding-style.md
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── About.tsx
│   │   └── Skills.tsx
│   └── content/
│       └── posts/
│           ├── CLAUDE.md         # 追加: ブログ専用ルール
│           ├── typescript-type-inference.mdx
│           ├── nextjs-app-router-intro.mdx
│           └── react-use-effect-guide.mdx    # 追加: 文体統一後の記事
└── ~/.claude/CLAUDE.md           # 追加: ユーザーグローバル設定（プロジェクト外）

まとめ: Level 4 で学んだこと

CLAUDE.md は ~/.claude/（グローバル）・プロジェクトルート・サブディレクトリの3層に配置できる
サブディレクトリの CLAUDE.md はそのディレクトリ以下の操作にのみ適用される
@ファイルパス でルールファイルを分割管理できる
/memory で有効な CLAUDE.md の一覧と優先順位を確認できる

次のレベルへ

Level 5 実践: Issue → 実装 → テスト → PR を 1 プロンプトで完結させる