ツイートシェアはてブ LINE Pocket

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 を参照してください。

Node.js バージョン間の切り替え

PhpStorm を使用すると、Node.js を複数インストールし、同じプロジェクトで作業しながら切り替えることができます。

設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。
開いた Node.js および NPM ページで、Node インタープリターリストから必要な Node.js インストールを選択します。
標準のインストール手順に従っている場合、ほとんどの場合、必要な Node.js インストールがリストに含まれています。インストールが欠落している場合は、をクリックし、ローカルインタープリターとして手動で構成します。

システム Node.js バージョンの使用

PhpStorm を使用すると、デフォルトのシステムノードエイリアスをプロジェクトの Node.js バージョンとして設定できます。その後、このバージョンは、Node.js を必要とするすべてのツールおよびすべての新しい実行 / デバッグ構成で自動的に使用されます。特に、新しい Node.js バージョンをインストールしてシステムのデフォルトのノードエイリアスにする場合、各ツールの設定を更新する必要がないことを意味します。

設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。
Node インタープリターリストから node を選択します。
必要に応じて、この新しい Node.js インタープリターを指定します（たとえば、実行 / デバッグ構成や特定のツールの設定など）。

ローカル Node.js インタープリターの構成

Node.js をデフォルト以外の場所にインストールして、PhpStorm が自動的に検出しないようにする場合など、Node.js インストールをインタープリターとして手動で構成する必要がある場合があります。

設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。
開いた Node.js および NPM ページで、Node インタープリターリストの横にあるをクリックします。
現在構成されているすべてのインタープリターのリストが表示された Node.js インタープリターダイアログで、ツールバーのをクリックします。開いたダイアログで、コンテキストメニューからローカル追加を選択し、Node.js のインストールを選択してから OK をクリックします。Node.js インタープリターダイアログに戻り、Node インタープリター読み取り専用フィールドに新しいインタープリターへのパスが表示されます。
パッケージマネージャーフィールドで、現在のプロジェクトのパッケージマネージャー（npm、Yarn、または pnpm）を選択します。
詳細はプロジェクトのパッケージマネージャーの設定を参照してください。

OK をクリックすると Node.js および NPM ページに戻り、Node インタープリターフィールドに新しいインタープリターが表示されます。

Windows Subsystem for Linux で Node.js を使用する

PhpStorm では、Windows Subsystem for Linux の Node.js(英語) を使用して Node.js アプリケーションを実行およびデバッグできます。WSL の Node.js を現在のプロジェクトのデフォルトインタープリターとして選択するか、Node.js 実行 / デバッグ構成でこのノードバージョンを構成して使用できます。

WSL の Node.js をデフォルトのプロジェクトノードインタープリターとして構成する

設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。
Node.js インタープリターダイアログで Node インタープリターフィールドの横にあるをクリックし、をクリックして、リストから 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 インタープリター、およびパッケージマネージャー（ npm(英語) または Yarn(英語)、詳細については npm、pnpm、Yarn を参照）を指定します。
マシンに 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 を構成し、必要な依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

ウェルカム画面で開くをクリックするか、メインメニューからファイル | ディレクトリを開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースを確認してください

ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。
呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

プロジェクトで Node.js を構成する

設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。
Node インタープリターフィールドで、現在のプロジェクトのデフォルトの Node.js インタープリターを指定します。PhpStorm は、実行 / デバッグ構成を作成するとき、または Prettier や ESLint などの Node.js に依存するツールを構成するときに、Node インタープリターリストから Project エイリアスを選択するたびに自動的に使用します。
リストから構成済みのインタープリターを選択するか、をクリックして、ローカル Node.js インタープリターの構成に従って開いたダイアログで新しいインタープリターを構成します。node を選択すると、システム Node.js のバージョンが使用されます。
Node.js のコーディング支援チェックボックスを選択して、Node.js コアモジュールのソースを JavaScript ライブラリとして設定し、プロジェクトに関連付けます。その結果、PhpStorm は、fs、path、http、Node.js バイナリにコンパイルされる Node.js の他の部分に対して、コード補完、参照解決、検証、デバッグ機能を提供します。
構成が完了すると、PhpStorm は現在構成されているバージョンに関する情報を表示します。
プロジェクトの一部でのみ Node.js API にコード補完が必要な場合は、スコープの管理リンクを使用してそれを構成できます。開いた使用箇所ダイアログで、関連するディレクトリをクリックし、リストごとに構成済みの Node.js コアライブラリを選択します。ライブラリのスコープの構成から詳細を参照してください。