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 --versionClaude Code の初期設定
- ターミナルで以下を実行してログイン
claude- ブラウザが開いて Anthropic のログイン画面が表示される
- アカウントを作成またはログインする
- 認証完了後、ターミナルに戻ると Claude Code が使えるようになります
Claude Code の基本的な使い方
プロジェクトフォルダで起動する
作業したいフォルダを VSCode で開き、ターミナルで以下を実行します。
claudeできること
- コードの作成・修正を日本語で指示できる
- ファイルの内容を読み込んで分析してくれる
- バグの原因を説明してくれる
- テストコードを自動生成してくれる
使用例
> このPHPファイルのSEO的に問題がある部分を教えてください
> WordPressのfunctions.phpにメタディスクリプションを自動設定するコードを書いてくださいまとめ
| ステップ | 内容 |
|---|---|
| Step 1 | VSCode をインストール |
| Step 2 | 日本語化（Japanese Language Pack） |
| Step 3 | Node.js をインストール |
| Step 4 | Claude Code をインストール |
| Step 5 | Anthropic アカウントでログイン |
VSCode と Claude Code を組み合わせることで、AIを活用した効率的な開発環境が整います。ぜひ活用してみてください。
Views: 0
