WHITEPLUS TechBlog

株式会社ホワイトプラスのエンジニアによる開発ブログです。

Claude Codeが導入されたので触ってみた！【入門】

開発環境

こんにちは！
株式会社ホワイトプラスのエンジニアリング部 CX開発Gのyumeです。

さまざまなAIツールが日々急速に開発・進化していく現代、 弊社も新たにAI開発支援ツール「Claude Code」を導入しました。

この記事はこんな方におすすめです：

  • 「最近よく聞くClaudeとかClaude Codeって何？」と疑問に思っている方
  • 「さくっとClaude Codeがどんなものか見てみたい」という方
  • 「Claude Codeを使ってみたいけど何から始めようかな」という方

Claude（クロード）とは？

ChatGPTと同じようにチャットで会話できるAIアシスタントです。
アメリカのAnthropic社が開発しており、以下のような特徴があります。

  • 文章の処理が得意で、長文の理解力やドキュメントの生成力が高い
  • ブラウザやアプリ、ターミナルなどの様々な方法で利用できる
  • ブラウザやアプリでは、依頼内容に合わせた「アーティファクト」というツールを作成して、チャット画面上で使用することができる

本記事公開時点の最新モデルは以下です。

  • Claude Opus 4.1
    • 最も有能なモデル
    • 複雑な課題に対応できる、高性能な大規模モデル
    • 他のモデルよりも使用制限を早く消費する（Claude Sonnet 4の5倍）
    • 個人の場合はProプランでは利用できず、Maxプランでのみ利用可能
  • Claude Sonnet 4
    • 高性能モデル
    • 日常利用に最適な、スマートで効率的なモデル

弊社はTeamプランのため、上位モデルのOpus 4.1も利用可能です。

Claude Codeとは？

ターミナルからClaudeを利用できる開発者向けのツールです。
プロジェクト全体のコンテキストを理解して、直接ファイルを参照・編集してくれます。 IDEと接続することもでき、AIを用いた開発作業の効率が上がります。

従来のIDEとClaude（AIとのチャット）を別々で使う場合： IDEとClaudeにコードをコピペして行き来を繰り返すことを表している図です。

Claude Codeを利用した場合：
Claude Codeを接続したIDE１つででAIへの相談からコード編集が完結することを表した図です。

このようにIDE一つでAIとのやりとりや、AIによるコードの自動生成・編集ができるようになります。

Claude Codeの使い方（導入）

前提条件

  • Node.js 18以降がインストールされていること
$ node -v
v18.12.1
  • Claude.ai または Anthropic Console のアカウントがあること

セットアップ

# Claude Codeをインストール
npm install -g @anthropic-ai/claude-code

# プロジェクトに移動
cd your-awesome-project

# Claude Codeを起動
claude

対話式に初期設定が進みます。

色覚バリアフリーな選択もあり、ユーザビリティの高さを感じました。 Claude Codeから表示スタイルの選択を求められているターミナルのスクリーンショットです。

ログインを求められます。 Claude Codeからログイン認証を求められているターミナルのスクリーンショットです。

webブラウザからログインするだけなので認証も簡単でした。 Claude Codeのログインに成功したと表示されているターミナルのスクリーンショットです。

他にもいくつかの設定を進めたら、起動できました 🎉 Claude Codeが起動したターミナルのスクリーンショットです。

ターミナル上の入力欄で ? を入力すると、入力欄の下にシンプルなショートカットのリストが表示されます。 Claude Codeのコマンドを入力する欄を切り取ったターミナルのスクリーンショットです。

ショートカット 概要 説明
! for bash mode Bashコマンドモードに切り替え
/ for commands Claude Codeのコマンドを実行
@ for file paths ファイルのコンテキストを指定
# to memorize memoryの追加
escを2連打 to clear input 入力内容をクリア
shift + tab to auto-accept edits 編集内容を自動承認
ctrl + r for verbose output 直前の実行結果の詳細を出力
ctrl + t to show todos TODOリストを表示
ctrl + _ to undo 操作を元に戻す
ctrl + z to suspend プロセスを一時停止
ctrl + v to paste images 画像を貼り付け
option + ⏎ for newline 改行を挿入

コマンド入力のスラッシュ / を入力すると、入力に合わせてコマンドの候補と説明が出てきます。 Claude Codeでコマンドを入力しているターミナルのスクリーンショットです。

Claude Codeを使ってみる

/init コマンドで CLAUDE.md を作成する

Tips for getting started の案内に従って /init で CLAUDE.md を作成してみます。 Claude Codeで `/init` コマンドを入力しているターミナルのスクリーンショットです。

/init "日本語でお願いします" というように指示を追加することもできます。 Claude Codeで `/init "日本語でお願いします"` というコマンドを実行したスクリーンショットです。

プロジェクト内のファイルを解析してREADME的なファイルを作成してくれました。 Claude Codeが作成してCLAUDE.mdファイルのスクリーンショットです。

画像を添付する

試しに、リネットの注文フォームのスクショを貼って実装箇所を探してもらえるか見てみます。

  1. スクリーンショットをクリップボードにコピー
    • Macの場合は ⌘ + shift + control + 4 で選択範囲を直接クリップボードにコピーできます リネットの注文フォームにあるオプション選択の一部を切り取ったスクリーンショットです。
  2. ターミナルのClaude Code入力欄で control + V キーを押してペースト ターミナル上のClaude Codeのテキスト入力エリアにペーストした画像を示す `[Image #1#x5D;` と表示されているスクリーンショットです。
  3. テキストを書き加えて実行 Claude Codeに画像を添付して実装箇所を探してもらった結果のスクリーンショットです。

結果、見事に画像内にあるテキスト（「オプション」という見出しと「プロにおまかせコース」「匠の手仕上げ」という オプション）を手掛かりに、正確にReactのコンポーネントファイルと実装行数を出力してくれました。

画像の入力方法はペーストの他にもあります。

  • ターミナルのClaude Code入力欄にファイルをドラッグ＆ドロップ
  • ファイル参照のショートカット @ で画像ファイルを指定
    • 前後方一致でサジェストが出てくれます

また、画像は複数入力可能で、入力位置に [Image #1] というようなテキストが挿入されます。
そのため「[Image #1] と [Image #2] の実装は共通？」というように添付画像を踏まえた文章が作りやすいかと思いました。

IDEと接続する

Claude Codeは以下のIDEで利用できます。

  • Visual Studio Code
    • Cursor、Windsurf、VSCodium などを含む
  • JetBrains IDE
    • IntelliJ、PhpStorm、GoLand などを含む

1. IDEからClaude Codeに接続する方法

  1. IDEの統合ターミナルから claude を実行
  2. 接続されました 🎉

開いているファイル名や選択している行数がClaude Code入力欄の右下に表示されます。 IDE（Cursor）上のターミナルでClaude Codeが起動し、開いているファイルや行数が入力欄下に表示されているスクリーンショットです。

2. 外部ターミナルからClaude CodeをIDEに接続する方法

  1. /ide コマンドを実行 Claude Codeに `/ide` コマンドを入力して、`Select IDE to install extension: 1. Cursor, 2. VS Code 3. PhpStorm 4. GoLand` と表示されているターミナルのスクリーンショットです。
  2. 接続したいIDEを選択（ここではPhpStormでやってみます） Claude Codeから「Please restart your IDE completely for it to take effect」と言われているスクリーンショットです。
  3. 指示に従ってPhpStormを再起動し、再度 /ide コマンドを実行 Claude Codeから「Select IDE」と言われているスクリーンショットです。
  4. 再度 PhpStorm を選択
  5. 自動接続を有効にしますか？の問いに答える
    • あとで /config コマンドから設定を変更することも可能です
  6. IDEに接続されました 🎉 Claude Code入力欄の右下に IDE connected を表示されているスクリーンショットです。

自動的に Claude Code [Beta] というプラグインがインストールされています。

PhpStormの右上にClaude Codeのアイコンが追加されていました。 PhpStormの右上にClaude Codeのアイコンが表示されているスクリーンショットです。

また、コードをドラッグ選択で表示されるツールチップや右クリックメニューにもClaude Codeのアイコンが追加されました。
PhpStormのツールチップにClaude Codeのメニューが表示されているスクリーンショットです。

この「Send to Claude Code option + ⌘ + K」をクリックすると、ターミナルのClaude Code入力欄にファイルパスが入力されました。 Claude Codeの入力欄にPhpStormで選択したファイル名と行数が入力されているターミナルのスクリーンショットです。

MCPを設定する

今回はFigmaのMCPを設定してみようと思います。

FigmaのMCP：利用前提

  • 有料プランのDevシートまたはフルシートが必要です
  • Figmaデスクトップアプリからのみ使用可能です

FigmaのMCP：設定方法

  1. FigmaのデスクトップアプリでFigma Designファイルを開く（新規作成でも可）
  2. 左上のFigmaアイコンから「基本設定」＞「ローカルMCPサーバーを有効化」をクリック Figmaのデスクトップアプリから「ローカルMCPサーバーを有効化」のメニューを表示しているスクリーンショットです。
  3. Claude Codeで以下を実行
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Claude CodeにFigma Dev Mode MCPサーバーが追加されたスクリーンショットです。 4. 追加されました 🎉

claude mcp list で設定されているMCPサーバーの状態が確認できます。 Claude Codeで `claude mcp list` を実行した結果のスクリーンショットです。

参考：Dev Mode MCPサーバー利用ガイド – Figma Learn - ヘルプセンター

まとめ

ここまでお読みいただき、ありがとうございました！🙏🏻✨

以上、「最近よく聞くけどClaudeってなんだろう？」という完全初見の状態から、Claude Codeを触ってみたところまでをご紹介しました。

実際の開発業務で使うのはこれからですが、Cursorと併用しつつ違いやClaude Codeの強みを体験していきたいと思います。

自分専用のコマンドを作れたり、さまざまなツールと連携できたりと、使い馴染むほどに開発効率はどんどん向上させられると感じました！

みなさんも一緒にClaudeを活用して、開発をより楽しく快適にしましょう 🥳

さいごに

ホワイトプラスでは、ビジョンやバリューに共感していただけるエンジニアを募集しています！
ネットクリーニングの「リネット」など「生活領域×テクノロジー」で事業を展開している会社です。

どんな会社か気になった方は、オウンドメディア「ホワプラSTYLE」をぜひご覧ください。
エンジニアの方向けのエントランスブック「WHITEPLUS Entrance Book for Engineer」もございます。

オンラインでカジュアル面談もできますので、ぜひお気軽にお問い合わせください！

www.wh-plus.co.jp