WebStorm 2020.1ヘルプ

Node.js

Node.js(英語)は、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。

アプリケーションのローカルランタイムとして、またはnpmパッケージの管理、JavaScript linterの実行、ビルドツール、テストフレームワークなどとしてNode.jsのみが必要な場合は、Node.js(英語)をインストールするだけです。標準のインストール手順に従うと、ほとんどの場合、WebStormはNode.js自体を検出します。

また、コンピューターにNode.jsがない場合でも、新規プロジェクトの作成ダイアログで新しいNode.jsアプリケーションを作成するときにインストールできます(以下の新しいNode.jsアプリケーションを作成するを参照)。

複数のNode.jsインストールを切り替える場合は、ローカルNode.jsインタープリターとして構成する必要があります。ほとんどの場合、WebStormはNode.jsインストールを検出し、インタープリターとして自動的に構成し、関連するものを選択できるリストに追加します。

Node.jsアプリケーションをリモートで実行するには、リモートインタープリターとして構成します。詳細については、Node.jsとDockerを参照してください。

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

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

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

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

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

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

WebStormを使用すると、デフォルトのシステムノードエイリアスをプロジェクトの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をデフォルト以外の場所にインストールして、WebStormが自動的に検出しないようにする場合など、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)を選択します。

    詳細はプロジェクトのパッケージマネージャーの設定を参照してください。

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

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

WebStormを使用すると、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へのパスを指定します。

    Configuring Node.js on WSL as the default project node interpreter

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

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

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

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

  2. 左側のペインで、Node.jsを選択して基本的なNode.jsアプリケーションを作成するか、Node.js Expressアプリケーションを選択してExpress アプリケーション(英語)を作成します。

  3. 右側のペインで、プロジェクトフォルダー、Node.jsインタープリター、およびパッケージマネージャー( npm(英語)またはYarn(英語)、詳細についてはnpmおよびYarnを参照)を指定します。

    マシンにNode.jsが1つしかなく、標準のインストール手順に従った場合、WebStormは自動的にあなたのNode.jsを検出します。そうでなければ、リストから適切なインタープリターを選択してください。上のローカルNode.jsインタープリターの構成を参照してください。

    Node.jsがインストールされていない場合は、Node.jsをダウンロードするを選択します。

    Installing Node.js during project creation in the Create Project dialog

    Node.js Expressアプリの場合、express-generatorフィールドでエクスプレス-generator(英語)を指定します。

    ジェネレーターをダウンロードして実行するnpx(英語)を使用することをお勧めします。そのためには、エクスプレス-generatorリストからnpx --package express-generatorエクスプレスを選択します。

    または、埋め込まれたターミナルAlt+F12)を開いて npm install --g express-generator と入力し、ダウンロードしたジェネレーターをexpress-generatorリストから選択します。

    Select express generator

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

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

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

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

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

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

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

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

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

既にマシン上にあるアプリケーションソースを開きます

  • ようこそ画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

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

  1. ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからVCS | バージョン管理から取得を選択します。

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

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

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

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

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

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

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

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

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

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

    npm install

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

最終更新日: 2020年6月19日

関連ページ:

Node.jsとDocker-ヘルプ| WebStorm

Node.jsアプリケーションをDockerで素早くブートストラップして、WebStormから実行、デバッグ、およびプロファイルを作成できます。IDEは、新しいDockerfileを自動的に作成し、イメージをビルドおよび実行し、ソースコードを同期し、npm依存関係をコンテナーにインストールすることに...

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

このダイアログを使用して、ローカルまたはリモートNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsを構成します。ローカルNode.jsインタープリターという用語は、コンピューター上のNode.jsのインストールを示します。リモート Node.j...

npmおよびYarn

WebStormはnpm、Yarn、およびYarn 2と統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコマンドライ...

Node.jsの実行とデバッグ-ヘルプ| WebStorm

WebStormは、Node.jsアプリケーションの実行とデバッグを支援します。WebStormから起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に、Node.jsバンドルプラグインがプラグインのページで有効になっていることを確認してください。詳細につ...

JavaScriptライブラリを構成する

WebStormでは、ライブラリとは、WebStormが編集したプロジェクトコードから取得する関数やメソッドに加えて、WebStormの内部知識に関数やメソッドを追加したファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み禁止になっています。WebStor...