【Claude Code】インストールから環境構築までの手順をわかりやすく解説

開発環境

• OS: Windows10（WSL2 / Ubuntu）
• Editor: Visual Studio Code
• Node.js: v22.22.2
• claude-code: 2.1.118

Claude Codeの環境構築をするまでの手順

Claude Codeの環境構築手順について解説します。Claude Codeは、Anthropicが提供するAIアシスタント「Claude」を、お使いのパソコンのターミナル（コマンドを実行する画面）から利用できるようにするツールです。AIを活用した開発環境を整える第一歩として、この手順を参考にしてください。

公式ドキュメント: https://code.claude.com/docs/ja/quickstart

Node.jsのインストール

Node.jsは、Claude Code本体を動かすための必須条件ではありません。公式が案内しているインストール方法（ネイティブインストーラ、Homebrew、WinGet、apt / dnf / apk）は、いずれもNode.jsを前提としていません。ただし、MCPサーバーを npx で起動する場合など、Node.jsが必要になる場面は多いため、ここで先に用意しておきます。Node.jsは、JavaScriptというプログラミング言語を、Webブラウザの外で動かすための実行環境です。

Node.jsのダウンロードページから、ご自身の環境に合ったインストーラーをダウンロードしてインストールしてください。

https://nodejs.org/ja/download

インストールが完了したら、ターミナルを開き、以下のコマンドを実行してNode.jsが正しくインストールされているか、バージョンを確認します。

Copy
1node -v

出力結果Copy
1v22.22.2

Node.jsのバージョンが表示されれば、インストールは成功です。

Claude Codeのインストール

Node.jsのインストールが終わったら、次にClaude Code本体をインストールします。お使いのOS（macOS、Linux、WSL、Windows）に応じたコマンドを実行してください。

• macOS, Linux, WSL: 以下のコマンドは、インターネットからClaude Codeのインストールスクリプトをダウンロードして実行します。

Copy
1curl -fsSL https://claude.ai/install.sh | bash

• Windows PowerShell: Windows PowerShellを使用している場合は、以下のコマンドを実行します。

Copy
1irm https://claude.ai/install.ps1 | iex

• Windows CMD: Windowsのコマンドプロンプトを使用している場合は、以下のコマンドを実行します。

Copy
1curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

インストールが開始され、以下のような出力が表示されます。

出力結果Copy
1Setting up Claude Code...
2
3√ Claude Code successfully installed!
4
5  Version: 2.1.118
6
7  Location: C:\Users\admin\.local\bin\claude.exe
8
9  Next: Run claude --help to get started
10
11‼ Setup notes:
12  • Native installation exists but C:\Users\admin\.local\bin is not in your PATH. Add it by opening: System
13  Properties → Environment Variables → Edit User PATH → New → Add the path above. Then restart your terminal.
14
15✓ Installation complete!

Copy
1claude --version

上記出力のSetup notesにあるように、Windowsの場合、インストール後にclaudeコマンドをどこからでも実行できるようにするために「環境変数」の設定が必要な場合があります。環境変数とは、OSがプログラムを探す場所を定めたリスト。

もしインストール後にターミナルでclaudeコマンドが認識されない場合は、環境変数PathにC:\Users\<ユーザー名>\.local\bin（<ユーザー名>の部分はご自身のユーザー名に置き換えてください）を追加してください。追加後、ターミナルを再起動すると設定が反映されます。

環境変数の設定が完了した、または不要だった場合は、以下のコマンドを実行してClaude Codeのバージョンを確認します。

出力結果Copy
12.1.118(Claude Code)

バージョン情報が表示されれば、Claude Codeのインストールは成功です。

Claude Codeの初期設定

Claude Codeのインストールが完了したら、初めてclaudeコマンドを実行して初期設定を行います。

コマンドを実行すると、以下のようにClaude Codeの初期設定が対話形式で始まります。

Copy
1claude

出力結果Copy
1Welcome to Claude Code v2.1.118
2
3Let's get started.
4
5Choose the text style that looks best with your terminal
6To change this later, run /theme
7
8> 1. Dark mode ✓
9  2. Light mode
10  3. Dark mode (colorblind-friendly)
11  4. Light mode (colorblind-friendly)
12  5. Dark mode (ANSI colors only)
13  6. Light mode (ANSI colors only)
14
15
161  function greet() {
172 -  console.log("Hello, World!");
182 +  console.log("Hello, Claude!");
193  }

出力結果Copy
1Welcome to Claude Code v2.1.118
2
3Claude Code can be used with your Claude subscription or billed based on API usage through your Console account.
4
5Select login method:
6
7> 1. Claude account with subscription · Pro, Max, Team, or Enterprise
8
9  2. Anthropic Console account · API usage billing
10
11  3. 3rd-party platform · Amazon Bedrock, Microsoft Foundry, or Vertex AI

出力結果Copy
1Welcome to Claude Code v2.1.118
2
3Browser didn't open? Use the url below to sign in (c to copy)
4
5https://claude.com/cai/oauth/authorize?code=xxxxxxxxxxxxxxxxxxxx...
6
7Paste code here if prompted >

出力結果Copy
1Welcome to Claude Code v2.1.118
2
3Logged in as xxxxx@gmail.com
4Login successful. Press Enter to continue…

出力結果Copy
1Welcome to Claude Code v2.1.118
2
3Security notes:
4
51. Claude can make mistakes
6   You should always review Claude's responses, especially when running code.
7
82. Due to prompt injection risks, only use it with code you trust
9   For more details see:
10   https://code.claude.com/docs/ja/security
11
12Press Enter to continue…

出力結果Copy
1Welcome to Claude Code v2.1.118
2
3Use Claude Code's terminal setup?
4
5For the optimal coding experience, enable the recommended settings for your terminal: Shift+Enter for newlines
6
7> 1. Yes, use recommended settings
8  2. No, maybe later with /terminal-setup
9
10Enter to confirm · Esc to skip

まず、ターミナルに表示されるテキストのスタイル（テーマ）を選択します。お好みのものを選んでください。

次に、Claude Codeを利用するためのログイン方法を選択します。ご自身の契約状況に合わせて選択してください。一般的な個人利用の場合は「Claude account with subscription」を選ぶことが多いです。

選択後、Webブラウザが自動的に開き、Claudeアカウントへのログインまたは認証を求められます。ブラウザが自動で開かない場合は、ターミナルに表示されたURLをコピーして手動で開いてください。

ログインが成功すると、ターミナルにログイン完了のメッセージが表示されます。Enterキーを押して次に進んでください。

その後、Claude Codeを使用する上でのセキュリティに関する注意点が表示されます。AIが生成するコードは必ずご自身で内容を確認してから使用することや、信頼できるコードのみを扱うことなどが書かれています。内容を確認したらEnterキーを押してください。

最後に、Claude Codeを最適に利用するためのターミナル設定を推奨するかどうかの確認があります。Yes, use recommended settingsを選択することをおすすめします。これにより、ターミナルでの入力がより快適になります。

以上でClaude Codeのインストールと初期設定は完了です。

次回からはターミナルでclaudeコマンドを実行するだけで、すぐにAIアシスタントを使い始めることができます。

実際に動かしてみる

初期設定が完了したら、実際にClaude Codeに何かを依頼してみましょう。ターミナルに直接プロンプト（指示文）を入力します。

今回は「サイコロの1〜6がランダムに出るシンプルなHTMLファイルを作成し、ボタンを押したら数字が変わるように、1ファイルで完結させて」という指示を出してみます。

Copy
1サイコロの1〜6がランダムに出るシンプルなHTMLを作って
2ボタンを押したら数字が変わるようにして
31ファイルで完結させて

指示を入力すると、Claude Codeが提案するファイル作成の確認メッセージが表示されます。ここでYesを選択すると、dice.htmlというファイルが作成され、その内容がターミナルに表示されます。

出力結果Copy
1Do you want to create dice.html?
2
3> 1. Yes
4  2. Yes, allow all edits during this session (shift+tab)
5  3. No

以下がClaude Codeが生成したHTMLコードです。このコードは、サイコロの目のような絵文字が表示され、ボタンを押すたびにランダムな数字に変わるWebページを構成しています。

このファイルをWebブラウザで開くと、実際にサイコロアプリとして動作することを確認できます。このように、Claude Codeはあなたの指示に基づいてコードを生成し、開発作業をサポートしてくれます。

dice.htmlCopy
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>サイコロ</title>
6  <style>
7    body {
8      display: flex;
9      flex-direction: column;
10      align-items: center;
11      justify-content: center;
12      height: 100vh;
13      margin: 0;
14      background: #f0f0f0;
15      font-family: sans-serif;
16    }
17    #dice {
18      font-size: 120px;
19      line-height: 1;
20      margin-bottom: 40px;
21      transition: transform 0.1s;
22    }
23    #dice.rolling {
24      transform: scale(1.2) rotate(15deg);
25    }
26    button {
27      font-size: 24px;
28      padding: 14px 40px;
29      border: none;
30      border-radius: 8px;
31      background: #333;
32      color: #fff;
33      cursor: pointer;
34    }
35    button:hover {
36      background: #555;
37    }
38  </style>
39</head>
40<body>
41  <div id="dice">⚀</div>
42  <button onclick="roll()">振る</button>
43
44  <script>
45    const faces = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
46    const dice = document.getElementById('dice');
47
48    function roll() {
49      dice.classList.add('rolling');
50      setTimeout(() => {
51        dice.textContent = faces[Math.floor(Math.random() * 6)];
52        dice.classList.remove('rolling');
53      }, 100);
54    }
55  </script>
56</body>
57</html>

おわりに

本記事では、システムエンジニアを目指す初心者の方々に向けて、WSL2環境にNode.jsをインストールし、AIアシスタント「Claude」をターミナルから利用できるClaude Codeの導入から初期設定までを解説しました。ターミナル上で簡単なコマンドを実行するだけで、Claude Codeがインストールされ、ログイン認証などの初期設定も対話形式でスムーズに完了できます。実際に「サイコロアプリ」のHTMLコードを生成する例を通じて、AIに指示を出すことで開発作業を効率化できることを体験しました。この環境構築が、AIを活用したプログラミング学習の素晴らしい第一歩となることを願っています。