こんにちは！日々の開発、本当にお疲れ様です。

新しいプロジェクトに参加するたび、Node.jsのバージョン違いでエラーが起えたり、ローカルの環境が謎のライブラリで汚れていったり……そんな「環境構築の呪い」に頭を悩ませた経験はありませんか？

「どの端末でも一瞬で同じ開発環境が立ち上がり、ローカルを汚さず、しかもIDEから一歩も出ずにすべてが完結する」

そんな理想的なワークフローを、WebStormとDockerのタッグで実現する方法を、今回は一緒に紐解いていきましょう。これをマスターすれば、あなたの毎日のコーディングは劇的に楽になりますよ。難しい理論は抜きにして、まずは一緒に手を動かしてみましょう！

—

1. なぜ「WebStorm × Docker」なのか？（ツールの役割を理解する）

私たちがこれから構築するのは、「コードを書く場所（WebStorm）」の中に「プログラムが動く世界（Dockerコンテナ）」を直接つなぎ込むというモダンな開発環境です。

ローカル開発の限界

これまでは、あなたのパソコン（ホストOS）に直接Node.jsをインストールして開発していました。しかし、これだと「プロジェクトAはNode v16、プロジェクトBはNode v20が必要」といったバージョンの衝突が起きてしまいます。パソコンの中身がカオスになっていく原因ですね。

コンテナ開発の魔法

Dockerを使うと、プロジェクトごとに「必要なOS、Node.js、ライブラリ」をすべて詰め込んだ小さな箱（コンテナ）の中でコードを動かせます。
そして、JetBrains社の最高峰IDEであるWebStormは、このDockerコンテナの内部と深く連携する機能を持っています。

コンテナの中にあるNode.jsを使ってコードを実行・テストできる
コンテナの中のソースコードをローカルとリアルタイムで同期できる
ブラウザや外部ツールを開かなくても、WebStormの画面内でコンテナの起動・停止・ログ確認・デバッグがすべて完結する

この「IDE内で完結するシームレスさ」が、開発体験を別次元へと引き上げてくれるのです。

—

2. 基礎セットアップ：WebStormとDockerを繋ぐ

それでは、環境を準備していきましょう。
すでにDocker Desktopがインストールされ、バックグラウンドで起動している状態（クジラのアイコンが安定している状態）を前提として話を進めますね。

ステップ1：WebStormにDockerプラグインを認識させる

WebStormにはデフォルトでDocker連携機能が備わっていますが、正しくDocker Daemon（エンジン）と通信できるように設定します。

1. WebStormを開き、設定画面を開きます（Macなら `Cmd + ,`、Windowsなら `Ctrl + Alt + S`）。
2. 左メニューから [Build, Execution, Deployment] (ビルド、実行、デプロイ) > [Docker] を選択します。
3. 画面上部の 「＋（追加）」 ボタンをクリックします。
4. Connectionで `Docker for Mac` / `Docker for Windows` / `Unix socket` など、ご自身の環境に合わせた接続方法が自動選択されていることを確認し、下部に 「Connection successful」 と緑色の文字が表示されるのを確認します。

これで、WebStormの足元にDockerという強力なエンジンが接続されました。画面下部に現れる [Services] (サービス) タブを開いてみてください。Dockerのアイコンが見えていれば、第一段階はクリアです！

—

3. 実践！「HelloWorld」的なコンテナ開発環境の構築

百聞は一見に如かず。実際に小さなNode.js（Express）のアプリケーションを、Dockerコンテナ上で動かし、WebStormから完全にコントロールしてみましょう。

プロジェクトの土台を作る

任意の場所に新しいフォルダ（例: `webstorm-docker-sandbox`）を作成し、WebStormでそのフォルダを開いてください。

次に、プロジェクトの根っこ（ルートディレクトリ）に以下の3つのファイルを作成します。

① `package.json`（依存関係の定義）

{
“name”: “webstorm-docker-sandbox”,
“version”: “1.0.0”,
“description”: “WebStorm and Docker seamless integration sandbox”,
“main”: “app.js”,
“scripts”: {
“start”: “node app.js” // アプリケーションを起動するスクリプト
},
“dependencies”: {
“express”: “^4.19.2” // 超軽量なWebフレームワークExpressを使用
}
}

② `app.js`（アプリケーションのエントリーポイント）

「HelloWorld」をブラウザに返し、コンテナが元気に動いていることを証明するコードです。

const express = require(‘express’);
const app = express();
const PORT = 3000;

// ルートパスへのアクセスに対するハンドラ
app.get(‘/’, (req, res) => {
console.log(‘リクエストを受信しました！コンテナは正常に動作しています。’);
res.send(‘

Hello from WebStorm & Docker!

ローカル環境を汚さずにコンテナで動いています。

‘);
});

// 指定したポートでサーバーを起動
app.listen(PORT, ‘0.0.0.0’, () => {
console.log(`サーバーが起動しました: http://localhost:${PORT}`);
});

ワンポイントアドバイス： `0.0.0.0` を指定している点が重要です。これを忘れると、Dockerコンテナの外（あなたのパソコン）からアクセスできなくなってしまいます。

③ `Dockerfile`（コンテナの設計図）

ここが肝心です。ローカルにNode.jsが入っていなくても、この設計図があればDockerがすべて用意してくれます。

軽量でセキュアな Alpine Linux 版の Node.js 公式イメージをベースにする
FROM node:20-alpine

コンテナ内の作業ディレクトリを /app に指定
WORKDIR /app

依存関係定義ファイルをコンテナ内にコピー
COPY package.json ./

コンテナ内でライブラリをインストール（ローカルを汚しません！）
RUN npm install

ソースコードをすべてコンテナ内にコピー
COPY . .

アプリケーションが使用するポートを公開
EXPOSE 3000

コンテナ起動時に実行するデフォルトのコマンド
CMD [“npm”, “start”]

—

4. WebStormの画面から一歩も出ずにコンテナを操る

ファイルが揃ったら、いよいよWebStormの真骨頂をお見せします。

Dockerイメージのビルドとコンテナ起動

1. WebStormの下部メニューから [Services] タブをクリックします。
2. ツリービューの中に `Docker` が表示されているはずです。その中の `Images` を展開するか、プロジェクト内の `Dockerfile` を右クリックします。
3. `Dockerfile` を右クリックした場合、[Create ‘Dockerfile…’] を選択します。
4. 実行設定（Run Configuration）の画面が出てきますが、そのまま [Run]（再生ボタン） を押すだけでOKです！

WebStormのコンソール（Build ログ）が立ち上がり、Dockerが自動でイメージをビルドし、コンテナを立ち上げてくれます。

実行ログのイメージ
> docker build …
> Successfully built
> docker run –name webstorm-docker-sandbox -p 3000:3000 …
サーバーが起動しました: http://localhost:3000

ブラウザを開いて `http://localhost:3000` にアクセスしてみてください。
画面に 「Hello from WebStorm & Docker!」 と表示されましたか？おめでとうございます！これで完璧なコンテナ開発環境があなたの手元に構築されました。

—

5. 日々の開発を快適にする「WebStormならでは」の強力な機能

無事にコンテナが動いたら、ここからがWebStormの独壇場です。開発効率を爆上げする3つの連携術をご紹介します。

① IDE内でのリアルタイムなログ監視とターミナル操作

わざわざ黒い画面（ターミナルアプリ）を開く必要はありません。

WebStormの [Services] タブ内にある起動中のコンテナを選択すると、標準出力（console.logなど）がリアルタイムで流れるログ画面をそのまま確認できます。
コンテナ内で直接コマンド（例：シェルに入ってデバッグするなど）を実行したい時は、ログ画面のすぐ隣にある [Terminal] アイコンをクリックするだけで、コンテナ内部に直接接続されたターミナルがWebStorm内に開きます。

② ソースコードのライブリロード（変更の即時反映）

「コンテナ開発って、コードを書き換えるたびにビルドし直さなきゃいけないの？」いいえ、そんな面倒なことはしません。
WebStormは賢くファイル変更を検知し、Dockerのボリュームマウント機能（Volume Mounting）を介して、コンテナ内のコードを即座に同期させることができます。
`app.js` のテキストを少し書き換えてみてください。nodemon等のツールを組み合わせれば、コンテナを再起動せずとも即座にブラウザ側の表示が切り替わる快適な環境が手に入ります。

③ コンテナのライフサイクル管理もワンクリック

停止したい時: `Services` タブのコンテナを右クリックして [Stop]。
再起動したい時: [Restart]。
ゴミ掃除: 不要になったコンテナやイメージは、同じく右クリックから [Delete]。

Dockerの複雑なコマンド（`docker ps` や `docker stop ` など）を覚えるストレスから完全に解放されます。

—

おわりに：モダンでクリーンな開発の世界へ

お疲れ様でした！今回は、WebStormとDockerをシームレスに連携させ、ローカル環境を一切汚さずにコンテナ上でアプリケーションを動かすモダンなワークフローを解説しました。

この構成を一度覚えてしまえば、新しい技術やフレームワークを試すときの心理的ハードルが驚くほど下がります。「とりあえずコンテナを立てて、WebStormで開けばいいや」という余裕が生まれるからです。

ぜひ、あなたの次のプロジェクトからこの「IDE完結型コンテナ開発」を取り入れてみてください。毎日のコーディングが、きっともっと楽しく、スマートになりますよ。それでは、快適な開発ライフを！