hack
hack
マイページ ワークショップ 記事 Tips 用語集 連絡板 アーカイブ
MDファイル構築
フルプラン
LINKS
受講準備 Windowsの準備 MCP接続 ログアウト

読み込み中...

受講前の準備ガイド

この講習会では Claude Code というAIツールを使って学習を進めます。
このページでは、Claude Code を使い始めるために必要なソフトウェアを順番にインストールします。

このページでやること

  1. 0 ターミナル(Mac)/ PowerShell(Windows)を開く
  2. 1 Claude アカウントを作成し、有料プランに加入する
  3. 2 Node.js をインストールする(v22 LTS)
  4. 3 Git をインストールする
  5. 4 Claude Code をインストールする
  6. 5 Claude Code にログインする
  7. 6 VSCode をインストールし、講習の基本画面を準備する

全ステップ完了後、MCP接続ガイド に進みます。

所要時間の目安

約30〜60分(初めての方)。途中で中断しても、続きから再開できます。

コマンドの実行方法

この講習では「コマンド」と呼ばれる短いテキストをパソコンに入力して操作します。
初めてでも大丈夫です。以下の3ステップだけ覚えれば進められます。

コマンド実行の3ステップ: 1.コピー 2.貼り付け 3.Enter

「ターミナル」「PowerShell」とは?

パソコンに文字で指示を出すためのアプリです。難しそうに見えますが、このガイドではコピー&貼り付けだけで進められるので安心してください。

Mac → ターミナル

黒い画面のアプリです。最初から入っています。

Windows → PowerShell

青い画面のアプリです。最初から入っています。

覚えておくこと

  • - コマンドは1行ずつ入力して Enter で実行します
  • - 実行中は画面が動いて文字が流れますが、止まるまで待ちましょう
  • - 止まったら次のコマンドが入力できます(入力待ちの印が出ます)
  • - 間違えても大丈夫です。やり直しがきく操作しか行いません

ターミナルはチャットとは違います

ターミナル(PowerShell)は LINE やメールのような入力画面とは操作方法が異なります。
戸惑いやすいポイントをまとめました。

カーソル移動にマウスは使えません

入力中のテキスト内でクリックしてカーソルを移動することはできません。代わりにキーボードの矢印キーを使います。

やりたいこと Mac Windows
1文字左に移動 ← ←
1文字右に移動 → →
行の先頭に移動 Ctrl + A Home
行の末尾に移動 Ctrl + E End
単語単位で移動 Option + ← / → Ctrl + ← / →

文字の削除

やりたいこと Mac Windows
カーソルの左の1文字を削除 Delete(バックスペース) Backspace
入力中の行をすべて消す Ctrl + U Esc
カーソルから行末まで削除 Ctrl + K —(なし)

コピー&貼り付けの注意

ターミナル内のテキストをコピーしたり、外からテキストを貼り付ける方法は通常のアプリと少し異なります。

やりたいこと Mac ターミナル Windows PowerShell
画面の文字をコピー ドラッグ選択 → Cmd + C ドラッグ選択 → Enter または右クリック
テキストを貼り付け Cmd + V 右クリック または Ctrl + V

※ Windows の PowerShell では Ctrl + C はコピーではなく「実行中のコマンドを中断」になるので注意してください。

Enter キーの意味が違います

チャットアプリでは Enter で改行できますが、ターミナルでは Enter = 実行 です。

やりたいこと Mac Windows
コマンドを実行する Enter Enter
改行して続きを書く(長いコマンド) 行末に \ を書いて Enter 行末に ` を書いて Enter
実行中のコマンドを中断する Ctrl + C Ctrl + C

※ この講習ではコマンドは全て1行なので、改行を使う場面はほとんどありません。

便利なショートカット

やりたいこと キー操作
前に実行したコマンドを呼び出す ↑(上矢印キー)
呼び出したコマンドを戻す ↓(下矢印キー)
画面をクリア(見やすくする) clear と入力して Enter
入力候補を表示(ファイル名など) Tab キー

画面の見え方(参考)

Mac のターミナル

Mac ターミナルの画面例

Windows の PowerShell

Windows PowerShell の画面例

上の画像のように、コマンドを入力して Enter を押すと結果が表示されます。このガイドでは全てのコマンドにコピーボタンが付いているので、入力ミスの心配はありません。

必要なソフトをインストールする

ここから、講習に必要なソフトウェアを順番にインストールしていきます。
お使いのOSに合わせて手順が異なります。下のボタンからお使いの環境を選んでください。

1

Node.js をインストールする

Claude Code の動作に必要です。バージョン 22(LTS)をインストールしてください。

ポイント

ダウンロードページには色々な選択肢が並んでいますが、画面下部のボタン1つだけ押せばOKです。上のコード欄は無視してください。

インストール手順

  1. 1. nodejs.org/ja/download を開く
  2. 2. 画面下部の 「macOS インストーラー (.pkg)」 ボタンをクリック
  3. 3. ダウンロードされた .pkg ファイルをダブルクリック
  4. 4. インストーラーは全て「続ける」→「インストール」でOK(設定変更不要)
Node.jsダウンロードページ

↑ 画面下部の「macOS インストーラー (.pkg)」ボタンだけ押せばOK。上のコード欄は無視

Node.jsインストーラー

↑ この画面は「インストール」を押すだけ。変更不要

2

Claude アカウントを作成し有料プランに切り替える

Claude Code を使うにはアカウントと有料プランが必要です。

アカウント作成

  1. 1. claude.ai/login を開く
  2. 2. 「アカウントを作成」をクリック
  3. 3. メールアドレスまたはGoogleアカウントで登録
  4. 4. メール認証を完了する
Claudeアカウント作成画面

↑ アカウント作成画面

有料プランへの切り替え

Claude Code を使うには Pro プラン(月額 $20)以上が必要です。

  1. 1. アカウント作成後、アップグレードページ を開く
  2. 2. Pro プランを選択
  3. 3. クレジットカード情報を入力して完了
有料プラン登録画面

↑ Pro プランを選択してアップグレード

プラン比較

プラン月額目安
Pro$20この講習では Pro で十分です
Max 5x$100Proの約5倍。1日中使っても余裕
Max 20x$200業務で本格的に使う場合
3

ターミナルを開く

Mac には「ターミナル」というアプリが最初から入っています。これを使ってコマンドを実行します。

方法① Spotlight検索を使う(おすすめ)

Spotlight検索を開く

↑ Command + Space を押してSpotlight検索を開く

ターミナルと入力

↑ 「ターミナル」と入力してEnterを押す

ターミナル起動画面

↑ 黒い画面が開いたら成功。ここにコマンドを入力します

方法② Finder から開く

Finderからユーティリティ

↑ Finder → アプリケーション → ユーティリティ

ターミナルをダブルクリック

↑ ターミナル.app をダブルクリックで起動

4

Claude Code をインストールする

ターミナルにコマンドを1つ貼り付けるだけでインストールできます。

インストールコマンド

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

⚠️ 必須:PATH の設定

インストール完了後、必ず以下のコマンドを実行してください。これをしないと次のステップで「command not found」エラーが出ます。

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc

確認コマンド

claude --version

バージョン番号が表示されれば成功です。

claude --version 確認画面

↑ バージョン番号が表示されれば成功

動作診断コマンド

何か問題がある場合は、以下で自動診断できます:

claude doctor
5

Claude Code にログインする

インストールしたClaude Code にアカウントを紐づけます。

手順

  1. 1. ターミナルで以下を実行:
    claude
  2. 2. 自動でブラウザが開きます
  3. 3. Step 2 で作成した Claude アカウントでログイン
  4. 4. 「許可」をクリック
  5. 5. ターミナルに戻ると、Claude Code が使える状態になっています

ログイン成功の目印

ターミナルに > のような入力待ちカーソルが表示されたら成功です。
試しに「こんにちは」と入力してみてください。AIが返答します。

参考動画:初期セットアップの流れ

6

GitHub アカウントを作成し、Claude Code と連携する

Git はファイルの変更履歴を管理するツールです。まず GitHub アカウントを作成してから、Claude Code にインストールと連携を任せましょう。

① GitHub アカウントを作成する

  1. 1. github.com を開く
  2. 2. 「GitHubに登録する」をクリック
  3. 3. GoogleアカウントまたはメールアドレスでGitHubアカウントを作成
GitHubトップ

↑ 中央の「GitHubに登録する」をクリック

GitHubアカウント登録

↑ GoogleアカウントまたはメールアドレスでGitHubアカウントを作成

② プロフィールURLをコピーする

  1. 1. 右上のアイコンをクリック → 「Your profile」を選択
  2. 2. ブラウザのURLバーに表示されているURLをコピー
プロフィールアイコン

↑ 右上のアイコンをクリック

Your profile

↑ 「Your profile」を選択

プロフィールURL

↑ ブラウザのURLバーに表示されているURLをコピーする

③ Claude Code にアカウント連携を依頼する

Claude Code のターミナルに以下を入力してください:

Gitをインストールして、このGitHubアカウントと連携してください (コピーしたURLをここに貼り付ける)

Claude Code が Git のインストールからアカウント連携まで自動で行います。

7

VSCode をインストールする

VSCode(Visual Studio Code)は、この講習で使うコードエディタです。ファイル管理・編集・ターミナルが1つの画面にまとまっています。

インストール手順

  1. 1. code.visualstudio.com を開く
  2. 2. 「Download for Mac」をクリック
  3. 3. ダウンロードした .dmg ファイルを開く
  4. 4. VSCode のアイコンを「アプリケーション」フォルダにドラッグ
  5. 5. アプリケーションから VSCode を起動

サイドバーとターミナルを開く

  1. 1. サイドバーを開く: 左上の「表示」メニュー →「プライマリ サイドバー」にチェック(または Cmd + B)
  2. 2. ターミナルを開く: 上部メニュー「ターミナル」→「新しいターミナル」(または Ctrl + `)

講習ワークフォルダを開く

  1. 1. VSCode のメニューから「ファイル」→「フォルダーを開く」
  2. 2. デスクトップの「講習ワーク」フォルダを選択(なければ作成)
  3. 3. 左のファイル一覧にフォルダ名が表示されればOK

ターミナルで Claude Code を起動

  1. 1. VSCode 上部メニューから「ターミナル」→「新しいターミナル」
  2. 2. 画面下部にターミナルが表示される
  3. 3. claude と入力して Enter → Claude Code が起動

これ以降の講習はすべて VSCode の中で進みます

左でファイルを確認し、下のターミナルで Claude Code と対話する。この2つのエリアを使って講習を進めます。

0

PowerShell を開く

Windows では「PowerShell」を使ってコマンドを実行します。最初から入っているので、インストールは不要です。

開き方

  1. 1. キーボードの Windows キーを押す
  2. 2. 「powershell」と入力
  3. 3. 「Windows PowerShell」をクリック

青い背景のウィンドウが開けば成功です。ここにコマンドを入力していきます。

「管理者として実行」は不要です。通常のPowerShellで大丈夫です。

1

Claude アカウントを作成する

Claude Code を使うには、Anthropic社の Claude アカウントと有料プランが必要です。

手順

  1. 1. ブラウザで https://claude.ai/login を開く
  2. 2. 「アカウントを作成」をクリック
  3. 3. メールアドレスまたはGoogleアカウントで登録
  4. 4. メール認証を完了する

有料プランについて

Claude Code を使うには Pro プラン(月額 $20)以上が必要です。
アカウント作成後、アップグレードページ からプランをアップグレードしてください。

プランごとの使用量(レートリミット)

Claude Code は AI の処理能力を使うため、プランごとに使用量の上限があります。上限に達すると一定時間待つ必要があります。

プラン 月額 使用量の目安
Pro $20 基本的な学習・開発に十分。集中して使うと1日の途中で上限に達することがある
Max 5x $100 Pro の約5倍。1日中使っても余裕がある
Max 20x $200 Pro の約20倍。業務で本格的に使う場合向け

この講習では Pro プランで十分です。ただし、1日に長時間続けて使うと上限に達する場合があります。その場合は少し時間を置いてから再開してください。

使用量は Claude Code 内で /usage と入力するか、claude.ai/settings/usage で確認できます。

2

Git for Windows をインストールする

Windows で Claude Code を使うには Git for Windows が必須です。Claude Code が内部で使用します。

手順

  1. 1. https://git-scm.com/download/win を開く
  2. 2. 「Click here to download」をクリック
  3. 3. ダウンロードした .exe ファイルを実行
  4. 4. インストーラーの設問はすべてデフォルトのまま「Next」でOK
  5. 5. 最後に「Install」→「Finish」

確認コマンド(PowerShell を一度閉じて再度開いてから)

git --version

例: git version 2.53.0.windows.1

初期設定(名前とメールアドレス)

以下の2つを自分の名前・メールに書き換えて実行してください。

git config --global user.name "あなたの名前"
git config --global user.email "your@email.com"
3

Node.js をインストールする

講習で使うツール(Astro、Claude Code等)の動作に必要です。バージョン 22(LTS)をインストールしてください。

手順

  1. 1. https://nodejs.org を開く
  2. 2. 「LTS」と書かれたボタン(v22系)をクリックしてダウンロード
  3. 3. ダウンロードした .msi ファイルを実行
  4. 4. インストーラーはすべてデフォルトのまま「Next」でOK

確認コマンド(PowerShell を一度閉じて再度開いてから)

node -v

例: v22.21.0

4

Claude Code をインストールする

いよいよ本題です。PowerShell で以下のコマンドを実行するだけでインストールできます。

インストールコマンド(PowerShell)

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

自動でダウンロード&インストールされます。完了まで数秒〜数十秒です。

パスの設定(重要)

インストーラーは自動でPATH(パス)を設定しますが、claude コマンドが見つからない場合は以下を試してください。

  1. 1. まずPowerShell を一度閉じて再度開きます(これだけで解決することが多いです)
  2. 2. それでもダメな場合、以下を実行してPATHを更新します:
    $env:Path = [System.Environment]::GetEnvironmentVariable("Path","User") + ";" + [System.Environment]::GetEnvironmentVariable("Path","Machine")
  3. 3. それでも claude が見つからない場合は、手動でパスを追加します:
    [Environment]::SetEnvironmentVariable("Path", $env:LOCALAPPDATA + "\Programs\claude-code;" + [Environment]::GetEnvironmentVariable("Path", "User"), "User")

    実行後、PowerShell を閉じて再度開いてください。

Node.js のパス確認

Node.js も同様にパスが通っているか確認しておきましょう:

node -v; npm -v

両方バージョンが表示されればOKです。表示されない場合は、Node.js インストーラーを再実行してください(「Repair」を選択)。

確認コマンド

claude --version

バージョン番号が表示されれば成功です。

動作診断コマンド

何か問題がある場合は、以下で自動診断できます:

claude doctor

問題箇所と対処法が表示されます。

5

Claude Code にログインする

インストールしたClaude Code にアカウントを紐づけます。

手順

  1. 1. PowerShell で以下を実行:
    claude
  2. 2. 自動でブラウザが開きます
  3. 3. Claude のアカウント(Step 1で作成)でログイン
  4. 4. 「許可」をクリック
  5. 5. PowerShell に戻ると、Claude Code が使える状態になっています

ログイン成功の目印

PowerShell に > のような入力待ちカーソルが表示されたら成功です。
試しに「こんにちは」と入力してみてください。AIが返答します。

参考動画:初期セットアップの流れ

6

VSCode をインストールする

VSCode(Visual Studio Code)は、この講習で使うコードエディタです。ファイル管理・編集・ターミナルが1つの画面にまとまっています。

インストール手順

  1. 1. code.visualstudio.com を開く
  2. 2. 「Download for Windows」をクリック
  3. 3. ダウンロードしたインストーラー(.exe)を実行
  4. 4. 画面の指示に従って「次へ」→「インストール」
  5. 5. インストール完了後、VSCode を起動

サイドバーとターミナルを開く

VSCode を起動すると、最初は何も表示されていない画面が開きます。講習ではサイドバー(ファイル一覧)とターミナルの2つを使うので、先に開いておきます。

VSCode 初期画面

↑ 起動直後の画面。まだ何も開いていない状態

  1. 1. サイドバーを開く: 左上の「表示」メニュー →「プライマリ サイドバー」にチェック(または Ctrl + B)
  2. 2. ターミナルを開く: 上部メニュー「ターミナル」→「新しいターミナル」(または Ctrl + `)
VSCode サイドバーとターミナルを表示した状態

↑ サイドバー(左)とターミナル(下)が表示された状態。これが講習の基本画面です

講習ワークフォルダを開く

  1. 1. VSCode のメニューから「ファイル」→「フォルダーを開く」
  2. 2. デスクトップの「講習ワーク」フォルダを選択(なければ作成)
  3. 3. 左のファイル一覧にフォルダ名が表示されればOK
VSCode フォルダを開く画面

↑ 左サイドバーの「フォルダーを開く」をクリック

講習で使う基本構成

VSCode の画面は3つのエリアに分かれています。左のファイル一覧と、下のターミナルを使います。

VSCode 基本構成(サイドバー + ターミナル)

↑ 左: ファイル一覧 / 上: エディタ / 下: ターミナル

ターミナルで Claude Code を起動

  1. 1. VSCode 上部メニューから「ターミナル」→「新しいターミナル」
  2. 2. 画面下部にターミナルが表示される
  3. 3. claude と入力して Enter → Claude Code が起動
VSCode ターミナルで Claude Code を起動

↑ 下のターミナルで claude を起動した状態。ここで講習が進みます

これ以降の講習はすべて VSCode の中で進みます

左でファイルを確認し、下のターミナルで Claude Code と対話する。この2つのエリアを使って講習を進めます。

7

Python をインストールする

講習の STEP 1 以降で Python を使います。Windows には標準で入っていないため、事前にインストールしてください。VSCode のターミナルから確認・操作します。

まず確認: 既にインストールされていませんか?

VSCode のターミナル(下部のパネル)で以下を実行してください。

python --version

Python 3.x.x と表示されれば、インストール済みです。Step 7 はスキップしてください。

「コマンドが見つかりません」「認識されていません」と表示された場合は、以下の手順でインストールします。

インストール手順

  1. 1. python.org/downloads を開く
  2. 2. 「Download Python 3.x.x」の黄色いボタンをクリック
  3. 3. ダウンロードしたインストーラー(.exe)を実行
  4. 4. 最初の画面で「Add python.exe to PATH」に必ずチェックを入れる

    ⚠️ これが最も重要なステップです

    チェックを入れないと、ターミナルから python コマンドが使えません。もしチェックを忘れた場合は、インストーラーを再度実行し「Modify」→「Add Python to environment variables」にチェックしてください。

  5. 5. 「Install Now」をクリックしてインストール
  6. 6. 完了画面で「Disable path length limit」が表示されたらクリック(任意だが推奨)

VSCode で確認する

インストール後、VSCode を一度閉じて再度開いてください(PATH の反映に再起動が必要です)。

  1. 1. VSCode を再起動する(閉じて開き直す)
  2. 2. ターミナルを開く(Ctrl + `)
  3. 3. 以下のコマンドを実行:
    python --version

Python 3.x.x と表示されれば成功です。

pip も確認

pip は Python のパッケージ管理ツールです。通常は Python と一緒にインストールされます。

pip --version

バージョン番号が表示されればOKです。

うまくいかない場合

  • • 「python が認識されていません」→ VSCode を再起動してください。それでもダメなら PC を再起動
  • • python でMicrosoft Store が開く → python.org から直接インストールし直してください(Store版は推奨しません)
  • • python3 なら動くが python は動かない → 問題ありません。講習中は Claude Code が自動で判別します

なぜ Python が必要?

講習では Claude Code に「このデータを集計して」「ファイルを整理して」と指示すると、Claude Code が Python スクリプトを書いて実行します。あなたが Python を書く必要はありませんが、実行環境としてインストールが必要です。

準備完了!

すべてのインストールが完了したら、次は講習会のMCPサーバーに接続します。
MCP接続ガイドに進んでください。

MCP接続ガイドへ進む