8月27日、LogRocketが「How I maximize my daily output with Claude Code」と題した記事を公開した。著者はClaude Codeを1年以上、毎日使い続けてきたエンジニアで、試行錯誤の末に確立した5つのベストプラクティスを紹介している。
著者が最初期にClaude Codeを使い始めた頃は、シンプルなプロンプトを投げるだけだった。生成されたアプリのUIにはバグが多く、コードも保守しづらかった。しかし以下のベストプラクティスを確立してからは、コードの品質が劇的に改善したという。
最も効果が大きかった実践：プランモードで要件を固めてから実装する
エンジニアが新機能を開発するとき、普通はいきなりコードを書き始めない。要件を整理し、技術仕様を定め、アーキテクチャを設計してから実装に入る。Claude Codeでも同じアプローチが有効だ。
たとえば以下のような単純なプロンプトを渡すと、Claudeは自分の学習データを元に「それらしいコード」を生成するが、チームのコーディング規約や使用ライブラリ、アーキテクチャ上の制約を知るすべがない。
Build a React component that fetches and displays a list of all my videos from https://www.youtube.com/@shrutikapoor08
結果として、表面上は動くが内部に問題を抱えたコードが出てくる。重複コード、設計上の欠陥、保守性の低いコンポーネントといった問題だ。
対策はプランモードに切り替えることだ。Claude Codeのターミナル上でShift+Tabを押すとプランモードへ移行できる（バージョンや環境によって操作が異なる場合があるため、公式ドキュメントも合わせて確認されたい）。実装前に以下をClaudeに伝える：
- 開発する機能と各機能の要件
- 使用するライブラリと技術スタック
- 守るべき制約とコーディング規約
- 前提条件
改善後のプロンプト例では、TypeScript・TanStack Query・YouTube Data API v3の使用を明示し、コンポーネントツリーの設計、非同期状態（ローディング・エラー・空状態）の定義、無限スクロールの実装方針、キャッシュ戦略まで事前に指定している。これを受けてClaudeが出力するのはコードではなく、詳細な実装計画書だ。
計画書には、重複動画の排除方法、キーボードナビゲーションのアクセシビリティ対応、スクロール検知の設計など、実装上の判断が文書化される。ここで登場する技術用語を補足しておく。
- **WAI-ARIAのroving tabindex**：リスト・グリッドなどのウィジェット内でキーボードフォーカスを管理するテクニック。
tabindex属性を動的に切り替えることで、方向キーによるナビゲーションを実現する。アクセシビリティ対応の文脈で頻出する - **IntersectionObserver**：DOM要素がビューポートと交差したタイミングを非同期で検知するブラウザAPI。スクロールイベントを直接監視するより低コストで、無限スクロールや遅延読み込みの実装に広く使われる
この計画を承認してから実装に移ると、useEffectが散在するコードではなく、TanStack Queryで統一されたデータフェッチング層を持つ、整理されたコードが出力される。
💡 プランモードでは上位モデルを使って設計を詰め、実装フェーズでは下位モデルに切り替えるとトークンの消費を抑えられる。著者は計画立案と実装でモデルを使い分けることをすすめている。
CLAUDE.mdでセッションをまたいだ記憶を持たせる
Claudeはセッション間でメモリを持たない。前回のセッションで伝えたコーディング規約やアーキテクチャ上の決定は、次のセッションでは完全に消える。
この問題を解決するのがCLAUDE.mdだ。プロジェクトルートの.claude/CLAUDE.mdに置くと、Claudeは毎セッション開始時に自動的に読み込む。著者がこのファイルに記載している内容は以下のとおり：
- よく使うbashコマンド（
npm run dev、npm run testなど） - 技術スタック（React 19、TypeScript、Vite、TanStack Query v5）
- コードスタイルルール（デフォルトエクスポート禁止、インラインスタイル禁止、
any型禁止など） - アーキテクチャ上の意思決定と採用理由（「なぜCRAではなくViteを選んだか」等）
- 絶対ルール（APIキーのコミット禁止、アクセシビリティ属性の省略禁止）
💡 Claudeが間違いを犯したときは、すぐにCLAUDE.mdにルールを追記する。このファイルは失敗と意思決定の積み重ねで育っていく。
スキルとMCPサーバーでコンテキストを拡張する
Claudeの学習データは汎用的なものだ。プロジェクト固有の知識や外部ツールへのアクセスを与えるために、スキルとMCPサーバーを活用できる。
著者がフロントエンド開発で使っているスキルは以下の2つだ：
- **React best practices by Vercel**：ネットワークウォーターフォールの排除、バンドルサイズ削減、不要な再レンダリングの回避など、Vercelが公開するパフォーマンスベストプラクティス集。before/afterのコード例とともにルールが定義されており、Claudeが自動的に適用する
- **Fallow**：JavaScript/TypeScript向けのコードベース静的解析スキル。未使用コード・循環依存・複雑度のホットスポットを検出し、コードベースの健全性を保つのに役立つ。Claude Codeのスキルとして追加することで、実装中にリアルタイムで警告を受け取れる
スキルのインストールは以下のコマンドで行う：
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
インストール済みスキルの確認は /skills コマンドで行える。
MCP（Model Context Protocol）はClaudeを外部ツールやサービスに接続するためのオープンプロトコルで、Anthropicが2024年に発表した。GitHubのPR情報やDBのスキーマなど、プロジェクト固有のコンテキストをリアルタイムで参照させることができる。スキルが「Claudeの振る舞いルールを追加する」ものであるのに対し、MCPは「外部データや外部ツールへのアクセスを与える」ものと理解すると区別しやすい。
サブエージェントを使って並列実装する
Claude Codeは複数のサブエージェントを起動し、独立したタスクを並列処理させることができる。たとえばUIコンポーネントの実装とAPIクライアントの実装のように、互いに依存しない作業を同時に進めることで、実装速度を大幅に上げられる。
著者はこの手法を使う際、タスクの依存関係を事前に整理することをすすめている。あるタスクの完了が別のタスクの前提となる場合は直列で処理し、完全に独立したタスクのみを並列化する。闇雲に並列化するとコンフリクトや矛盾したコードが生まれるため、設計段階での見極めが重要だ。
Gitと連携して安全にイテレーションする
Claude Codeによる変更をこまめにコミットし、問題が起きたときにすぐ巻き戻せる状態を維持する。AIが生成したコードはときに意図しない変更を広範囲に及ぼすことがあるため、人間が書くコード以上にバージョン管理との連携が重要になる。
著者が実践しているのは、機能単位・修正単位でコミットを切る習慣だ。大きな変更をまとめてコミットするのではなく、Claudeが一つのタスクを完了するごとにコミットを作る。これにより、問題のある変更だけをピンポイントでgit revertできる。またブランチを切ってClaude Codeに作業させ、人間がレビューしてからマージするフローも有効だとしている。AIとGitを組み合わせることで、生成コードへの不安を抱えずにアグレッシブにイテレーションできるようになる。
詳細はHow I maximize my daily output with Claude Codeを参照していただきたい。
