Windows での開発環境を整える
Visual Studio Code の環境としてこれまで WSL を利用することが多かったのですが、WSL ではない環境も整備できないか、ということで手順をまとめておきました。
作業フォルダを固定する
まず最初に、作業をするフォルダとして \projects のフォルダを作成して、そこに GitHub などのリポジトリのクローンを用意していくようにしたいと思います。
ということで、\projects のフォルダを作成して、次に進みます。
Git for Windows
コードのバージョン管理ツールとして Git for Windows をまず最初にインストールをします。以下のサイトからインストーラーをダウンロードします。
ダウンロードしたインストールファイルを実行します。
次へ、と進んでいって最後に Install をクリックしたら、インストールが完了となります。
Visual Studio Code をインストールする
続いて開発ツールとなる Visual Studio Code をインストールします。以下のサイトにアクセスをして、インストーラーをダウンロードしてください。
https://code.visualstudio.com/
インストーラーを利用して、Visual Studio Code をインストールしたら次に進みます。
パスの扱いの変更
Visual Studio Code は OS に合わせてコードを記述する形となっており、macOS や Linux での仕組みの違いでパスに関しては異なる動作をします。たとえば、パスをコピーすると Windows の場合だけ異なるパスになることがあります。
これは Visual Studio Code の設定で、explorer.copy を Auto から / に変更することで対応が可能です。
ユーザーの設定を変更しておくのと、念のため workspace の変更をしておくとリポジトリ単位で確保できるので便利です。.vscode/settings.json のファイルは以下のようにしました。
{
"explorer.copyRelativePathSeparator": "/",
"explorer.copyPathSeparator": "/"
}Antigravity のウィンドウを右に移動
個人的には Antigravity を利用しています。
Antigravity の利用状況の確認と Tips
このサイトのリニューアルに関しては、全面的に Antigravity を利用して作業自体も完了させることができました。使い始めた最初の頃は、これは便利や！とよく分からずあっというまにリミット声をしたわけですが、リミットのルールに関して頭に入れておく必要があると思って調べた内容です。
他のツール（ GitHub Copilot、Claude Code や Codex）のように、右側にチャットのウィンドウを表示したいと思います。これにより、左側にコードを参照できる状況を維持できるためです。
まず、Visual Studio Code の表示からプライマリーサイドバー（左側）とセカンダリーサイドバーの両方を開いている状況にして、左側に Antigravity の公式の機能拡張で繋いでるウィンドウを開きます。
この左側にあるウィンドウのタイトルのあたりをドラッグして右側に持っていきます。これで、Chat と Antigravity の切り替えが可能となります。
右側にある方がしっくりきますよね。
Nodo.js のバージョン管理ツール NVM
私が一番利用頻度が高いのが Next.js や Astro ということになるので、Node.js をインストールすることになります。インストーラーでインストールをするのではなく、バージョン管理ツールを利用するのが便利です。macOS や Linux では n を利用しているのですが、Windows の場合は NVM for Windows がよさそうなので、これを利用することにしました。
以下のサイトからダウンロードをクリックします。
すると、GitHub のリリースのページに遷移します。最新版を選択して、Assets の部分をクリックして開いて、対象となるプラットフォームを選択してダウンロード、その後インストーラーを起動します。
これで nvm のインストールが完了となりました。
PowerShell を最新版にする
私の環境のアップデートをあまりしていなかったこともあり、PowerShell のバージョンが古い状況でした。
ということで、GitHub のリポジトリから対象となるプラットフォームのインストーラーをダウンロードします。
このインストーラー、いつもみているやつですが最近 macOS ばかり触っていることもあり、懐かしい感じです。
これで、PowerShell も最新版になりました。
Node.js のインストール
PowerShell も最新版になったところで、Node.js をインストールします。この際のコマンドは簡単で、 nvm install lts で、サポート対象の最新版のインストールが完了となります。
これで、いつも WSL や macOS で作業をしていた内容を、Windows 上でもできるようになりました。