スペースマーケット Engineer BlogPublicationへの投稿
🐡

Claude Codeを使い始めた人向けの効率化ガイド

jin
に公開
AI
Claude
Claude Code
subagent
tech

こんにちは！スペースマーケットのjinです🐶

Claude Codeを使い始めたけれど、なんとなく質問機能しか使えていない…そんな方も多いのではないでしょうか？（一週間前の私の話ですが）

今回は、Claude Codeの効率化テクニックを、実際の使用例とともにまとめてみました。公式ドキュメントでは目立たないものの、知っていると開発効率が大幅に向上する機能ばかりです！

1. @ファイルタグ

ファイルタグ機能のスクリーンショット

@記号を使うことで、ファイルの全体パスを知らなくても素早くファイルを参照することができます。

  1. ファイル選択の効率化: @後ファイル名を入力すると、ファイル一覧が表示され、上下矢印キーで目的のファイルを選択できます
  2. 複数ファイル同時参照: スペースで区切って複数ファイルを一度に指定可能

2. #記号でルール追加

開発中に新しいルールを思いついた時、こんな風に入力してみてください：

#でルール追加

すると、Claude Codeがこのルールをどこに保存するか尋ねてきます：

  • プロジェクトメモリ（./CLAUDE.md）- Gitにチェックイン
  • ローカルプロジェクトメモリ（./CLAUDE.local.md）- gitignore
  • ユーザーメモリ（~/.claude/CLAUDE.md）- 全プロジェクト共通

効果的な使用例：

# TypeScriptの型定義は常にinterfaceよりもtypeを優先する
# テスト関数名は「should_動作_when_条件」の形式で命名する
# エラーハンドリングでは必ずログを出力してからthrowする

3. 画像添付機能

Claude Codeは画像を分析して、具体的なフィードバックや改善提案を提供できます。

画像添付して質問

画像添付の方法

  1. クリップボードから貼り付け: Control+Vで画像を貼り付け（MacでもCmd+VではなくControl+V！）
  2. ドラッグ&ドロップ: 画像ファイルを直接ドラッグしてClaude Codeに投下（うまくできないならShiftを押しながらやってみてください）
  3. ファイルパス指定: /path/to/image.pngのようにパスを指定して分析依頼

活用例

  • UI設計: Figmaのデザイン目込みからコンポーネント実装
  • デバッグ: エラー画面やログ画面の分析
  • データ可視化: グラフや表の内容理解と改善提案

4. カスタムスラッシュコマンド - 繰り返し作業を自動化

あなただけのカスタムコマンドを作成できます：

> /review @docker-compose.yml

スラッシュコマンド

このコマンドを実行すると、事前に定義したコードレビュープロセスが自動実行されます。

活用例

1. プロジェクト専用コマンド（チーム共有）

.claude/commands/review.mdファイルを作成：

## コードレビュータスク

以下の手順で包括的なコードレビューを実行してください：

1. 最近の変更がTypeScriptとReactの規約に従っているかチェック
2. 適切なエラーハンドリングとローディング状態を確認
3. アクセシビリティ標準が満たされているか確認
4. 新機能のテストカバレッジをレビュー
5. セキュリティ脆弱性をチェック
6. パフォーマンスへの影響を検証
7. ドキュメントが更新されているか確認

確立されたコード品質チェックリストを使用し、新しいパターンを発見した場合はCLAUDE.mdに追加してください。

2. 個人用グローバルコマンド

~/.claude/commands/explain.mdファイルを作成：

## コード詳細解析

以下のコード/ファイルについて詳しく説明してください: $ARGUMENTS

解析内容：
1. **全体的な目的と役割**
2. **主要な関数/メソッドの動作**
3. **依存関係とデータフロー** 
4. **潜在的な改善点**
5. **セキュリティやパフォーマンスの考慮事項**

説明方法：
- 新入開発者にも理解できるよう丁寧に説明してください
- 必要に応じてデータフローを図解で分かりやすく表現してください
- 複雑な部分は具体例を交えて説明してください
- コードの「なぜそうなっているのか」という理由も含めて解説してください

3. 引数付きコマンド例

.claude/commands/fix-issue.md:

GitHubイシュー #$ARGUMENTS を分析して修正してください。

手順：
1. `gh issue view $ARGUMENTS` でイシュー詳細を取得
2. 問題の内容を理解
3. 関連するコードベースを検索
4. 問題を解決する必要な変更を実装
5. テストを作成して動作確認
6. リントとタイプチェックをパス
7. 説明的なコミットメッセージを作成
8. プルリクエストを作成

すべてのGitHub関連操作にはGitHub CLI (`gh`) を使用してください。

4. より高度なコマンド例

.claude/commands/deploy.md:

## デプロイメント準備

$ARGUMENTS 環境へのデプロイメントを準備してください。

事前チェック：
- [ ] 全テストが通過しているか確認
- [ ] セキュリティ監査の実行
- [ ] パフォーマンステストの実行
- [ ] データベースマイグレーションの確認
- [ ] 環境変数の設定確認
- [ ] デプロイメントノートの作成

実行手順：
1. ビルドプロセスの実行
2. アセットの最適化
3. ヘルスチェック用エンドポイントの確認
4. ロールバック計画の準備
5. モニタリング設定の確認

完了後はデプロイメントサマリーを作成してください。

5. CLAUDE.md - プロジェクトの記憶装置

CLAUDE.mdファイルは、Claude Codeの「記憶」として機能します。一度設定すれば、すべてのセッションで自動的に読み込まれ、プロジェクト固有のルールや情報が共有されます。

迷ったら最初は/initコマンドで自動的にCLAUDE.mdを生成してもらうことも可能です！

設定方法と実用例

1. 基本的なCLAUDE.mdテンプレート

プロジェクトルートにCLAUDE.mdを作成：

# プロジェクト概要
このプロジェクトは次世代の○○管理システムです。

## 技術スタック
- フロントエンド: React 18 + TypeScript + Tailwind CSS
- バックエンド: Node.js + Express + Prisma
- データベース: PostgreSQL
- テスト: Jest + React Testing Library

## 重要なコマンド
- `npm run dev`: 開発サーバー起動
- `npm run build`: プロダクションビルド
- `npm run test`: テスト実行
- `npm run typecheck`: TypeScript型チェック

## コーディング規約
- ES modules (import/export) を使用し、CommonJS (require) は避ける
- 可能な限り分割代入を使用 (例: import { foo } from 'bar')
- 関数コンポーネントはアロー関数で定義
- CSSクラス名はkebab-caseを使用

## ワークフロー
- 機能完了時は必ずタイプチェックを実行
- パフォーマンス重視のため、単一テストを実行し、全テストスイートは避ける
- プルリクエストはrebaseよりもmergeを推奨

## 重要なファイル
- @src/config/database.ts - データベース設定
- @src/utils/api.ts - API共通関数
- @docs/deployment.md - デプロイメント手順

## 触ってはいけないもの
- レガシー認証システム (src/legacy/auth/*) - 動作中なので変更禁止
- webpack.config.js - 設定変更時は必ずチームに相談
- .github/workflows/* - CI/CD設定変更時は DevOps チームに確認

2. 階層構造の活用

ルートレベル: ./CLAUDE.md (プロジェクト全体)
サブディレクトリ: ./tests/CLAUDE.md (テスト固有)

./tests/CLAUDE.mdの例：

# テスト固有のガイドライン

## テスト哲学
- 単体テストよりも統合テストを重視
- UIテストではdata-testid属性を使用
- モックは最小限に抑制

## テストユーティリティ
- @testing-library/react でコンポーネントテスト
- MSW でAPIモック
- Cypress でE2Eテスト

## よく使うヘルパー関数
- @tests/utils/render.tsx - カスタムレンダー関数
- @tests/mocks/api.ts - API モック定義

3. グローバル設定

~/.claude/CLAUDE.md (全プロジェクト共通):

Always respond in Japanese.

個人的には回答する言語をここで指定します。これでいつでも日本語で返してくれます！

7. Subagent（サブエージェント）

Subagentは、特定のタスクに特化したAIアシスタントです。メインの会話から独立したコンテキストを持ち、より効率的で専門的な作業を可能にします。

設定方法

1. 基本的な作成コマンド

/agents

フロントエンドのsubagent生成

作りたいサブエージェントの名称だけ伝えるとClaudeが良い感じでMarkdownファイルで作ってくれます。もしエージェントの役割を細かく設定したい場合はもちろん直接作成することも可能です！

2. ファイル構造

Subagentは以下の場所にMarkdownファイルとして保存されます：

タイプ 場所 スコープ 優先度
プロジェクトレベル .claude/agents/ 現在のプロジェクト 高
ユーザーレベル ~/.claude/agents/ 全プロジェクト 低

3. サブエージェント定義例

.claude/agents/code-reviewer.md:

---
name: code-reviewer
description: TypeScriptとReactコードの包括的レビューを実行。コード品質、パフォーマンス、セキュリティをチェック
tools: read_file, list_files, web_search
---

# コードレビュー専門エージェント

あなたはコードレビューの専門家です。以下の観点から徹底的にレビューしてください：

## レビュー項目
1. **TypeScript型安全性**: 適切な型定義、any の使用回避
2. **React ベストプラクティス**: hooks の適切な使用、再レンダリング最適化
3. **セキュリティ**: XSS、CSRF対策、機密情報の適切な処理
4. **パフォーマンス**: 不要な再計算、メモリリーク、バンドルサイズ
5. **アクセシビリティ**: ARIA属性、キーボードナビゲーション

必ず具体的な改善提案と修正例を提供してください。

4. サブエージェントの使用

使用する時には、自然言語で特定のsubagentを使ってタスクを遂行して欲しいと伝えるだけです！

> frontend-expertを使用して、以下の仕様に沿ったWebページを作成してください。

もしくは複数のsubagentをチェーンすることもできます。

> code-analyzerを使用して、性能問題を調査してください。その後、optimizerがコードの修正を行なってください。

8. その他Tipsとショートカット

間違ってセッションを閉じてしまったら

# 直近のセッションを復活
claude --continue

# 会話リストから選んで続く
claude --resume

パーミッション管理

# 自動許可モードで起動
claude --dangerously-skip-permissions

# 特定ドメインを信頼リストに追加
/permissions add docs.example.com

キーボードショートカット集

Claude Codeで使える便利なキーボードショートカット：

Escape           : Claude実行を停止（Ctrl+Cではない！）
Escape × 2       : 過去のメッセージ一覧にジャンプ
Shift + Tab      : モードの切り替え（基本モード/プランモード/自動承認モード）
Control + V      : 画像貼り付け（MacでもCmd+Vではない！）

ターミナル設定の改善：

改行機能（Shift + Enter）を有効化したい場合は：

/terminal-setup

よく使うファイルをCLAUDE.mdに記載

よく参照するファイルはCLAUDE.mdに記載しておくとセッション間でコンテキストが保持されます：

# よく参照するファイル
- src/config/database.ts - データベース設定
- src/utils/helpers.ts - 共通ユーティリティ関数
- docs/API.md - API仕様書

高度なコンテキスト管理

セッション管理の基本コマンド：

/clear    # 会話履歴を完全クリア（CLAUDE.mdは残る）
/compact  # 会話履歴を要約圧縮（コンテキスト節約）

使い分けのコツ：

  • 新しいタスクを開始: /clear
  • 関連性のある長い会話: /compact

まとめ

今回は個人的に試してみて効果的だったTipsをまとめてみました。これらの機能をうまく組み合わせることで、日々の開発作業がかなり効率化できそうな予感がしています！特にSubagentやMCP連携は、まだまだ探求できる部分が多そうなので、新しい活用方法を見つけたら随時この記事もアップデートしていきたいと思います。また、いろいろ設定するのがめんどくさい場合は、SuperClaudeみたいなフレームワークを導入してみるのも良いかもです！

もし皆さんの中で「こんな使い方もあるよ！」というアイデアがあれば、ぜひコメントで教えてください。一緒により良い開発体験を作っていけたら嬉しいです！

https://docs.anthropic.com/claude-code

スペースマーケット Engineer Blog
スペースマーケット Engineer BlogPublication

スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。 弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket

Discussion