Node.js
Node.js(英語) は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。PhpStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。
Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストールするだけです。標準のインストール手順に従うと、ほとんどの場合、PhpStorm は Node.js 自体を検出します。
また、コンピューターに Node.js がない場合でも、新規プロジェクトの作成ダイアログで新しい Node.js アプリケーションを作成するときにインストールできます。以下の新しい Node.js アプリケーションを作成するを参照してください。
複数の Node.js インストールを切り替える場合は、ローカル Node.js ランタイムとして設定する必要があります。ほとんどの場合、PhpStorm は Node.js インストールを検出し、自動的にランタイムとして設定し、適切なものを選択できるリストに追加します。
Node.js アプリケーションをリモートで実行するには、リモートランタイムとして設定します。詳細については、Node.js と Docker、SSH 経由の Node.js、Node.js と Vagrant を参照してください。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Node.js に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Node.js インストール間の切り替え
PhpStorm を使用すると、Node.js を複数インストールし、同じプロジェクトで作業しながら切り替えることができます。
Ctrl+Alt+S を押して設定を開き、を選択します。
推奨ランタイムフィールドで Node.js が選択されていることを確認してください。
Node.js ランタイムリストから必要な Node.js インストールを選択します。
標準的なインストール手順に従った場合、ほとんどの場合、必要な Node.js のインストールがリストに表示されます。インストールされていない場合は、
をクリックし、手動でローカルランタイムとして設定してください。
システム Node.js バージョンの使用
PhpStorm を使用すると、システムのデフォルトエイリアスである node をプロジェクトの Node.js バージョンとして設定できます。設定後は、Node.js を必要とするすべてのツールと、すべての新しい実行 / デバッグ構成で、このバージョンが自動的に使用されます。特に、新しい Node.js バージョンをインストールしてシステムのデフォルトノードエイリアスに設定した場合、各ツールの設定を更新する必要がなくなります。
Ctrl+Alt+S を押して設定を開き、を選択します。
推奨ランタイムフィールドで Node.js が選択されていることを確認してください。
Node.js ランタイムリストから node を選択します。
実行 / デバッグ構成や特定のツールの設定など、該当する場合にこの新しい Node.js ランタイムを指定します。
ローカル Node.js ランタイムの構成
たとえば、Node.js がデフォルト以外の場所にインストールされているために PhpStorm が自動的に検出しない場合は、Node.js のインストールをランタイムとして手動で構成する必要がある場合があります。
Ctrl+Alt+S を押して設定を開き、を選択します。
推奨ランタイムフィールドで Node.js が選択されていることを確認してください。
ノードランタイムリストの横にある
をクリックします。現在設定されているすべてのランタイムのリストが表示された Node.js ランタイムダイアログで、ツールバーの
をクリックし、コンテキストメニューからローカル追加を選択して Node.js のインストールを選択し、OK をクリックします。Node.js ランタイムダイアログに戻り、ノードランタイムの読み取り専用フィールドに新しいランタイムへのパスが表示されます。パッケージマネージャーフィールドで、現在のプロジェクトのパッケージマネージャー (npm、Yarn、pnpm、bun) を選択します。
詳細は、プロジェクトのパッケージマネージャーの設定を参照してください。
OK をクリックすると、JavaScript ランタイムページに戻り、ノードランタイムフィールドに新しいランタイムが表示されます。
Linux の Windows サブシステムで Node.js を使用する
PhpStorm を使用すると、Linux 用 Windows サブシステム上の Node.js を使って Node.js アプリケーションを実行およびデバッグできます。WSL 上の Node.js を現在のプロジェクトのデフォルトランタイムとして選択することも、この Node.js バージョンを Node.js 実行 / デバッグ構成で設定して使用することもできます。
WSL 上の Node.js をプロジェクトのデフォルト Node.js ランタイムとして構成する
設定ダイアログ（Ctrl+Alt+S）で、に移動します。
Node.js ランタイムダイアログで Node.js ランタイムフィールドの横にある
をクリックし、 をクリックして、リストから WSL を追加するを選択します。
開いている WSL ノードランタイムを追加するダイアログで、使用している Linux ディストリビューションを選択し、Node.js へのパスを指定します。
Node.js アプリケーションの作成
まだアプリケーションがない場合は、テンプレートから Node.js 固有の構造を使用して PhpStorm プロジェクトを生成するか、空の PhpStorm プロジェクトを作成し、その中に Node.js を以下の既存の Node.js アプリケーションから始めるの説明に従って構成できます。
新しい Node.js アプリケーションを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Node.js を選択して基本的な Node.js アプリケーションを作成するか、Express を選択して Express(英語) アプリケーションを作成します。
右側のペインで、プロジェクトフォルダーと使用する Node.js ランタイムを指定します。詳細については、ローカル Node.js ランタイムの構成を参照してください。
マシンに Node.js が 1 つしかインストールされておらず、標準のインストール手順に従った場合、PhpStorm は Node.js を自動的に検出します。それ以外の場合は、リストから適切なランタイムを選択してください。上記のローカル Node.js ランタイムの構成を参照してください。
Node.js がインストールされていない場合は、Node.js をダウンロードを選択します。
Express アプリケーションの場合、express-generator フィールドに express -generator(英語) を指定します。
ジェネレーターをダウンロードして実行する npx(英語) の使用をお勧めします。そのためには、express -generator リストから npx --package express-generator express を選択してください。
または、埋め込まれたターミナル（Alt+F12）を開いて
npm install --g express-generatorと入力し、ダウンロードしたジェネレーターを express-generator リストから選択します。
使用するテンプレート言語とスタイルシート言語を選択します。
作成をクリックすると、PhpStorm は必要な依存関係をダウンロードし、それらと Node.js コア API に対してコード補完を有効にします。詳細については、「node_modules ライブラリの構成および Node.js コアライブラリの構成」を参照してください。
Express の場合、PhpStorm はデフォルト設定でタイプ Node.js の実行 / デバッグ構成を作成し、Express 固有の基本的なディレクトリ構造(英語)を生成します。
Node.js の場合、PhpStorm は
npm initコマンドを実行して package.json ファイルを生成するだけです。
空の PhpStorm プロジェクトを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、PHP 空プロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
既存の Node.js アプリケーションから始める
既存の Node.js アプリケーションを引き続き開発する場合は、PhpStorm でそれを開き、その中に Node.js を構成し、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューからを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
プロジェクトで Node.js を構成する
設定ダイアログ（Ctrl+Alt+S）で、に移動します。
ノードランタイムフィールドで、現在のプロジェクトのデフォルトの Node.js ランタイムを指定します。実行 / デバッグ構成を作成するときなど、ノードランタイムリストから
Projectエイリアスを選択するたびに、PhpStorm は自動的にこれを使用します。リストから設定済みのランタイムを選択するか、
をクリックして、ローカル Node.js ランタイムの構成の説明に従って表示されるダイアログで新しいランタイムを設定します。ノードを選択した場合は、システム Node.js のバージョンが使用されます。Node.js コーディング支援チェックボックスを選択して、Node.js コアモジュールのソースを JavaScript ライブラリとして設定し、プロジェクトに関連付けます。その結果、PhpStorm は、
fs、path、http、Node.js バイナリにコンパイルされる Node.js の他の部分に対して、コード補完、参照解決、検証、デバッグ機能を提供します。構成が完了すると、PhpStorm は現在構成されているバージョンに関する情報を表示します。
プロジェクトの一部でのみ Node.js API にコード補完が必要な場合は、スコープの管理リンクを使用してそれを構成できます。開いた使用箇所ダイアログで、関連するディレクトリをクリックし、リストごとに構成済みの Node.js コアライブラリを選択します。ライブラリのスコープの構成から詳細を参照してください。
プロジェクトの依存関係をダウンロードする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm installまたは、プロジェクトルートの package.json ファイルのコンテキストメニューから 'npm install' の実行を選択します。
プロジェクトのセキュリティ
PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、PhpStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PhpStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PhpStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。
開かない : この場合、PhpStorm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
関連ページ：
Node.js と Docker
Docker を使用すると、Node.js アプリケーションをすばやくブートストラップして、PhpStorm から実行、デバッグ、プロファイリングできます。IDE は、新しい Dockerfile を自動的に作成し、イメージをビルドして実行し、ソースコードを同期し、コンテナーに npm 依存関係をインストールすることにより、初期構成を処理します。WebStorm と Docker のクイックツアーでいくつかの例を見つけることができます。始める前に：設定 | プラグインページのインストール済みタブで、...
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
Node.js ランタイムダイアログ
次の Node.js バージョンは、PhpStorm 2023.3 以降でサポートされています。Node.js 22 - アクティブな長期サポート（LTS）バージョン、Node.js 24 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このダイアログを使用して、ローカルまたはリモート Node.js ランタイム、あるいは Linux 用 Windows サブシステム上の Node.js を構成します。ローカル Node.js ランタイムという用語は、コン...
npm、pnpm、Yarn
PhpStorm は、npm、pnpm、Yarn、Yarn 2、Yarn 3、Bun と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。PhpStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。PhpStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内...
Node.js の実行とデバッグ
PhpStorm は、Node.js アプリケーションの実行とデバッグを支援します。PhpStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に：JavaScript and TypeScript、JavaScript Debugger、Node.js に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。Node.js アプリケ...
JavaScript ライブラリを構成する
言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから PhpStorm が取得する関数とメソッドに加えて、PhpStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。PhpStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト package.json のオブジェクトにリストさ...