VS Codeをインストールして開発用に設定する

この Atom では、プログラムを書くための「作業台」となるエディタ VS Code（Visual Studio Code）をパソコンにインストールし、AI ツールを使った開発にすぐ取りかかれる状態にします。料理にたとえると、「まな板と包丁をキッチンに揃える」ステップです。ここが終われば、次の Atom からコードを書き始められます。

• ターミナル（黒い画面）で簡単なコマンドを打てる状態であること（前の Atom で学習済み）
• Windows / macOS / Linux いずれでも OK
• 所要時間の目安: 10〜15 分

---

インストールから設定完了まで、やることは大きく 4 つです。

1. VS Code をダウンロードしてインストールする
2. 日本語化する
3. 開発に役立つ拡張機能を入れる
4. 正しく動いているか確認する

---

1. ブラウザで code.visualstudio.com を開きます
2. 画面中央の大きなボタン（あなたの OS に合ったものが自動表示されます）をクリックしてダウンロードします
3. ダウンロードしたファイルを開き、画面の指示どおりに進めます
   • Windows: .exe ファイルをダブルクリック → 「次へ」を押していく。「PATH に追加する」にチェックを入れるのを忘れずに
   • macOS: .zip を展開 → 出てきた Visual Studio Code.app を「アプリケーション」フォルダへドラッグ

つまずきポイント

---

VS Code は最初は英語表示です。日本語にしましょう。

1. VS Code を起動します
2. 画面左側のブロック状アイコン（拡張機能）をクリックします
3. 検索欄に Japanese Language Pack と入力します
4. 一番上に出てくる「Japanese Language Pack for Visual Studio Code」の Install ボタンを押します
5. 右下に「再起動しますか？」と聞かれたら Restart をクリックします

再起動後、メニューが日本語になっていれば成功です。

AI に聞いてみよう: もし途中でわからなくなったら、ChatGPT や Claude に
「VS Code の Japanese Language Pack をインストールしたのにメニューが英語のままです。どうすればいいですか？」
と聞いてみてください。OS ごとの解決策を教えてくれます。

---

拡張機能（＝VS Code に追加できる便利な道具）を 3 つ入れます。ステップ 2 と同じ手順で、検索欄に名前を入れて Install を押すだけです。

良い例 / 悪い例

• 良い例: 上の 3 つをまず入れて、必要になったら追加する → シンプルで迷わない
• 悪い例: 「おすすめ拡張機能 30 選」を全部入れる → 動作が重くなり、どれが何をしているかわからなくなる

---

ターミナル（前の Atom で使った黒い画面）を開いて、次のコマンドを入力してください。

code --version

これは「VS Code のバージョン番号を表示してください」という意味です。

1.XX.X のようなバージョン番号が表示されれば、VS Code が正しくインストールされています。

次に、ターミナルから VS Code を起動できるか試します。

code .

これは「今いるフォルダを VS Code で開いてください」という意味です。VS Code のウィンドウが立ち上がれば成功です。

AI に聞いてみよう: うまくいかない場合は、Claude や ChatGPT に
「ターミナルで code --version を打ったら command not found と出ます。OS は macOS です。」
のように、エラーメッセージと OS 名を伝えてみてください。的確な解決策が返ってきます。

---

---

以下をすべて満たしていれば、この Atom は完了です。

• code --version でバージョン番号が表示される
• code . で VS Code が起動する
• メニューが日本語になっている
• Prettier・ESLint・GitLens の 3 つの拡張機能がインストール済み

おめでとうございます！ これで「作業台」の準備が整いました。次の Atom からは、この VS Code を使って実際にコードを書いていきます。