VS Codeの導入方法（Mac編）──バイブコーディングの"作業場"を整える

僕が本格的にバイブコーディングへ踏み出すきっかけとなったのが、前回の記事「Gemini CLIとの出逢い──黒い画面の奥に見えた新しい希望」」でした。

あの記事では、ノンプログラマーの僕にとって（？）苦手意識のあったターミナルと向き合い、Gemini CLIという“相棒”の存在に救われながら、どうにか黒い画面の世界に足を踏み入れた体験を赤裸々に告白。

ターミナルという真っ黒な壁。

英語のログが延々と流れる不安。

入力ミスで無情に返ってくるエラー。

そんな環境でも、Geminiが横にいてくれるだけで心が折れずに済んだ──そんな導入編でした。

あれはあれで僕にとっては大きな一歩だったのですが、バイブコーディングの旅路としては、まだ“入口に少し触れた”程度にすぎません。

そして今回。

いよいよここからは、実際に “何かを作る”ための作業環境を整えるフェーズに入っていきます。

次に必要になるのが、コードを書くための“作業場”。つまり Visual Studio Code（通称、VS Code） の導入です。

VS Code自体はそこまで難しいツールではありませんが、

どこからダウンロードするのか？
初期設定はどうすればいいのか？
最低限どんな拡張機能を入れておけばいいのか？

といった点は、最初に知っておくと後々とてもラクになります。

この記事では、そんな「VS Codeを導入して、すぐバイブコーディングを始められる状態に整える」という目的に絞って、手順をシンプルにまとめていきます。

Gemini CLIの記事より劇的な展開はありませんが（笑）、これからバイブコーディングするうえで、この“作業場の準備”は避けて通れません。

まずは肩の力を抜いて、一緒に整えていきましょう。

技術メモ：VS Codeをインストールする（Mac編）

さて、前置きが長くなりましたが、さっそくVS Codeのインストール手順を紹介します。

まず【VS Code（正式名称：Visual Studio Code）】とは、Microsoftが無料で提供しているコードエディタのこと。

バイブコーディングでWebサービスやアプリ開発するなら、まず最初にインストールしておきたい“作業場（アプリ）”です。

ここではMacを使っている方向けに、最短・最小の手順をまとめました。

① 公式サイトからダウンロードする

まずは VS Code の公式サイトへアクセスします。

➡ https://code.visualstudio.com/

ページに入ると「Download for MacOS」という青いボタンがあるのでクリック（Apple Silicon / Intelの違いは自動判定されるため、そのままでOKです）。

ダウンロードされるファイルはZIP形式になっています。

② ZIPファイルを展開して Applications フォルダへ

ダウンロードが終わったら、ZIPファイルをダブルクリックすれば自動的に解凍されます。すると「Visual Studio Code.app」が出てくるので、これをApplications（アプリケーション）フォルダにそのままドラッグ＆ドロップ。

普通の合うプリをダウンロードする手順と変わりないです。

③ 覚えておくと便利なショートカット

VS Codeが立ち上がると、左にアイコンが並び、右側は広いエディタ画面になっているはずです。先に便利なショートカット方法だけ押さえておきましょう。

● ターミナルの表示 / 非表示

⌘ + J

あの黒い画面（ターミナル）を開くためのショートカット。VS Codeはターミナルを直接操作できる点が最大のメリットかもしれません。

(※上のメニューバーから、ターミナル → 新しいターミナルでも開くことができます)

● フォルダを開く

⌘ + O（またはメニューバーからファイル → フォルダを開く）

バイブコーディングでは、制作するWebサービスやアプリごとにフォルダ分けしておくと安心です（むしろマストでフォルダ分けしましょう）。

● 保存

⌘ + S

これはお決まりのショートカットですね。

④ 日本語化する

VS Codeは標準で英語表示ですが、拡張機能で日本語化できます。

画面左の四角アイコン（Extensions）をクリック
「Japanese Language Pack」で検索
インストール

再起動するとVS Codeが日本語化されます。もちろん英語のまま使ってもOKです。

⑤ インストール完了！

これでVS Codeの導入は完了です。ここまでの手順は非常にシンプルなので、迷うところはほぼありません。

VS Codeは、バイブコーディングをする上で必須アイテムの1つですから、必ず今この場でダウンロードしておきましょう。

＜参考動画＞

VS Codeのインストール方法は、この動画などがとても参考になりました（英語解説です）。

準備OK

ここまでで“作業場”はひと通り整いました。次回はいよいよ、より実践的なバイブコーディングに踏み込んでいきます。

実際にやってみると、これが想像以上に大変で……。

何につまずいたのか、どうやって乗り越えたのか、そして最初にどんなものを作ったのか。そのあたりを、次の記事で具体的にお話ししていきます。