ここは仕組みから学ぶ「詳しい版」です。設定を終わらせたいだけなら 全10ステップの手順書 が近道です。
作業場所を整える（VS Code）
このページのゴール：VS Codeで dev フォルダを開き、中のターミナルを出せる
所要時間の目安: 15分動作確認日: 2026-08-15手順
1. VS Codeをダウンロードする
VS Code 公式サイト を開きます。
画面中央の大きなダウンロードボタンを押してください。サイトがあなたのパソコンを判別して、正しい方を渡してくれます。
Mac の場合
Macの場合、.zip ファイルが落ちてきます。
Windows の場合
Windowsの場合、.exe ファイルが落ちてきます。「User Installer」と書かれている方で問題ありません。管理者の権限は不要です。
2. インストールする
Mac の場合
- ダウンロードした
.zipをダブルクリックします - 出てきた「Visual Studio Code」を、アプリケーションフォルダにドラッグします
- アプリケーションフォルダから起動します
初回起動時に「インターネットからダウンロードされたアプリケーションです」と確認されます。「開く」を押してください。
Windows の場合
- ダウンロードした
.exeをダブルクリックします - 同意して「次へ」を押していきます
- 「PATH への追加」という項目には、チェックを入れたままにしてください
最後に「完了」を押すとVS Codeが起動します。
3. dev フォルダを開く
- VS Codeのメニューから「ファイル」→「フォルダーを開く」を選びます
- 1-5 で作った
devフォルダを選びます - 「このフォルダー内のファイルの作成者を信頼しますか？」と聞かれたら、信頼する方を選びます
左側にフォルダの中身が並びます。今は空のはずです。これで正常です。
4. VS Codeの中でターミナルを出す
VS Codeには、ターミナルが内蔵されています。
Mac の場合
⌃（コントロール）を押しながら `（バッククォート）を押します。
Windows の場合
Ctrl を押しながら `（バッククォート）を押します。
画面下半分に、黒っぽい入力欄が出てきます。これがターミナルです。Phase 2 で本格的に扱います。
同じキーをもう一度押すと閉じます。
✅ ここまで出来たらOK
確認すること：VS Codeの左側に dev フォルダが表示され、下側にターミナルを出し入れできる
そうならない場合 → エラー逆引きページ を見てください。
3つの道具の使い分け
これから、道具が少しずつ増えます。先に整理しておきます。
| 道具 | 役割 | 使うタイミング |
|---|---|---|
| VS Code | 作業場所。ファイルを見る・Claude Codeを動かす | 今日から毎日 |
| Claudeアプリ | 相談相手。画像を貼って聞ける | 詰まった時・エラーが出た時 |
| cmux / wmux | 複数のClaudeを同時に走らせる台 | ずっと後（Guideで紹介） |
今日入れるのはVS Codeだけです。Claudeアプリは 2-7 で使い方に触れ、cmux は詳しい版を終えてから扱います。
📖 出てきた言葉
エディタeditor ／ エディタ
文章やコードを書くための専用アプリ。VS Codeはその1つ。 メモ帳と違い、ファイルの中身と場所を同時に見渡せる。Claudeの仕事を目で追える。
VS CodeVisual Studio Code ／ ブイエスコード
Microsoftが無料で配布しているエディタ。世界でもっとも使われている。 Claude Codeと相性がよく、ターミナルまで内蔵している。最初の1つはこれで迷わない。
英語の画面で表示されて読めない
初回起動時に、日本語化の拡張機能を勧める通知が右下に出ます。
これを入れて再起動すると、メニューが日本語になります。
通知を消してしまった場合は、左側の四角が4つ並んだアイコンから Japanese Language Pack を検索してください。
フォルダを開いたのに左側が空っぽ
それが正常です。dev フォルダはまだ空だからです。
Phase 2 以降でファイルが増えると、ここに一覧が出てきます。