アプリケーションを実行する
WebStorm を使用すると、コンテキストメニューまたはガターアイコンを使用して、エディターから直接、アプリケーション全体、単一のスクリプト、テストを実行できます。アプリケーションにいくつかのパラメーターを渡したり、npm スクリプトなどのツールを起動したりする必要がある場合は、実行する前に、言語またはフレームワーク固有の実行 / デバッグ構成を作成して呼び出します。
プロジェクトで現在使用可能なすべての実行構成が実行 / デバッグ構成を選択リストに表示されます。
実行 / デバッグ構成の詳細を参照してください。
現在実行中のすべてのアプリケーションのリストを表示したい場合は、メインメニューからを選択します。詳細については、「実行中のプロセスを表示」を参照してください。
実行セッションが開始されると、実行ツールウィンドウおよび実行 / デバッグ構成セレクターの 
アイコンが 
に切り替わります。
簡単な方法
エディターから実行
プログラムにパラメーターを渡さず、プログラムを開始する前に特定のアクションを実行する必要がない場合は、エディターから直接実行できます。
ブラウザーでクライアント側の JavaScript コードを実行するには、それを参照する HTML ページを開きます。
WebStorm には Web サーバーが内蔵されており、Web ブラウザーでアプリケーションをデバッグしたり、WebStorm の内蔵ブラウザーでコードをプレビューしたりできます。このサーバーは常に稼働しており、手動での設定は不要です。
エディターで JavaScript 参照を含む HTML ファイルを開き、コードの上にマウスを移動してブラウザーアイコンバー
を表示し、目的のブラウザーを示すアイコンをクリックします。HTML ファイルのプレビュー出力を参照してください。あるいは:
JavaScript リファレンスを含む HTML ファイルをエディターで開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから実行 <HTML file name> を選択します。
WebStorm は、後で保存できるタイプ JavaScript デバッグの一時的な実行 / デバッグ構成を作成します。一時的な構成を永続的なものとして保存するを参照してください。
スクリプトを実行するには、スクリプトをエディターで開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから実行 <script file name> を選択します。
WebStorm は、タイプ Node.js の一時的な実行 / デバッグ構成を作成します。
テストを実行するには、その横にあるガターアイコンをクリックするか、Ctrl+Shift+F10 を押します。ガターアイコンはテストの状態に応じて変化します。テストの実施および JavaScript のテストのフレームワーク固有のページを参照してください。
npm、Yarn、pnpm スクリプトを実行するには:
package.json を開き、スクリプトの横のガターにある
をクリックして、実行 <スクリプト名> を選択します。package.json からのスクリプトの実行とデバッグを参照してください。あるいは:
npm ツールウィンドウを使用します。
スクリプトの実行とデバッグの詳細を参照してください。
現在のファイルを実行する
ツールバーの専用オプションを使用して、単一のファイルを実行できます。実行ボタンとデバッグボタンがアクティブになり、現在開いているファイルをすぐに実行できます。
エディターで、実行するファイルを開きます。
ツールバーの現在のファイルオプションの横にある
をクリックします。
リストを展開すると、他の実行モードにアクセスできます。開いたウィジェットから、コードをデバッグしたり、カバレッジ付きで実行したり、実行構成を開いてさらにオプションを指定したりできます。
カスタマイズ可能な方法
実行 / デバッグ構成を使用する
プログラムにパラメーターを渡す場合、VM オプションを追加する（たとえば、リモートデバッグを許可する）か、プログラムの起動をカスタマイズする場合は、実行 / デバッグ構成を使用します。
一時構成を編集して保存するまたはテンプレートから新しい実行 / デバッグ構成を作成するを選択し、次のいずれかのオプションを使用して実行します。
「実行 / デバッグ構成」ダイアログから「実行」をクリックします。
ツールバースイッチャーから構成を選択し、
をクリックするか、Shift+F10 を押します。
Alt+Shift+F10 を押して、表示されるポップアップウィンドウで構成を選択します。
アプリケーションが起動すると、実行ツールウィンドウでその出力を表示して操作できます。すべての実行 / デバッグ構成は、実行時に個別のタブを作成します。
ツールウィンドウとその管理方法の詳細については、ツールウィンドウトピックを参照してください。
アプリケーションを再実行する
実行ツールウィンドウのツールバーで、
をクリックするか、Shift+F10 を押します。
アプリケーションの停止と一時停止
プログラムを停止すると、そのプロセスは中断され、すぐに終了します。プログラムを一時停止すると、プログラムはバックグラウンドで実行され続けますが、その出力は中断されます。
プログラムを停止する
実行ツールウィンドウで、ツールバーの
をクリックします。または、Ctrl+F2 を押して、停止するプロセスを選択します。
プログラム出力を一時停止する
実行ツールウィンドウを右クリックし、コンテキストメニューから出力の一時停止を選択します。同じトグルを使用してプログラムを再開します。
実行中のプロセスを表示
すべてのアクティブな実行またはデバッグセッションのリストを表示して、セッション間を移動できます。
実行 | 実行リストの表示に進みます。エディターの右上隅に、WebStorm にはすべてのアクティブなアプリケーションのリストが表示されます。
関連ページ：
実行 / デバッグ構成ダイアログ
このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定：実行構成を編集するとき（ただし実行構成テンプレートは編集しないとき）、次のオプションを指定できます。名...
実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...
実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。アプリケーションがの開発モードで実行されている場合は、実行ツールウィンドウから直接デバッグを開始できます。を押したまま、アプリケーションが実行されている URL をクリックするだけです。Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーショ...
HTML
WebStorm は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー（ライブ編集）やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。HTML ツールプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっている HTML ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。を押して設定を...
テストの実行
ファイルまたはフォルダー内で直接テストを実行するテストを開始する前に特定のアクションを必要とせず、コードカバレッジなどの追加オプションを構成したくない場合は、次のオプションを使用してテストを実行できます。キャレットをテストに置き、を押します。または、テストの横にあるガターアイコンをクリックし、リストから実行 '<test name>' を選択します。ガターアイコンは、テストの状態に応じて変化します。ガターアイコンは、一連のテストを示します。ガターアイコンは、新しいテストをマークする...
JavaScript のテスト
WebStorm を使用すると、Karma、Vitest、Jest、Protractor、Cucumber.js、Mocha、Node.js テストランナーを使用して JavaScript ユニットテストを実行およびデバッグできます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの隣に表示され、すぐに実行またはデバッグするオプションがあります。Jest、Karma、Mocha については、WebStorm のコードカバレッジ...