NPM ツールウィンドウ

ツールウィンドウを npm、pnpm、Yarn スクリプトを実行するに使用します。

始める前に

Node.js をダウンロードしてインストールします。 npm もインストールされているため、これを使用する場合は、前の手順を完了してください。
Yarn を使用するには、 Yarn オフィシャル Web サイト(英語)の説明に従ってインストールしてください。

スクリプトの実行中

プロジェクトツールウィンドウ（Alt+1 ）で package.json ファイルを選択するか、エディターでファイルを開いてコンテキストメニューから npmスクリプトの表示を選択すると、 npm ツールウィンドウが開きます。

npm、pnpm、Yarn を呼び出すとすぐに、ツールは、呼び出された package.json ファイルの scripts プロパティ内で定義されたスクリプトのツリーの構築を開始します。

プロジェクトに複数の package.json ファイルがある場合は、それらごとに個別のスクリプトツリーを構築し、以前に構築したツリーを削除せずにスクリプトを実行できます。各ツリーは個別のノードに表示されます。

ツールウィンドウには、スクリプト出力が表示され、エラーが発生したことが報告され、見つからなかったパッケージやプラグインが一覧表示されます。最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。

スクリプトのツリーを構築するには、次のいずれかを実行する

プロジェクトツールウィンドウ（Alt+1 ）で必要な package.json ファイルを選択するか、エディターでファイルを開き、コンテキストメニューから npmスクリプトの表示を選択します。
npm ツールウィンドウで、ツールバーのをクリックし、リストから必要な package.json ファイルを選択します。デフォルトで WebStorm はプロジェクトのルートの package.json ファイルを表示します。別の package.json ファイルがある場合は、 package.json を選択するをクリックして表示されるダイアログで必要な package.json ファイルを選択します。 WebStorm は、選択した package.json ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードの下にスクリプトツリーを構築します。

ツリーを再構築する

必要なノードに切り替えて、ツールバーのをクリックします。

ツリー内のスクリプトを名前でソートする

ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。
デフォルトでは、ツリーには、 package.json （オプション定義順序）で定義されている順序でスクリプトが表示されます。

1 つのスクリプトを実行する

スクリプトをダブルクリックしてください。
ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから <スクリプト名>を実行を選択します。

いくつかのスクリプトを実行する

複数選択モードを使用します：隣接するアイテムの場合は Shift キーを、隣接しないアイテムの場合は Ctrl キーを押しながら、必要なスクリプトを選択し、選択のコンテキストメニューから実行またはデバッグを選択します。

ツールバー

	package.json を追加	このボタンをクリックして、別の package.json ファイルのスクリプトツリーを作成します。リストから必要な package.json ファイルを選択します。 WebStorm は新しいノードを追加し、その下にスクリプトのツリーを構築します。
	package.json を削除	選択したノードにあるスクリプトのツリーを削除するには、このボタンをクリックします。
	スクリプトを再読み込み	このボタンをクリックすると、選択したノードにあるスクリプトのツリーが再構築されます。 package.json ファイルを更新した後は、 npm がツリーに即時変更を適用しないため、ツリーの再構築が必要になることがあります。
	すべて折りたたむ	このボタンをクリックすると、すべてのスクリプトツリーが非表示になり、 package.json ノードだけが表示されます。
		このボタンをクリックして、現在のビューを構成し、ツールウィンドウの表示モードを変更します。詳細は、ツールウィンドウの表示モードを参照してください。ほとんどのメニュー項目は、オンまたはオフにできるオプションであることに注意してください。オンになっているオプションには、名前の左側にチェックマークが付いています。 NPM-specific オプションは次のとおりです。 npm構成の編集：このオプションを選択すると、 npm 実行/デバッグ構成ダイアログが開き、 npm および Node.js ランタイムの現在の設定を更新できます。詳細は npm、pnpm、Yarn を参照してください。並べ替え：: スクリプトがツリーに表示される順序を構成するには、このオプションを選択します。ツールバーのをクリックし、メニューから並べ替えを選択してから、名前を選択します。デフォルトでは、ツリーには、 package.json （オプション定義順序）で定義されている順序でスクリプトが表示されます。
	非表示	このボタンをクリックすると、ツールウィンドウが非表示になります。再度表示するには、メインメニューでビュー｜ツールウィンドウ｜npm を選択します。ツールウィンドウが再び表示され、以前に構築されたタスクのツリーがすべて表示されます。

ツリーのコンテキストメニュー

npm の設定	このメニュー項目を選択して、 npm の設定ダイアログを開き、 Node.js 構成を表示または編集します
ソースに移動	現在のツリーが構築されている package.json ファイルを開くには、このメニュー項目を選択します。
スクリプトを再読み込み	選択したノードにあるスクリプトのツリーを再構築するには、このメニュー項目を選択します。
パスのコピー	現在のツリーがクリップボードに作成された package.json ファイルへのパスを保存するには、このメニュー項目を選択します。
package.json を削除	選択したノードにあるスクリプトのツリーを削除するには、このメニュー項目を選択します。

スクリプトのコンテキストメニュー

<スクリプト名>を実行	選択したスクリプトを実行するには、このメニュー項目を選択します。
編集 <script name> settings	このメニュー項目を選択すると、実行 / デバッグ構成ダイアログが開き、選択したスクリプトの事前定義された設定を編集できます。
ソースに移動	現在のツリーが構築されている package.json ファイルを開き、選択したスクリプトの定義に移動するには、このメニュー項目を選択します。

2026 年 6 月 8 日