PhpStorm 2020.3 ヘルプ

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 を複数インストールし、同じプロジェクトで作業しながら切り替えることができます。

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。

  2. 開いた Node.js および NPM ページで、Node インタープリターリストから必要な Node.js インストールを選択します。

    標準のインストール手順に従っている場合、ほとんどの場合、必要な Node.js インストールがリストに含まれています。インストールが欠落している場合は、the Browse button をクリックし、ローカルインタープリターとして手動で構成します

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

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。

  2. Node インタープリターリストから node を選択します。

    Default system node

  3. 必要に応じて、この新しい Node.js インタープリターを指定します(たとえば、実行 / デバッグ構成や特定のツールの設定など)。

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

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。

  2. 開いた Node.js および NPM ページで、Node インタープリターリストの横にある the Browse button をクリックします。

  3. 現在構成されているすべてのインタープリターのリストが表示された Node.js インタープリターダイアログで、ツールバーの the Add button をクリックします。開いたダイアログで、コンテキストメニューからローカル追加を選択し、Node.js のインストールを選択してから OK をクリックします。Node.js インタープリターダイアログに戻り、Node インタープリター読み取り専用フィールドに新しいインタープリターへのパスが表示されます。

  4. パッケージマネージャーフィールドで、現在のプロジェクトのパッケージマネージャー(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 をデフォルトのプロジェクトノードインタープリターとして構成する

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。

  2. Node.js インタープリターダイアログで Node インタープリターフィールドの横にある the Browse button をクリックし、the Add button をクリックして、リストから WSL を追加するを選択します。

  3. 開いている WSL ノードインタープリターを追加するダイアログで、使用している Linux ディストリビューションを選択し、Node.js へのパスを指定します。

Node.js アプリケーションの作成

まだアプリケーションがない場合は、テンプレートから Node.js 固有の構造を使用して PhpStorm プロジェクトを生成するか、空の PhpStorm プロジェクトを作成し、その中に Node.js を以下の既存の Node.js アプリケーションから始めるの説明に従って構成できます。

新しい Node.js アプリケーションを作成する

  1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。
  2. 左側のペインで、Node.js を選択して基本的な Node.js アプリケーションを作成するか、Express を選択して Express(英語) アプリケーションを作成します。

  3. 右側のペインで、プロジェクトフォルダー、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 リストから選択します。

    Select express generator

    使用するテンプレート言語とスタイルシート言語を選択します。

  4. 作成をクリックすると、PhpStorm が必要な依存関係をダウンロードし、それらの依存関係および Node.js コア API に対してコード補完を有効にします。詳細については、node_modules ライブラリの構成および Node.js コアライブラリの構成を参照してください。

    Express の場合、PhpStorm はデフォルト設定でタイプ Node.js の実行 / デバッグ構成を作成し、Express 固有の基本的なディレクトリ構造(英語)を生成します。

    Node.js の場合、PhpStorm は npm init コマンドを実行して package.json ファイルを生成するだけです。

空の PhpStorm プロジェクトを作成する

  1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、PHP 空プロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

既存の Node.js アプリケーションから始める

既存の Node.js アプリケーションを引き続き開発する場合は、PhpStorm でそれを開き、その中に Node.js を構成し、必要な依存関係をダウンロードします。

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

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

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

  1. ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。

  2. Node インタープリターフィールドで、現在のプロジェクトのデフォルトの Node.js インタープリターを指定します。PhpStorm は、実行 / デバッグ構成を作成するとき、または Prettier や ESLint などの Node.js に依存するツールを構成するときに、Node インタープリターリストから Project エイリアスを選択するたびに自動的に使用します。

    リストから構成済みのインタープリターを選択するか、the Browse button をクリックして、ローカル Node.js インタープリターの構成に従って開いたダイアログで新しいインタープリターを構成します。node を選択すると、システム Node.js のバージョンが使用されます。

  3. Node.js のコーディング支援チェックボックスを選択して、Node.js コアモジュールのソースを JavaScript ライブラリとして設定し、プロジェクトに関連付けます。その結果、PhpStorm は、fspathhttp、Node.js バイナリにコンパイルされる Node.js の他の部分に対して、コード補完、参照解決、検証、デバッグ機能を提供します。

    構成が完了すると、PhpStorm は現在構成されているバージョンに関する情報を表示します。

  4. プロジェクトの一部でのみ Node.js API にコード補完が必要な場合は、スコープの管理リンクを使用してそれを構成できます。開いた使用箇所ダイアログで、関連するディレクトリをクリックし、リストごとに構成済みの Node.js コアライブラリを選択します。ライブラリのスコープの構成から詳細を参照してください。

プロジェクトの依存関係をダウンロードし、次のいずれかを実行する

  • 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install

  • プロジェクトルートの package.json ファイルのコンテキストメニューから実行 'npm install' を選択します。

関連ページ:

Node.js と Docker

Node.js アプリケーションを Docker で素早くブートストラップして、PhpStorm から実行、デバッグ、プロファイルを作成できます。IDE は、新しい Dockerfile を自動的に作成し、イメージをビルドおよび実行し、ソースコードを同期し、npm 依存関係をコンテナーにインストールすることにより、初期構成を処理します。WebStorm と Docker のクイックツアーでいくつかの例を見つけることができます。始める前に JetBrains リポジトリからプラグインをインストールする説明...

Node.js インタープリターダイアログ

次の Node.js バージョンが PhpStorm 2020.3 でサポートされています。Node.js 10、Node.js 12、Node.js 14、Node.js 15、サポートされている Node.js バージョンの詳細を参照してください。このダイアログを使用して、ローカルまたはリモート Node.js インタープリターまたは Windows Subsystem for Linux の Node.js を構成します。ローカル Node.js インタープリターという用語は、コンピューター上の...

npm、pnpm、Yarn

PhpStorm は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。PhpStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。PhpStorm は、package.json ファイルを解析し、スクリプト...

Node.js の実行とデバッグ

PhpStorm は、Node.js アプリケーションの実行とデバッグを支援します。PhpStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:設定 / 環境設定 | プラグインページで Node.js バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。Node.js アプリケーションを実行する:PhpStorm は、タイプ Node.js の実行構成に従って Node.js...

JavaScript ライブラリを構成する

PhpStorm では、ライブラリは、PhpStorm が編集するプロジェクトコードから取得する関数とメソッドに加えて、PhpStorm の内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み保護されています。PhpStorm は、コーディング支援(つまり、コード補完、構文ハイライト、ナビゲーション、ドキュメントの参照)を強化するためにのみライブラリを使用します。ライブラリはプロジェクトの依存関係を管理する方法ではあ...