6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Codeの機能が多すぎるので「やりたいこと」から探せる逆引きリファレンスサイトを作った

Posted at

u3198448477_Minimal_modern_tech_blog_hero_image._Dark_blue_to_d964e744-6697-47b6-b4f4-41fa64c14f13_0.png

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の機能だけでなく、設定ファイルの書き方や活用パターンなども含めて整理しています。同じ機能でも「基本的な使い方」と「応用例」で別項目にしているものもあります。

収録しているカテゴリは以下の通り:

  1. 基本操作 - 起動、終了、セッション管理
  2. 入力・操作 - 複数行入力、ファイル参照、Bashモード
  3. モデル・思考 - モデル切替、拡張思考、プランモード
  4. 権限・セキュリティ - 権限モード、ツール別権限
  5. 設定・カスタマイズ - 設定ファイル、テーマ変更
  6. CLAUDE.md(メモリ) - メモリ階層、ルールファイル
  7. MCP - サーバー管理、設定
  8. スキル・エージェント - カスタムスキル、サブエージェント
  9. IDE連携 - VS Code、JetBrains
  10. フック - イベントフック設定
  11. CI/CD・自動化 - ヘッドレスモード、GitHub Actions
  12. Git連携 - コミット、PR作成
  13. セキュリティリスク回避 - プロンプトインジェクション対策
  14. ツール - 内蔵ツール一覧
  15. トラブルシューティング - よくある問題と解決策

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はアップデートが頻繁なので、記載内容が古くなっている可能性もあります。「この情報違うよ」「こっちが正しいよ」というフィードバックがあれば、ぜひコメントで教えてください。

参考リンク

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?