Visual Studio Code（VSCode）は、Microsoft が開発した無料のコードエディターです。軽量でありながら高機能で、プログラミングの初心者からプロの開発者まで幅広く使われています。
Visual Studio Code とは
主な特徴：
- 無料・オープンソース
- Windows・Mac・Linux に対応
- 拡張機能が豊富で自分好みにカスタマイズできる
- Git との連携が標準搭載
Step 1: Visual Studio Code のインストール
- Visual Studio Code 公式サイト にアクセス
- 「Download for Windows」をクリックしてインストーラーをダウンロード
- ダウンロードしたファイルを実行してインストール
- インストール時のオプションは基本的にデフォルトのままで問題ありません
Step 2: 日本語化
VSCode はデフォルトが英語表示です。以下の手順で日本語化できます。
拡張機能から日本語パックをインストール
- VSCode を起動する
- 左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリック、または Ctrl + Shift + X
- 検索ボックスに「Japanese Language Pack」と入力
- 「Japanese Language Pack for Visual Studio Code」（Microsoft 製）をクリック
- 「Install」ボタンをクリック
- インストール後、右下に「Restart VS Code to apply changes」と表示されたら「Restart」をクリック
- VSCode が再起動して日本語表示になります
Step 3: Claude Code のインストール
Claude Code は Anthropic が開発した AI コーディングアシスタントです。ターミナルから操作でき、コードの作成・修正・説明をAIがサポートしてくれます。
事前準備：Node.js のインストール
Claude Code の実行には Node.js が必要です。
- Node.js 公式サイト にアクセス
- 「LTS」版をダウンロードしてインストール
LTS とは「Long Term Support（長期サポート）」の略で、安定性が重視される版です。公式サイトには「LTS（推奨版）」と「最新版」の2種類が表示されますが、特別な理由がなければ LTS を選んでください。
ダウンロードしたインストーラー（例：node-v22.x.x-x64.msi）を実行します。インストールの選択肢はすべてデフォルトのままで問題ありません。「Next」を押し続けて「Install」をクリックすれば完了です。
インストール後、VSCode のターミナル（Ctrl + ` ）を開いて以下のコマンドで確認します。
node -v以下のようにバージョン番号が表示されれば Node.js のインストール成功です。
v22.x.x続けて npm（Node.js に付属するパッケージ管理ツール）も確認します。
npm -vどちらもバージョン番号が表示されれば OK です。
Claude Code のインストール
VSCode のターミナルを開いて、以下のコマンドを実行します。
npm install -g @anthropic-ai/claude-codeインストール完了後、以下で確認します。
claude --version
Claude Code の初期設定
- ターミナルで以下を実行してログイン
claude- ブラウザが開いて Anthropic のログイン画面が表示される
- アカウントを作成またはログインする
- 認証完了後、ターミナルに戻ると Claude Code が使えるようになります
Claude Code の基本的な使い方
プロジェクトフォルダで起動する
作業したいフォルダを VSCode で開き、ターミナルで以下を実行します。
claudeできること
- コードの作成・修正を日本語で指示できる
- ファイルの内容を読み込んで分析してくれる
- バグの原因を説明してくれる
- テストコードを自動生成してくれる
使用例
> このPHPファイルのSEO的に問題がある部分を教えてください
> WordPressのfunctions.phpにメタディスクリプションを自動設定するコードを書いてください
使い始めて気づいたこと
CLAUDE.md はルートに近いディレクトリほど重要
Claude Code を使い始めて気づいたのが、プロジェクトの各ディレクトリ、特にルートに近い場所に CLAUDE.md を用意しておくことの大切さです。
CLAUDE.md は Claude Code に対する「このディレクトリのルール・文脈」を伝えるファイルです。ここに環境情報や作業方針を書いておくと、Claude が毎回同じことを聞かずに正確に動いてくれます。逆に用意していないと、毎回プロンプトで補足説明が必要になります。
最低限書いておくと良い内容：
- プロジェクトの概要・目的
- 環境情報（使用言語・フレームワーク・サーバー情報など）
- 作業ルール・命名規則など
なお、Claude Code では2026年6月から新モデル「Claude Fable 5」も選べるようになりました。切り替え方法はClaude CodeをFable 5に切り替える方法（使えない時の対処つき）で解説しています。
よくあるエラーと対処法
ここまでの手順を進める中で、つまずきやすいポイントとその対処法をまとめます。エラーメッセージが表示されても慌てず、以下を参考に確認してみてください。
1. 「’code’ is not recognized as an internal or external command」と表示される
Visual Studio Code をインストールした直後、ターミナルで code . などのコマンドを実行するとこのエラーが出ることがあります。これは VS Code の実行パスが PATH(コマンドの場所をOSに教える設定)に登録されていないことが原因です。
対処法: VS Code を一度再起動するか、インストール時に表示される「PATH に追加する」というチェックボックスにチェックが入っているか確認してください。すでにインストール済みの場合は、コマンドパレット(Ctrl+Shift+P)から「Shell Command: Install ‘code’ command in PATH」を実行すると解決します。
2. 日本語化パックを入れても表示が英語のまま
拡張機能から「Japanese Language Pack」をインストールしたのに、メニューが英語表示のままというケースです。
対処法: インストール後に画面右下に表示される「Restart」ボタンを押し忘れていることがほとんどです。表示が消えてしまった場合は、コマンドパレットから「Configure Display Language」→「ja」を選択し、VS Code を手動で再起動してください。
3. 「npm: command not found」「node: command not found」
Claude Code は Node.js 環境上で動作するため、Node.js が未インストール、または PATH が通っていない場合にこのエラーが出ます。
対処法: ターミナルで node -v を実行し、バージョンが表示されるか確認してください。表示されない場合は Node.js を再インストールするか、WSL 環境の場合はターミナルを一度閉じて開き直すだけで解決することもあります。
4. Claude Code 実行時に「Invalid API key」「認証エラー」が出る
APIキーの入力ミス、コピー時に余分な空白や改行が含まれてしまっている、あるいはAPIキーの有効期限切れ・利用制限超過が主な原因です。
対処法: APIキーを再発行し、コピー&ペースト時に前後の空白が入っていないか確認してください。ターミナルに直接入力する場合は、貼り付け後に余分な文字が付いていないかも見ておくと安心です。
5. 「Permission denied」と表示されてコマンドが実行できない
Mac や Linux(WSLを含む)環境で、実行権限のないファイルやディレクトリに対してコマンドを実行しようとすると発生します。
対処法: コマンドの前に sudo を付けて管理者権限で実行するか、対象ファイルの権限を chmod コマンドで変更してください。ただし sudo の多用はセキュリティ上おすすめできないため、まずは自分のホームディレクトリ配下で作業しているか確認するのが安全です。
Mac/Linuxでの手順差分
ここまでの手順は主に Windows(WSL含む)環境を想定して説明してきましたが、Mac や Linux をお使いの方向けに、手順の違いをまとめておきます。基本的な流れは共通していますので、以下の差分だけ押さえておけば問題ありません。
インストール方法の違い
| 項目 | Windows | Mac | Linux |
|---|---|---|---|
| VS Code入手 | 公式サイトからインストーラーをダウンロード | 公式サイトから .zip をダウンロードし Applications フォルダへ移動 | 公式サイトから .deb / .rpm をダウンロード、またはパッケージマネージャー経由 |
| ターミナル | WSL上のターミナル、またはPowerShell | 標準搭載の「ターミナル」アプリ | 各ディストリビューション標準のターミナル |
| Node.jsインストール | WSL上で apt コマンド、または公式サイトのインストーラー |
Homebrew(brew install node)が簡単 |
apt(Ubuntu/Debian系)や dnf(Fedora系)などパッケージマネージャー経由 |
コマンドの違い
WindowsのWSLとLinuxはほぼ同じ操作感ですが、Macでは一部コマンドが異なります。
- Homebrewの利用: Macでは Homebrew というパッケージ管理ツールを使うと、Node.js のインストールが
brew install nodeの一行で完了します。Homebrew未導入の場合は、公式サイトの案内に沿って先にインストールしておきましょう。 - 権限まわり: Mac/Linuxはファイル権限の考え方がWindowsと異なり、
chmodやsudoを使う場面が出てきます。慣れないうちは、エラーが出たら本記事の「よくあるエラーと対処法」を参照してください。 - 改行コード: Windows は改行コードが
CRLF、Mac/Linux はLFです。Gitを使ってファイルをやり取りする際に警告が出ることがありますが、動作に支障がなければそのまま進めて問題ありません。
日本語化・Claude Code導入の手順そのものは共通
拡張機能タブから「Japanese Language Pack」を検索してインストールする手順や、Claude Code を導入するコマンド自体は、OSが変わっても基本的に同じです。差が出るのは主に「Node.jsをどう入れるか」「ターミナルの操作感」の2点と覚えておくと迷いません。
APIキー・認証情報の安全な管理
Claude Code を使うにはAPIキー(サービスを利用するための「合鍵」のようなもの)が必要になります。このAPIキーの扱いを誤ると、意図しない第三者に利用されて高額請求が発生したり、情報が漏えいしたりするリスクがあるため、初心者の方こそ最初にしっかり押さえておきたいポイントです。
APIキーは「パスワードと同じ」と考える
APIキーは一見ただの文字列ですが、実際には自分のアカウントでサービスを利用する権限そのものです。パスワードを他人に教えないのと同じ感覚で、APIキーも他人と共有したり、人目に触れる場所に貼り付けたりしないようにしましょう。
やってはいけないこと
- コードに直接書き込む:
const apiKey = "sk-xxxxx"のようにソースコード内へ直接記述すると、そのファイルをGitHubなどで公開した際にAPIキーごと世界中に公開されてしまいます。 - SNSやチャットへの貼り付け: 質問や共有のためにエラーメッセージをコピーする際、APIキーが含まれた画面ごとスクリーンショットを貼ってしまうケースがよくあります。投稿前に必ずマスキング(隠す処理)をしましょう。
- 公開リポジトリへのコミット: 一度Gitの履歴に残ってしまうと、後から削除しても履歴を遡って閲覧できてしまう可能性があります。
正しい管理方法
- 環境変数として設定する: APIキーはコード内ではなく、OSの環境変数やターミナルの設定ファイル(
.bashrcや.zshrcなど)に登録し、コードからは変数名で呼び出す形にしましょう。 - .envファイルを使う: プロジェクトごとに
.envという設定ファイルにAPIキーを記載し、コードからはそのファイルを読み込む方法も一般的です。この場合は必ず.gitignoreに.envを追加し、Gitの管理対象から除外してください。 - 定期的なローテーション: 使わなくなったAPIキーや、万が一漏えいした可能性がある場合は、速やかに無効化して新しいキーを再発行しましょう。多くのサービス管理画面から数クリックで実施できます。
- 利用範囲・上限を設定する: サービスによってはAPIキーごとに利用上限額やアクセス範囲を設定できます。個人利用であれば、上限を低めに設定しておくと、万が一の際の被害を最小限に抑えられます。
初めのうちは手間に感じるかもしれませんが、一度仕組みを作ってしまえば以降は意識せずに安全な運用ができます。ぜひ最初のステップとして取り入れてみてください。
Q&A(よくある質問)
Q1. Visual Studio Codeは無料で使えますか?
A. はい、Visual Studio Codeは無料で利用できます。Microsoftが提供する開発者向けの無料ソースコードエディタで、個人利用・商用利用ともに追加費用は発生しません。
Q2. Claude Codeを使うのに料金はかかりますか?
A. Claude Code自体はツールとして無料で導入できますが、内部で利用するAPIには利用量に応じた従量課金が発生する場合があります。無料枠が用意されているプランもあるため、公式サイトで最新の料金体系を確認してから利用を始めることをおすすめします。
Q3. 日本語化したのに一部のメニューが英語のままなのはなぜですか?
A. 拡張機能や一部のシステムメッセージは、日本語化パックの対象外となっている場合があります。VS Code本体の再起動や、拡張機能自体のアップデートで解消することが多いですが、翻訳が提供されていない項目については英語表示のまま残ることもあります。
Q4. WindowsとMacのどちらで導入する方が簡単ですか?
A. 基本的な導入難易度に大きな差はありません。WindowsではWSLの設定が必要になる分、最初のセットアップにやや手間がかかる一方、パッケージ管理の手軽さではMacのHomebrewが扱いやすいという声もあります。普段お使いのOSでそのまま進めて問題ありません。
Q5. APIキーが漏えいしたかもしれない場合はどうすればいいですか?
A. まず該当のAPIキーを管理画面から速やかに無効化し、新しいキーを再発行してください。利用履歴に不審なアクセスがないかも合わせて確認しましょう。日頃から利用上限額を設定しておくと、万が一の際の被害を抑えられます。
まとめ
| ステップ | 内容 |
|---|---|
| Step 1 | VSCode をインストール |
| Step 2 | 日本語化（Japanese Language Pack） |
| Step 3 | Node.js をインストール |
| Step 4 | Claude Code をインストール |
| Step 5 | Anthropic アカウントでログイン |
VSCode と Claude Code を組み合わせることで、AIを活用した効率的な開発環境が整います。ぜひ活用してみてください。
Views: 406
