4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

npm installでまた詰んだ…を終わらせるWindows PCのWeb開発術:先輩の新刊が刺さった話

Last updated at Posted at 2025-08-19

こんにちは、グロースエクスパートナーズの@gxp-nyakyamuraです。

普段はMacでフロントエンド開発をしていますが、個人開発ではWindowsも使い、WSLで作業することが多いです。過去にはWindowsのローカルでそのまま開発したこともあります。自分は幸運にもWindowsデスクトップでの開発によりエラー等には直接遭遇していませんが、現場ではそうした事例があるのも事実。もし出会うと厄介そうだと感じており、回避策や再現性の高い環境づくりを今のうちに押さえておきたいと思っています。

そんな中、社内Slackで「大中さん(GxPのInternal Development Platoform室(IDP室)のエンジニア)が新著を出版」との知らせが。タイトルは「クラウド時代のWindows開発環境 VS Code・Docker・WSL徹底攻略」。自分の課題感にドンピシャだったので即購入し、一気に読みました。本記事では、本書のポイントと、実務で役立つエッセンスをフロントエンド視点でまとめます。

書籍と著者の紹介

書籍名: クラウド時代のWindows開発環境 VS Code・Docker・WSL徹底攻略
販売サイト: https://nextpublishing.jp/book/18714.html
発行日: 2025/07/11
著者: 大中 浩行

書籍内の著者紹介文より引用:

自動化やビルドパイプラインが専門だったが、マネージャーになったため、タスクがスタックしているという意味でのフルスタックエンジニアになってしまったアプリケーションエンジニア。

技術書らしからぬかわいい表紙も実はおすすめポイントの一つです。著者の大中さんが「本書のコンセプトであるリモート開発をどうイラストで表現するか?」を結構悩み、楽しそうにリモート開発しているイメージということで最終決定したとのこと。

こんな人におすすめ

  • Windows PCでフロントエンド開発しており、npm installやネイティブ拡張で詰まりがち
  • チームの開発環境標準化や、CIとの再現性に悩んでいる
  • WSL/Remote/Dev Containersを「名前は知っている」から一歩進めたい

Windowsフロントエンド開発の「あるある」問題をまず言語化

Windowsデスクトップ環境でもReact/Vue/Angularは動く。しかし、実案件でライブラリを積み上げていくと“茨の道”になる──これが本書の出発点です。

例えば以下のような例が見つかります。

なぜ“茨の道”になるのか?

  • ネイティブ拡張: C/C++などで書かれたnpmライブラリは、Windows向けのビルド環境(Visual Studio/MinGW等)整備が必要になりがち。
  • ファイルシステム差異: シンボリックリンクやパーミッションの扱いがUnixと異なる。
  • スクリプト非互換: npm-scriptsにUnix由来コマンドが含まれ、クロスプラットフォームでないことがある。

これらが積み重なると、開発者ごとの環境差異やCIとの不整合で時間が溶けます。チーム内からも「ローカルでは動くのにCIで落ちる」「Windowsローカルでは動かない」といった実例の共有がありました。

「クロスプラットフォームなのに…」が腑に落ちた話

正直ここが一番の気づきでした。自分の中で言語と開発の領域がごっちゃになっていたんだと思います。

一行まとめ:OS非依存は“言語”の約束。開発は“ツールチェーン”の現実。

  • クロスプラットフォームなのはJS/TSそのものとブラウザ実行環境。開発では、ネイティブ拡張やビルド、監視、リンク、権限、シェルなど“OS機能”に触れる。
  • フレームワークの“幸せな道”から外れ、ライブラリを積むほどOS差が露出する(特にネイティブ拡張・FS・シェル)。
  • だから「Windowsがダメ」ではなく、Linux互換な実行面に寄せる(WSL/Dev Containers/SSH/Codespaces)と筋が良い、という発想転換。
  • 自分はまだ遭遇していませんが、先回りで“環境をコード化(devcontainer.json)”し、再現性とCI一致を確保するのが安心だと納得しました。

この視点が入ると、「なぜ今Remote-Firstなのか?」の説明がスッと腹に落ちます。

解決の方向性:WSL2 × VS Code Remote ×(必要に応じて)Dev Containers

本書が提示する筋の良い解は、“Windowsの使い勝手を残しつつ、Linuxで開発・ビルドを完結させる”こと。その中核がVS CodeのRemote Developmentです。

仕組みの要点(誤解しがちなポイントの整理):

  • フロントエンド: Windows側のVS Codeアプリ
  • バックエンド: 接続先(WSL/SSH/コンテナ)で動く VS Code Server
  • 連携: Remote Development拡張が、編集・実行をリモート側に委譲

つまり、見た目はWindowsのVS Codeを操作しつつ、実処理はLinux側で完結します。WSLであれば、ターミナルで code . を実行すれば、そのままWSL上のプロジェクトをVS Codeで編集・実行できます。

ユースケース別の選択肢:

  • 単独/ローカル完結: WSL2 + Remote-WSL(最小コストでLinuxの恩恵)
  • チーム標準化/再現性: Dev Containers(devcontainer.jsonで環境ごと宣言)
  • クラウド開発: SSH先やCodespacesへ接続(スペック柔軟、ローカル非依存)

フロントエンド以外にも効きます(バックエンド適用の話)

ここで紹介している“Remote-First”な開発手法は、フロントエンドに限りません。言語ランタイムやミドルウェアをコンテナ/WSL/リモート先へ閉じ込めることで、バックエンドでも同じ効果(再現性・環境差吸収・CI整合)を得られます。

  • 本書でも、Ruby on Rails や Perl系フレームワーク(Dancer系)などの環境を立ち上げる例が挙げられています。
  • Remote-SSHを使えば、社内/クラウドのLinuxサーバ上でそのまま“本番に近い”実行環境に接続可能。重い処理や長時間ジョブもローカル負荷を避けられます。

「Windowsでバックエンドは大変」を避けるために、実行・ビルド・依存管理をLinux側へ寄せるという設計は、そのまま適用できます。

チーム運用の視点(小話)

以前、弊社とよく一緒に仕事をする他社の方から伺った話が印象的でした。その会社は「ローカルでDockerは一切使わず、すべてリモート開発」を方針としており、当時の自分は「クラウドって高くないの?」と思っていました。実際は、必要な時だけVMのスペックを上げ下げでき、重い処理はクラウド側が担当するため、クライアントPCは高スペック不要。高価なPCの調達/メンテよりも、利便性とコストの両面で合理的という説明でした。

本書を読んで、そのアプローチが「環境の再現性」と「運用」の観点で筋が良いと腑に落ちました。

  • メリット: 迅速なオンボーディング、環境の標準化(devcontainer.jsonで構成共有)、CIとの乖離低減、重い処理のオフロード、PC買い替え/メンテの抑制、必要時だけスケールアップ。
  • 注意点: ネットワーク依存(レイテンシ/オフライン対策)、コストの継続監視(停止運用・スケジューリング)、シークレット/アクセス管理の整備。
  • 余談: チーム内でも「WSLでいろんなアプリを動かしているとZoomが落ちた」ケースがあり、ローカル資源の奪い合いを避ける意味でも“重い処理はリモートへ”は合理的だと感じています。

意思決定の目安:

  • 個人/軽量案件: WSL2 + Remote-WSLで十分(最小構成)
  • チーム/再現性重視: Dev Containersを前提に標準化(ローカル/リモートどちらでも)
  • スペック要求/端末制約: SSH先やCodespacesなどクラウド側へのリモート開発

まとめ

本書は、Windowsの快適さとLinuxの互換性を“Remote”で橋渡しするための実務知を、WSL/SSH/Dev Containersの3軸で体系立ててくれます。Windows環境を避けずに“適切に使い分ける”視点を与えてくれました。

書籍はこちら:
クラウド時代のWindows開発環境 VS Code・Docker・WSL徹底攻略(著:大中 浩行)
https://nextpublishing.jp/book/18714.html

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?