Claude Code を初めて使う人向けの実践ガイド

“Log in HOKUTO Tech Blog 目次 Claude Code を初めて使う人向けの実践ガイド morizyun 2025/06/20に公開 Model Context Protocol Claude superwhisper Claude Code Tech この記事は Claude Code を初めて試そうとされている方向けの記事です。 導入手順 Claude Codeは、ターミナルで動作する対話型AIコーディングツールです。コードの生成だけでなく、ファイルの編集、テストの実行、Gitの操作まで自然言語で指示できます。 以下の公式ドキュメントを参考にして導入してみてください。 公式ドキュメント：https://docs.anthropic.com/ja/docs/claude-code/overview VS Code拡張：https://docs.anthropic.com/ja/docs/claude-code/ide-integrations よく使うコマンド CLIコマンド（起動前） Claude Code を起動するコマンド: claude # 対話セッションを開始 claude –continue # 直近のセッションを継続 claude –resume # 過去のセッションから選択して再開 セッション内コマンド claude コマンドを実行した後のセッション内で特によく使うコマンド: /init – プロジェクト用のCLAUDE.mdを生成 /clear – コンテキストをリセット（タスクが変わったら即実行） /compact – 会話を要約してトークンを節約 /review – Pull Request などを指定するとレビューしてくれます /help – 利用可能なコマンド一覧 /model /model で利用するモデルを選択できる。 Default: 上限の50%に到達するまではOpusで、それ以降はSonnetを利用 Opus: 2025-06-20時点で一番コーディング性能の高いモデル Sonnet: コスト効率と応答速度を重視したモデル 僕はMaxプランなので普段はOpusを選択しておいて、limit の警告が出たらSonnetに切り替えて使っています。(limit の警告が出てもある程度はOpus大丈夫そう？🤔) 音声入力で効率化 推奨ツール 1. Superwhisper（おすすめ） 文字起こしツールで、その後に Claude Sonnet4 などであと処理ができる 日本語でしゃべったものを、LLMプロンプトで英語翻訳できる 英語での指示の方が精度上がると感じた方は課金してでも使うのがおすすめです 2. WispFlow 喋ったことを精度高く日本語文字起こしするツール フィラー(「えー」など)を除去して、読みやすい日本語にする 無料でも問題なく使える 3. Mac音声認識 単一アプリでの利用を前提としており、Figma & VS Code など複数アプリを使う開発では使いづらいやも なぜ音声入力？ 音声入力には明確な利点があります： 入力速度: 平均的な話速は150-200語/分、タイピングは40-60語/分 情報量: 音声では背景・理由・期待結果を自然に含めて話す傾向がある 認知負荷: キーボード操作を考えずに、問題解決に集中できる タイピングでは「バグ修正」と書くところを、音声では「2ページ目でデータが表示されないバグを修正」のように具体的に伝えやすくなる。結果として、Claude Codeはより正確な解決策を提示できる。 メモリシステムの活用 メモリファイルの種類 ファイル 場所 用途 CLAUDE.md プロジェクトルート チーム共有のルール CLAUDE.md .claude/ 個人のプロジェクト設定 CLAUDE.md ~/.claude/ 全プロジェクト共通の個人設定 settings.json .claude/ プロジェクトでのClaude Codeの設定 settings.local.json .claude/ 個人＆プロジェクトでのClaude Codeの設定 CLAUDE.md は Claude Code の起動時に読み込んでくれるので、プロジェクトの情報や、Claude Code への振る舞いの希望を記述してください。 初期の CLAUDE.md は/initで作成できます。 その後は Claude Code や Claude を使いつつ、プロジェクトに合わせてCLAUDE.mdをアップデートしていくのがおすすめです。 .claude/CLAUDE.md や .claude/settings.local.json などは git の対象外にすることでチームに影響を与えずに設定ができます。 パーミッション管理で効率化 頻繁に使う安全なコマンドは事前に許可しておくと、作業が中断されない。 settings.jsonのpermissionについて permission.allow: 設定した操作・ファイルは、原則として実行される permission.deny: 設定した操作やファイルは、原則としてClaude Codeは実行しない (allow よりも優先) どちらにもない操作・ファイル: 実行する前に人間に確認を取る 自動承認をするコマンドの設定 .claude/settings.jsonに追加： { “permissions”: { “allow”: [ “Bash(pnpm test)” // pnpm testを常に許可 “Bash(gh pr view:*)”, // gh pr view　系を常に許可 ] } } 自動承認を避けるべきコマンド npm install 等のパッケージの追加（セキュリティリスク） git commit / push など（破壊的変更を防ぐために、人の確認が必要） env ファイルの読み込み (重要なキーが含まれる場合があるため) rm など (致命的なファイルの削除を防ぐ) permissions.denyの設定 .claude/settings.jsonに以下のように設定すると自動承認を避けられる： { “permissions”: { “deny”: [ “Bash(git commit:*)”, // git commitをブロック “Bash(git push:*)” // git pushをブロック “Bash(rm:*)”, // 予期せぬファイル削除を防ぐ “Bash(sudo:*)”, // sudo系コマンドをブロック “Read(.env.*)” // 環境変数の読み込みを防ぐ ] } } 理想的には Docker や Dev Container に Claude Code の作業領域を閉じ込めると、より安全に実行できます。(模索中です 🙇) 効果的なワークフロー 1. VS Code/Cursorとの並行利用 VS Code/Cursorを起動して、片側でターミナル => Claude Code を起動、もう片側でVS Code/Cursorのエディタを開き、リアルタイムで変更を確認しながら作業。 Command + Option + K でエディタで開いているファイルを、コンテキストに含めることもできる。 2. Plan mode（Shift+Tab×2） Shift+Tab を押すと Mode が切り替わる。 Plan Mode で実装前に計画を立てる。コンテキストを最小限に抑えながら、実装方針を整理できる。 3. /clear　や /compact タスクが変わったら必ず/clear。コンテキストの肥大化を防ぎ、精度を維持する。 /compact は今までのコンテキストを圧縮してくれるので、会話が長くなりすぎた時はこちらもおすすめ。 4. 即座の中断と修正 間違った方向に進み始めたら： Escで即座に停止 明確な修正指示を与える 必要なら変更をrevertさせる Esc×2で前のメッセージを編集して再実行 細かいフィードバックを行うのがおすすめ。 5. 画像・スクリーンショットの活用 ターミナルに画像を Shift を押しながらドラッグ&ドロップ、もしくは Control + V (macOS)で貼り付けできる。デザインしたものを画像で渡すと、コンテキストに含めてくれる。 6. git addで頻繁にステージング 良い変更ができたら即座にgit add。Claude Codeが予期せぬ変更を加えても、簡単に元に戻せる。 MCP連携による拡張 Figma MCP (👆 リンクをコピーして、Claude Codeに貼り付けると認識してくれます) デザインからコード生成 SVGアセットの自動ダウンロード コンポーネント仕様の取得 Context7 MCP claude mcp add –transport sse context7 https://mcp.context7.com/sse 最新のライブラリドキュメント参照 バージョン固有の情報取得 正確なAPIリファレンス Playwright claude mcp add playwright npx @playwright/mcp@latest ブラウザの自動操作 E2Eテストの生成 スクリーンショット取得 GitHub 連携 現状、ghコマンドで困っていないので試していないですが、GitHub の公式 MCP を使うと柔軟に GitHub との連携ができそうです。 効率的な使い方のコツ 段階的なアプローチ こまめに実行結果を確認 間違いがあれば即座に指摘 良い結果はgit addで保護 明確な指示 ❌ 悪い例：「このコードを改善して」 ✅ 良い例：「このコードのパフォーマンスを改善して。特に配列の処理部分で、現在O(n²)になっている部分をO(n)にしたい」 思考モードで深い分析を促す プロンプトに以下のような言葉を付け加えるとより熟考してくれるようになる。 思考レベル think – 基本的な思考 think hard – より深い思考 think harder – さらに深い思考 ultrathink – 最大限の思考時間 1-2回実行してうまくいかない場合は、ultrathink をつけて依頼すると解決することが多い。 Taskツール（サブエージェント）で多角的分析 Taskツールは、メインのClaude Codeとは別のサブエージェントを起動し、並列で作業させる機能。複雑な問題の調査や、複数の観点からの分析に有効。 メリット メインタスクのコンテキストを保護（トークン節約） 複数の観点から並列で分析できる 各サブエージェントが独立して深い調査を実行 使用例 > Taskツールを使って、このコンポーネントを4つの観点（パフォーマンス、アクセシビリティ、保守性、UX）から分析して まとめ Claude Codeは単なるコード生成ツールではなく、開発パートナー。効果的に使うには： Plan modeで計画を立てる 音声入力を活用する 即座にフィードバックする MCPで機能を拡張する これらが、現時点での自分がやっているフローです。試行錯誤しているので、良い方法があったらアップデートしていきます。（より良い使い方あったらぜひ教えてください🙇） その他 Tips コスト確認 npx ccusage@latest # 日次の使用量とコストを表示 npx ccusage@latest blocks # 現在のセッションブロックを確認 タスク完了通知の設定例 .claude/settings.local.json または .claude/settings.json に以下のような設定を追加すると通知音が鳴るそうです。 { “preferredNotifChannel”: “terminal_bell” } ただ、なぜか僕の環境ではうまくいきません😭 なので、代わりに~/.claude/CLAUDE.md(全プロジェクト共通の個人設定)に以下を追加しています。 ##通知 **条件**： 条件**: クロードコードがタスクを終了したとき。 **アクション**： Action**: 通知を表示するには以下のコマンドを実行します： bash osascript -e ‘display notification “${message}” with title “Claude Code” sound name “Glass”‘ ￤コマンドを実行して通知を表示する。 ここで、`${message}` は、Claude Code がユーザーに通知する必要のある内容に基づいて決定する。 display notification 以外でも say コマンド等、使いやすいものでカスタマイズしてみてください。 お願い Claude Code 使い始めて2週間なので理解不足や、もっと良い使い方等あると思います。よければぜひお気軽にコメント等で教えていただけると嬉しいです 🙇 参考サイト HOKUTO Tech Blog により固定 告知 HOKUTOではフルリモート x 生成AI積極活用中で、Devin AI, Claude Code Maxプラン 全メンバーに配布しています。 プロダクトグループでは全ポジションで採用活動をしております！ エンジニア、QA,PdMなど 採用ページ ↓ https://corp.hokuto.app/recruit こちらの記事もぜひお読みください ▶︎Newspicks掲載 「医師の3人に1人が利用。急成長の医療プラットフォーム「HOKUTO」が描く勝ち筋」 morizyun 個人開発者です。 月100万PVのECメディアと月6万PVのHRサービスのグロースに挑戦中。スクレイピング、SEO、Webデザインがちょっとできます。営業と動画制作を勉強中です📚 フォロー HOKUTO Tech Blog Publication 「より良いアウトカムを求める世界の医療従事者のために」というミッションを掲げ、医師の臨床を支援するプロダクト「HOKUTOアプリ」を開発しているスタートアップです。 フォロー Discussion ログインするとコメントできます Login エンジニアのための情報共有コミュニティ About Zennについて 運営会社 お知らせ・リリース イベント Guides 使い方 法人向けメニュー New Publication / Pro よくある質問 Links X(Twitter) GitHub メディアキット Legal 利用規約 プライバシーポリシー 特商法表記 ” https://zenn.dev/hokuto_tech/articles/86d1edb33da61a#:~:text=Log%20in,%E7%89%B9%E5%95%86%E6%B3%95%E8%A1%A8%E8%A8%98