Claude Codeの機能を「○○したい」で検索できる逆引きリファレンスサイトを作りました。
15カテゴリ・100項目以上を収録しており、日本語でも英語でも検索できます。
このサイトは非公式のリファレンスです。収録内容はClaude Codeの機能だけでなく、設定ファイルの書き方や活用パターンなども含まれています。また、同じ機能を異なる切り口で解説している項目もあるため、「100種類の機能」ではありません。公式ドキュメントやテックブログを参考に作成していますが、誤りや古い情報が含まれている可能性があります。正確な情報は公式ドキュメントをご確認ください。
作った背景
Claude Codeを毎日使っているんですが、正直なところ機能が多すぎて把握しきれていなかった。
たとえばこんな経験、ありませんか?
- ショートカットキーを間違えて押してセッションを閉じてしまい、「あーーまた最初からか、、、」となる
- テックブログで「え、そんな機能あったの?」という発見はあるけど、いざ使おうとすると思い出せない
- 公式ドキュメントを見ても情報が分散していて、目的の機能にたどり着けない
自分の場合、Ctrl+D(終了)を押すつもりが別のキーを押してしまったり、「セッション再開ってどうやるんだっけ...」と毎回調べていたりしていた。
「やりたいこと」から機能を探せるリファレンスがあれば便利だな、と思って作ることにしました。
技術構成
claude-nav/
├── web/ # Next.js アプリケーション
│ ├── src/
│ │ ├── app/ # App Router
│ │ ├── components/ # UIコンポーネント
│ │ └── data/
│ │ ├── categories/ # 15カテゴリのデータ
│ │ ├── synonyms/ # 日英シノニム
│ │ └── reference.ts # 検索ロジック
│ └── public/
├── synonyms.json # シノニムマップ
└── claude-code-reference-design.md # 設計書
使用技術
| 技術 | 用途 |
|---|---|
| Next.js 15 (App Router) | フレームワーク |
| TypeScript | 型安全性 |
| Tailwind CSS | スタイリング |
| Cloudflare Pages | ホスティング |
| lucide-react | アイコン |
主な機能
1. 「やりたいこと」ベースの検索
「終了したい」「セッション再開」「モデル切り替え」など、やりたいことを入力するだけで該当機能が見つかります。
2. 日英シノニム検索
日本語でも英語でも検索できるようにシノニム(同義語)辞書を用意しました。
// シノニムデータの例
{
id: "start",
canonical: "起動",
ja: ["起動", "開始", "スタート", "立ち上げ", "実行"],
en: ["start", "launch", "run", "begin", "execute"],
section: "1",
anchor: "claude-code-を起動したい"
}
「launch」で検索しても「起動したい」の記事がヒットするわけですね。
3. 15カテゴリ・100項目以上を収録
Claude Codeの機能だけでなく、設定ファイルの書き方や活用パターンなども含めて整理しています。同じ機能でも「基本的な使い方」と「応用例」で別項目にしているものもあります。
収録しているカテゴリは以下の通り:
- 基本操作 - 起動、終了、セッション管理
- 入力・操作 - 複数行入力、ファイル参照、Bashモード
- モデル・思考 - モデル切替、拡張思考、プランモード
- 権限・セキュリティ - 権限モード、ツール別権限
- 設定・カスタマイズ - 設定ファイル、テーマ変更
- CLAUDE.md(メモリ) - メモリ階層、ルールファイル
- MCP - サーバー管理、設定
- スキル・エージェント - カスタムスキル、サブエージェント
- IDE連携 - VS Code、JetBrains
- フック - イベントフック設定
- CI/CD・自動化 - ヘッドレスモード、GitHub Actions
- Git連携 - コミット、PR作成
- セキュリティリスク回避 - プロンプトインジェクション対策
- ツール - 内蔵ツール一覧
- トラブルシューティング - よくある問題と解決策
4. キーボードショートカット一覧
ショートカット専用のページも用意しました。カテゴリ別に整理されているので、探しやすいはず。
検索ロジックの実装
検索では以下のスコアリングを行っています:
export function searchArticles(query: string): { category: Category; article: Article }[] {
const normalizedQuery = query.toLowerCase().trim();
const keywords = extractKeywords(normalizedQuery);
const results: { category: Category; article: Article; score: number }[] = [];
// シノニムでマッチするセクションを取得
const matchingSections = new Set<string>();
const expandedKeywords = new Set<string>(keywords);
for (const entry of synonyms) {
const jaMatch = entry.ja.some(word => normalizedQuery.includes(word.toLowerCase()));
const enMatch = entry.en.some(word => keywords.includes(word.toLowerCase()));
// シノニム展開
for (const keyword of keywords) {
if (entry.ja.some(word => word.includes(keyword) || keyword.includes(word))) {
entry.ja.forEach(w => expandedKeywords.add(w.toLowerCase()));
}
}
if (jaMatch || enMatch) {
matchingSections.add(entry.section);
}
}
// カテゴリと記事を検索
for (const category of categories) {
for (const article of category.articles) {
let score = 0;
// タイトルに直接マッチ
if (article.title.toLowerCase().includes(normalizedQuery)) {
score += 10;
}
// メソッドにマッチ
if (article.method.toLowerCase().includes(normalizedQuery)) {
score += 5;
}
// シノニムでカテゴリがマッチ
if (matchingSections.has(category.number)) {
score += 2;
}
if (score > 0) {
results.push({ category, article, score });
}
}
}
// スコア順でソート
results.sort((a, b) => b.score - a.score);
return results;
}
ポイントは:
- 日本語の助詞(を、が、に、等)を除去してキーワード抽出
- シノニムを使ったキーワード展開
- タイトル > メソッド > 説明の順でスコアに重み付け
使い方のヒント
よくある検索例
| やりたいこと | 検索ワード |
|---|---|
| セッションを再開したい | 「再開」「resume」 |
| モデルを切り替えたい | 「モデル」「model」 |
| MCPサーバーを追加したい | 「MCP」「サーバー追加」 |
| 危険なコマンドをブロックしたい | 「deny」「禁止」 |
| VS Codeで使いたい | 「vscode」「IDE」 |
ブックマーク推奨
よく使う機能の個別ページをブックマークしておくと便利です。URLは以下の形式になっています:
https://cc-ref.easegis.jp/category/[categoryId]/[articleId]
まとめ
Claude Codeは機能が豊富な分、すべてを把握するのは難しいですよね。この逆引きリファレンスが、「あの機能どこだっけ?」というときの助けになれば嬉しいです。
繰り返しになりますが、非公式サイトなので情報の正確性は保証できません。Claude Codeはアップデートが頻繁なので、記載内容が古くなっている可能性もあります。「この情報違うよ」「こっちが正しいよ」というフィードバックがあれば、ぜひコメントで教えてください。
