サイオステクノロジー（Tech.Lab）の技術ブログ

全672件

2025/08/26

こんな方へ特におすすめ新卒エンジニアになった方本格的な開発環境を構築したい方概要こんにちは。サイオステクノロジーのはらちゃんです！新卒として4月に入社し、今回初めてのブログ執筆です。 VS CodeはWSL上で起動すべきだという3つの理由とその手順をお伝えします。 WSLとGit Bashの違いについて気になる方は、こちらのブログをご覧ください。   わたしの悩み Windows PCで開発環境を整え、いよいよコーディングを始めようとしたとき、先輩エンジニアからこう言われました。   「VS CodeはWSL上で起動するようにね」   Windows上でアイコンをクリックすれば快適に動くのに、なぜわざわざ黒い画面（ターミナル）から起動する必要があるんだろう…？私も最初はそう思い、少し戸惑いました。しかし、この「WSL上でVS Codeを起動する」という一手間には、将来のあなたの開発効率を劇的に向上させる、明確で重要な理由が3つあったのです。今回は、その理由と具体的な手順を分かりやすく解説します。   3つの理由理由1：Linuxの圧倒的なパフォーマンスを活かせる   「 npm install がやたら遅い…」「 git status の表示に時間がかかる…」もしあなたがWindows上で直接これらのコマンドを実行しているなら、その原因はファイルシステムの相性の悪さかもしれません。 Windowsが使っている「NTFS」というファイルシステムは、Linux向けのツール群との相性が良くありません。一方、WSL内のLinuxが使っているファイルシステム（ext4）は、これらのツールが最高のパフォーマンスを発揮できるよう最適化されています。 VS CodeをWSL上で起動することで、ファイル操作がすべてLinux内で完結するため、驚くほどコマンドの実行が速くなります。この速度差は、日々の開発業務において大きなストレス軽減に繋がります。   理由2：ツールの「互換性」問題を根本から回避できる   Web開発で使われるツールの多くは、元々Linux環境で使われることを前提に作られています。そのため、Windows環境でそのまま使おうとすると、様々な互換性の問題に直面することがあります。パスの記法: Windows C:\Users\Taro とLinux /home/taro のようなパスの違い。シェルスクリプト: OSによるコマンドの違いで、配布されたスクリプトが動かない。 Docker: Linuxカーネルの機能に依存しているため、WSL2上が最もスムーズ。 VS CodeをWSL上で起動すれば、あなたの開発環境はLinuxそのものになります。これにより、厄介な互換性の問題を未然に防ぎ、ツールの導入や実行で悩む時間を大幅に削減できます。   理由3：チーム開発で「環境差異」に悩まなくなる「自分のPCだと、なぜか動かない…」チーム開発で最も避けたいのが、この環境差異によるトラブルです。チームにmacOSやLinuxを使っているメンバーがいると、OSの違いが原因で、あなただけがエラーに遭遇するケースは少なくありません。   簡単！WSLから起動する手順前提条件 WSL2 （Ubuntuなど）がインストールされていること。 Windowsに Visual Studio Code 本体がインストールされていること。   ステップ1：拡張機能「Remote – WSL」をインストールするまず、VS CodeとWSLを連携させるための公式拡張機能をインストールします。   Windows上で普通にVS Codeを起動します。   アプリのアイコンかスタートメニューで検索してください   左側のアクティビティバーにある四角いアイコン（拡張機能）をクリックします。   画面左のメニューバーから拡張機能（上から6つ目）を選択できます   検索バーに「 Remote – WSL 」と入力します。   表示された拡張機能（Microsoft製）の「インストール」ボタンをクリックします。   ステップ2：WSLターミナルから「code .」で起動する次に、WSLのターミナルからVSCodeを起動します。 Windows TerminalやUbuntuのアプリなどから、WSLのターミナルを起動します。   画像はUbuntuです。ご自身の環境に合わせてください   cd コマンドを使って、開発プロジェクトのあるディレクトリに移動します。 # 例：ホームディレクトリの 'projects/my-app' に移動 cd ~/projects/my-app そのディレクトリで、以下のコマンドを実行します。 code . code . は、「今いるディレクトリ（カレントディレクトリ）をVS Codeで開いて」という意味のコマンドです。初めて実行する際は、WSL側にVS Codeのサーバーが自動でインストールされるため、少し時間がかかります。2回目以降はすぐに起動します。起動したVS Codeの左下が緑色になり、「 WSL: Ubuntu 」のように表示されていれば成功です！これであなたのVS Codeは、WSL環境に接続された状態で動いています。   まとめ｜Windows × WSL × VS Codeは「最強の組み合わせ」今回ご紹介した方法は、Windowsの快適なUIと操作性を享受しつつ、Linuxの強力で安定した開発環境の恩恵も受けられる、まさに「いいとこ取り」のテクニックです。最初は少し不思議に感じるかもしれませんが、この方法を一度マスターすれば、今後のあなたのエンジニアキャリアにおいて、計り知れないメリットをもたらしてくれるはずです。 Windowsでの開発に、もはや妥協は必要ありません。今日からあなたも「 code . 」をWSLで叩いて、快適な開発ライフをスタートさせましょう！     ご覧いただきありがとうございます！この投稿はお役に立ちましたか？役に立った役に立たなかった 0人がこの投稿は役に立ったと言っています。 The post VS Codeの使い方｜WSL連携で開発効率を上げる方法 first appeared on SIOS Tech. Lab .

サイオステクノロジー（Tech.Lab） の技術ブログ

コンテンツ

サイオステクノロジー（Tech.Lab）の技術ブログ