Claude Codeの全コマンドを日本語で引けるチートシートを作った

作ったもの

Claude Codeの全コマンド・ショートカット・設定を日本語でまとめたインタラクティブなチートシートを作った。

https://cc-cheat.com

チートシートのスクリーンショット

特徴

日本語 — 公式ドキュメントベースで全項目を日本語化
Mac / Win 切替 — ショートカットキーをワンクリックで切替表示
ワンクリックコピー — コマンドやフラグをクリップボードにコピー
検索 — リアルタイムフィルタリング
NEW バッジ — 直近2週間で追加された機能を自動検出
公式ドキュメントリンク — 各コマンドから公式ページに直接ジャンプ
日本語チェンジログ — 全バージョンの変更履歴を日本語で確認可能
ダーク / ライト切替 — Nord テーマ
毎日自動更新 — 新バージョンを検出したら自動でコマンド追加・デプロイ

なぜ作ったのか

Claude Codeはほぼ毎日アップデートされる。新しいスラッシュコマンド、キーボードショートカット、CLIフラグ、環境変数がどんどん追加されていく。

公式ドキュメント（英語）は網羅的だけど、「あのコマンドなんだっけ」と思ったときにサッと引ける日本語のリファレンスがなかった。既存のチートシートも英語のものが1つあるだけで、日本語版は見つからなかった。

カバー範囲

公式ドキュメントの以下のページから全項目を抽出している。

カテゴリ	項目数
キーボードショートカット	30+
スラッシュコマンド	65+
CLIコマンド・フラグ	40+
環境変数	20+
設定ファイル	15+
Hookイベント	26種
内蔵ツール・MCP	15+
Agents & Skills	15+

技術的に面白かったところ

Next.js の hydration 問題

テーマ切替やMac/Win切替をReactの useState で実装すると、SSRとクライアントでDOMが不一致になり hydration エラーが発生する。

解決策として、Reactの状態管理を一切使わずCSS駆動で切替を実現した。html 要素の data-light や data-os 属性をVanilla JSで切り替え、CSSの display プロパティで表示を制御する。

/* デフォルト: Mac表示 */
.os-win { display: none !important; }
.os-mac { display: inline-flex !important; }

/* Win選択時 */
html[data-os="win"] .os-win { display: inline-flex !important; }
html[data-os="win"] .os-mac { display: none !important; }

テーマ切替もまったく同じパターン。html[data-light] の有無でCSS変数を切り替える。Reactに一切触らせないのがポイント。

Claude Code が自分自身を更新する

cronで毎日 claude --version を確認し、新バージョンがあれば claude -p（ヘッドレスモード）で自動更新している。

毎日 AM 9:00 (cron)
  │
  ├─ claude --version で最新バージョン取得
  ├─ commands.ts の versionInfo と比較
  │
  ├─ 同じ → 終了
  │
  └─ 差分あり → claude -p でヘッドレス実行
       ├─ 公式チェンジログを WebFetch
       ├─ 新コマンドを commands.ts に追加
       ├─ チェンジログを日本語翻訳
       ├─ next build で確認
       └─ git push → GitHub → Vercel 自動デプロイ

Claude Code自身がClaude Codeのドキュメントを読んで、自分のチートシートを更新する。なかなかメタな構成。

最初の失敗：エージェント出力を信じすぎた

最初のバージョンでは、Claude Codeのエージェントに「全コマンドを出して」と依頼し、返ってきたデータをそのまま使った。結果、既存の英語チートシートと比較するとショートカットが半分以下しかカバーできていなかった。

原因は一次情報（公式ドキュメント各ページ）に当たらず、二次情報（エージェントの要約）だけで作ったこと。

修正として、公式ドキュメントの各ページ（keybindings, commands, cli-reference, env-vars, settings, hooks, mcp, memory, skills, sub-agents）を直接フェッチして全項目を抽出し直した。チートシートのように網羅性が命のコンテンツでは、LLMの出力を信頼せず一次ソースに当たることが重要。これはClaude Codeに限らず、LLMを使った開発全般に言える教訓だと思う。

技術スタック

Next.js 16 + TypeScript + Tailwind CSS 4
Nord テーマ（ダーク/ライト）
Vercel（GitHub連携で自動デプロイ）
Gitea → GitHub push ミラー

おわりに

Claude Codeを日常的に使っていて「あのコマンドなんだっけ」と思ったら、ぜひ使ってみてほしい。

https://cc-cheat.com

ソースコード: https://github.com/LiamAltie/tools

#作ったもの

#特徴

#なぜ作ったのか

#カバー範囲

#技術的に面白かったところ

#Next.js の hydration 問題

#Claude Code が自分自身を更新する

#最初の失敗：エージェント出力を信じすぎた

#技術スタック

#おわりに