WebStorm 2024.1 ヘルプ

HTTP クライアント

HTTP クライアントプラグインを使用すると、WebStorm コードエディターで HTTP リクエストを直接作成、編集、実行できます。

Example HTTP request

HTTP リクエストを作成して実行する必要がある場合、主に 2 つのユースケースがあります。

  • RESTful Web サービスを開発していて、それが期待どおりに機能し、仕様に準拠してアクセス可能であり、正しく応答することを確認したい場合。

  • RESTful Web サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと必要な入力データを調査すると役立ちます。開発中に、アプリケーションの外部からこの Web サービスを呼び出すこともできます。これは、コード内で論理エラーが検出されないにもかかわらず、アプリケーションで予期しない出力が発生し、Web サービスとの対話がボトルネックであると疑われる場合に、エラーを特定できます。

HTTP リクエストは .http および .rest ファイルに保存され、HTTP file icon アイコンでマークされます。

HTTP ファイルのサポートには、以下の機能が含まれます。

必要に応じて、開始する前に、設定ダイアログ(Ctrl+Alt+S)の HTTP プロキシページでプロキシ設定を構成します。

HTTP リクエストファイルを作成する

スクラッチファイルまたは HTTP リクエストタイプの物理ファイルから HTTP リクエストを処理できます。各ファイルには複数の要求を含めることができ、必要な数のファイルを作成できます。

スクラッチファイルは、開発中に HTTP リクエストをテストするために使用できます。スクラッチファイルはプロジェクト内に保存されないため、WebStorm はスクラッチファイルを変更し、リクエストに関する追加情報を追加できます。HTTP リクエストがスクラッチファイルから実行されると、応答出力ファイルへのリンクが要求の下と要求履歴ファイルの上部に追加されます。

HTTP リクエストスクラッチファイルを作成する

  • Ctrl+Alt+Shift+Insert を押して HTTP リクエストを選択します。

物理ファイルは、HTTP リクエストの文書化、テスト、検証に使用できます。物理ファイルはプロジェクト内に保存され、WebStorm はそれらを変更しません。物理ファイルから HTTP リクエストが実行された場合、このファイルは変更されません。実行されたリクエストに関する情報とレスポンス出力ファイルへのリンクは、リクエスト履歴ファイルの先頭に追加されます。

物理 HTTP リクエストファイルを作成する

  • ファイルメニューで新規をポイントし、HTTP リクエストをクリックします。

HTTP リクエストを移動する

F6 リファクタリング移動を使用して、HTTP リクエストをスクラッチから物理ファイルに移動したり、物理ファイル間で移動したりできます。

  1. エディターで、移動するリクエストにキャレットを配置し、次のいずれかを実行します。

    • メインメニューまたはコンテキストメニューから、リファクタリング | 移動を選択します。

    • Alt+Enter を押して、HTTP リクエストの移動 インテンションアクションを選択します。

    • F6 を押します。

  2. 開いた HTTP リクエストの移動ダイアログで、次の手順を実行します。

    1. パスフィールドで、リストから既存の .http ファイルの 1 つを選択するか、the Browse button をクリックしてファイルを見つけます。

      ファイルへのフルパスを手動で入力することもできます。存在しないファイルの名前を指定すると、指定した名前の新しいファイルが自動的に作成されます。

    2. 要求リストで、移動するリクエストの横にあるチェックボックスをオンにします。

HTTP リクエストを作成する

WebStorm は、エディターでの HTTP リクエスト形式を使用します。これは、HTTP リクエストに関する情報を作成、実行、格納する簡単な方法を提供します。次の一般的な構文を使用して、作成した HTTP リクエストファイルに直接入力できます。

### Method Request-URI HTTP-Version Header-field: Header-value Request-Body

### セパレーターの後に、# または // で始まるコメントを入力できます。

HTTP リクエストの作成を高速化するには、次のことができます。

  • ツール | HTTP クライアント | HTTP クライアントでリクエストを作成をクリックします。リクエストファイルがエディターで開かれると、開かれたファイルにリクエストテンプレートが追加されます。それ以外の場合は、新しい .http スクラッチファイルが作成されます。

  • リクエストのエディターパネルの上部にある the Add Request button をクリックします。ポップアップメニューで、追加するリクエストのタイプを選択します。

Add an HTTP request

または、ライブテンプレートを使用します。エディターで、Ctrl+J を押して、使用可能なテンプレートのリストを表示できます。例: gtr は単純な GET リクエストに展開されます。mptrmultipart/form-data POST リクエストに展開されます。

Expand post template

HTTP/2

バージョン 2024.1 以降、WebStorm は HTTP リクエストで HTTP/2 をサポートします。URL 部分の後に HTTP バージョンを指定できます。例:

GET https://example.org HTTP/2

バージョンが指定されていない場合、HTTP クライアントは、安全な接続には HTTP/2 を使用し (HTTP/2 ネゴシエーションが失敗した場合は HTTP/1.1 にフォールバック)、安全でない接続には HTTP/1.1 を使用します。

HTTP バージョンを選択

  1. リクエスト URL の後に空白を入れて Ctrl+Space を押すか、HTTP の入力を開始します。

  2. 補完リストから、推奨値のいずれかを選択します。

    • HTTP/1.1 の使用を強制する HTTP/1.1

    • HTTP/2 の使用を有効にするには HTTP/2 を使用します。

    • HTTP/2 (Prior Knowledge) は、HTTP/1.1 にアップグレードせずに HTTP/2 を使用して送信します。サーバーが HTTP/2 接続を処理できることがわかっている場合に使用します。

    Enable HTTP/2

HTTP クライアント機能の概要を把握するには、構成されたリクエストのいくつかの選択肢である HTTP リクエストコレクションを調べることができます。

HTTP リクエストコレクションからリクエストを開く

  1. リクエストのエディターパネルの上部にあるサンプルショートカットリンクをクリックします。

  2. ポップアップメニューで、開く HTTP リクエストコレクションを選択します。

    Open HTTP Requests Collection popup

cURL リクエストを変換する

cURL(英語) リクエストを使用している場合は、cURL リクエストとエディターでの HTTP リクエスト形式の間で変換できます。

cURL を HTTP リクエストに変換

  • cURL リクエストを HTTP リクエストファイルに貼り付けます。WebStorm はそれを HTTP リクエスト形式に変換し、後で参照できるように元の cURL リクエストをコメントアウトしたままにします。

    cURL request is converted into HTTP request on paste
  • または、HTTP リクエストエディターパネルの上部にある Convert cURL to HTTP request をクリックして、cURL を HTTP リクエストに変換を選択します。

    cURL を HTTP リクエストに変換ダイアログで、変換する cURL リクエストを入力または貼り付けます。

    Convert cURL to HTTP Request dialog

次の cURL リクエストの例を考えてみましょう。

curl 'https://httpbin.org/' -H 'Connection: keep-alive' -H 'Accept: text/html' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-US,en;q=0.9,es;q=0.8'

WebStorm はそれを以下に変換します:

# curl 'http://httpbin.org/' -H 'Connection: keep-alive' -H 'Accept: text/html' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-US,en;q=0.9,es;q=0.8' GET http://httpbin.org/ Connection: keep-alive Accept: text/html Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9,es;q=0.8 ###

コンバーターは、次の cURL オプションをサポートします。

オプション

説明

-X, --request(英語)

使用するリクエストメソッド。

-H, --header(英語)

リクエストに含めるリクエストヘッダー。

-u, --user(英語)

--basic(英語)

--digest(英語)

要求とともに提供されるユーザーの資格情報、および使用する許可方法。

-d, --data, --data-ascii(英語)

--data-binary(英語)

--data-raw(英語)

--data-urlencode(英語)

POST リクエストで送信されるデータ。

-F, --form(英語)

POST 要求で送信されるマルチパート / フォームデータメッセージ。

--url(英語)

取得する URL(主に設定ファイルで URL を指定するときに使用されます)。

-i, --include(英語)

HTTP レスポンスヘッダーを出力に含めるかどうかを定義します。

-v, --verbose(英語)

詳細動作モードを有効にします。

-L, --location(英語)

要求されたページが別の場所に移動された場合に要求を再送信することを可能にします。

HTTP リクエストを cURL に変換する

  1. cURL 形式に変換する HTTP リクエストにキャレットを置きます。

  2. Alt+Enter を押して cURL に変換してクリップボードにコピーを選択します。

    Convert HTTP request to cURL

    または、HTTP リクエストエディターパネルの上部にある変換ショートカットリンクをクリックして、キャレットの HTTP リクエストを cURL に変換してコピーするを選択することもできます。

    Convert HTTP request to cURL

これにより、HTTP リクエストに基づいて cURL リクエストが生成され、クリップボードにコピーされます。

Postman のコレクションと環境をインポートする

Postman コレクションは、関連する HTTP リクエストをグループ化する方法です。Postman では、コレクションと変数を JSON 形式でエクスポートできます。HTTP クライアントを使用すると、そのようなファイルを WebStorm にインポートして、それぞれの .http および環境ファイルに変換できます。

Postman コレクションを HTTP クライアントにインポートする

  1. Postman からコレクションをエクスポートします(英語)。WebStorm で使用する場合は、環境ファイルをエクスポートすることもできます。

  2. 次のいずれかの方法でファイルを WebStorm にインポートします。

    • エクスポートされたファイルがプロジェクト内にある場合は、それを右クリックして Collection を .http ファイルに変換を選択します。

    • 任意の .http ファイルを開き、ツールバーの Import HTTP Request をクリックして、郵便配達員コレクションを選択します。

    • Ctrl+Shift+A を押し、Import from Postman Collection File の入力を開始し、対応するアクションを選択します。

  3. 環境ファイルもインポートする場合は、アタッチ環境を選択してファイルを指定します。HTTP クライアント環境形式に変換され、指定された .http ファイルに対してこの環境が選択されます。

  4. 表示されるウィンドウで、「変換」をクリックします。

    Import from Postman window

コンテキストアクションを使用してリクエストを生成する

コード文字列リテラルまたは JSON、YAML、TOML、プロパティファイルに http または https で始まる URL がある場合は、HTTP リクエストをすばやく生成できます。

  1. URL をクリックして、Alt+Enter を押します。

  2. 開いたコンテキストメニューで、HTTP クライアントでリクエストを生成をクリックします。

    Generate request in HTTP Client

    これにより、generated-requests.http スクラッチファイル内の指定された URL への新しい GETHTTP リクエストが作成されます。

応答ハンドラーと事前要求スクリプトを使用する

応答ハンドラースクリプトを使用すると、受信した HTTP レスポンスにプログラムで対応できます。これらのスクリプトを使用すると、受信したデータを自動的に処理し、指定した条件に対して検証することができます。応答ハンドラースクリプトは、HTTP リクエストファイル内の要求の一部として提供され、応答を受信するとすぐに実行されます。応答処理の例を表示するには、認証を含むリクエストまたはテストとスクリプトによるリクエスト リクエストコレクションを開きます

リクエスト前スクリプトを使用すると、HTTP リクエストで使用される変数を設定できます。

応答ハンドラースクリプトを挿入する

応答ハンドラースクリプトは、その場で、または外部ファイルを参照してリクエストに挿入できます。

  • その場でスクリプトを挿入するには、その前に > を付けて {% %} で囲みます。

    GET host/api/test > {% // Response Handler Script ... %}
  • 外部ファイルからスクリプトを挿入するには、> を先頭に追加します。

    GET host/api/test > scripts/my-script.js

応答ハンドラースクリプトからの出力 (エラーまたは client.log からの出力) がある場合は、要求の実行時にサービスツールウィンドウのレスポンスハンドラータブに表示されます。

事前リクエストスクリプトを挿入する

リクエスト前スクリプトは、その場で、または外部ファイルを参照してリクエストに挿入できます。

  • その場でスクリプトを挿入するには、その前に < を付けて {% %} で囲みます。

    < {% request.variables.set("petName", "Bella") %} POST https://example.org/pets/{{petName}}
  • 外部ファイルからスクリプトを挿入するには、< を先頭に追加します。

    < scripts/my-script.js POST https://example.org/pets/{{petName}}

リクエスト前スクリプトからの出力 (エラーまたは client.log からの出力) がある場合は、リクエストを実行すると、サービスツールウィンドウのプレリクエストハンドラータブに表示されます。

JavaScript コードをインポートする

場合によっては、変数や関数などの特定の機能を外部ファイルから使用する必要がある場合があります。このため、事前リクエストおよび応答ハンドラースクリプトで、通常の ES6 インポート機能を使用して、ローカル JavaScript ファイルで定義された変数と関数にアクセスできます。

  1. 必要な値を JavaScript ファイルからエクスポートします。HTTP クライアントは、次の形式の export ステートメントをサポートします。

    export let name1, name2/*, … */; // also var export const name1 = 1, name2 = 2/*, … */; // also var, let export function functionName() { /* … */ } export { name1, /* …, */ nameN }; export { variable1 as name1, variable2 as name2, /* …, */ nameN }; export default expression; export default function functionName() { /* … */ } export default function () { /* … */ }
  2. 必要な値を応答ハンドラーまたは事前要求スクリプトにインポートします。HTTP クライアントは、次の形式の import ステートメントをサポートします。

    import defaultExport from "module-name"; import * as name from "module-name"; import { export1 } from "module-name"; import { export1 as alias1 } from "module-name"; import { export1, export2 } from "module-name"; import { export1, export2 as alias2, /* … */ } from "module-name"; import defaultExport, { export1, /* … */ } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name"; // side effect import

応答ハンドラースクリプトと事前要求スクリプトは JavaScript ECMAScript 6 で記述されており、コーディング支援とドキュメントはバンドルされている HTTP Pre-Request and Response Handler ライブラリによって処理されます。インプレーススクリプトの場合、この機能は自動的に有効になります。外部スクリプトの場合は、手動で有効にする必要があります。

応答ハンドラーと事前要求スクリプトの JavaScript コーディング支援を有効にする

  1. Ctrl+Shift+Aアクションの検索)を押します。

  2. JavaScript ライブラリの使用と入力し、対応するアクションをクリックし、開いたコンテキストメニューで HTTP 事前要求および応答ハンドラーを選択します。

HTTP Response Handler ライブラリは、レスポンスハンドラースクリプトを作成するために使用される 2 つのオブジェクトを公開します。

  • client オブジェクトはセッションメタデータを格納します。これはスクリプト内で変更できます。client 状態は WebStorm を閉じるまで保持されます。variable_name として client.global に保存されたすべての変数は、{{variable_name}} として後続の HTTP リクエストにアクセス可能です。

  • response は受信したレスポンスに関する情報を保持しています: そのコンテンツタイプ、ステータス、レスポンスボディなど。

エディターで HTTP レスポンスハンドラーライブラリを開くには、ライブラリオブジェクトにキャレットを置き、Ctrl+B を押します。

応答ハンドラースクリプトにはテストを含めることができます。これにより、HTTP クライアントをテストフレームワークとして使用できます。テストを作成するには、client.test(testName, function) メソッドを呼び出します。テスト内で、client.assert(condition, message) メソッドを呼び出すことにより、条件をアサートできます。例:

GET https://httpbin.org/status/200 > {% client.test("Request executed successfully", function() { client.assert(response.status === 200, "Response status is not 200"); }); %}

構造ツールウィンドウを使用して .http ファイル内を移動する

.http ファイルに複数のリクエストがある場合、構造ツールウィンドウは、ファイルをすばやくプレビューしてファイル内を移動できます。ツールウィンドウには、ヘッダー、リクエスト本文、事前リクエストスクリプト、応答ハンドラースクリプトなどのリクエスト部分も表示されます。

  1. 構造ツールウィンドウを開きます: 表示 | ツールウィンドウ | 構造

    または、Alt+7 を押します。

  2. 構造ツールウィンドウで、HTTP メソッドまたはリクエスト名、あるいはリクエストの一部をクリックします。

HTTP Client Structure tool window

右クリックして The Run button を選択することで、そこからリクエストを送信することもできます。

HTTP リクエストを実行する

  1. 独自の Web サービスをテストする場合は、Web サービスがデプロイされ、実行されていることを確認してください。

  2. 環境を定義している場合は、リクエストのエディターパネルの上部にある実行リストで環境を選択します。

  3. ガターで、リクエストの横にある The Run button をクリックします。

.http ファイルで複数の HTTP リクエストが定義されている場合は、それらすべてを順番に実行できます。これを行うには、リクエストのエディターパネルの上部にある Run all HTTP requests をクリックします。

リクエストが実行されると、WebStorm はそのリクエスト専用の一時的な HTTP リクエストの実行 / デバッグ構成を自動的に作成します。必要に応じて永続的な実行 / デバッグ構成として保存してくださいを使用できます。

ブラウザーでリクエストを開く

設定ダイアログ(Ctrl+Alt+S)のウェブブラウザーとプレビューページで指定されたブラウザーで HTTP リクエストを開くことができます。

Open HTTP request in browser

HTTP リクエストの実行 / デバッグ構成を操作する

エディターから HTTP リクエストを実行すると、WebStorm はリクエストパラメーターを使用して一時的な実行 / デバッグ構成を自動的に作成します。一時的な実行 / デバッグ構成は、永続的な実行 / デバッグ構成と同じように機能します。実行 / デバッグ構成ダイアログを使用して設定を変更し、オプションで永続的に保存できます。

HTTP リクエストの実行 / デバッグ構成を変更する

  1. 以下のいずれかを行います。

    • エディターでリクエストを右クリックし、コンテキストメニューで実行構成の変更 ... を選択します。

      Create a run configuration from the editor
    • あるいは、メインメニューの実行 | 実行構成の編集に移動し、HTTP リクエストリストで必要な実行 / デバッグ構成を選択します。

  2. 必要な構成パラメーターを変更します。

    • 環境リストで、リクエストで使用される環境変数のセットを定義する環境を選択します。

    • ファイルフィールドに、HTTP リクエストファイルへのパスを指定します。パスを手動で入力し、入力時にパス補完 Ctrl+Space を使用するか、Open from disk をクリックして、表示されるダイアログで必要なフォルダーを選択できます。

    • 要求ファイルに複数の要求が含まれている場合は、リクエストリストで、実行する要求の名前を選択します。

一時的な HTTP リクエストの実行 / デバッグ構成を保存する

  • 実行 / デバッグ構成セレクターで、「<構成名> を保存」を選択します。

  • 実行 / デバッグ構成ダイアログで、構成を選択し、the Save button をクリックします。

実行 / デバッグ構成を使用して要求を実行する

  • 実行 / デバッグ構成セレクターで、目的の実行構成を選択します。次に、メインツールバーの The Run button をクリックするか、Shift+F10 を押します。

  • Alt+Shift+F10 を押し、リストから希望の実行構成を選択して、Enter を押します。

    Run configuration popup

Web サービスからの応答を表示する

HTTP リクエストを実行すると、WebStorm は自動的に .idea/httpRequests/ ディレクトリの別のファイルにレスポンスを保存します。最近保存された 50 件の応答を表示し、要求履歴を使用して対応するファイルに移動することができます。リクエストがスクラッチファイルから実行された場合、そのレスポンス出力へのリンクも元のリクエストに追加されます。

HTTP Response

受け取った応答を見る

  1. 応答が受信されるとすぐに自動的に開くサービスツールウィンドウに切り替えます。

  2. デフォルトでは、サーバーの応答は、content-type(英語) フィールドを介して要求ヘッダーで指定された形式で表示されます。応答を別の形式に変換するには、Response view settings をクリックして、テキストJSONXMLHTML を選択します。

    Change format of response

応答にバイナリファイルが含まれている場合、このファイルも .idea/httpRequests/ ディレクトリに保存されます。応答がイメージ、PDF、HTML ファイルの場合は、IDE で直接プレビューできます。

サービスツールウィンドウでイメージをプレビューします。

サービスツールウィンドウで PDF ファイルをプレビューします。サービスツールウィンドウで PDF プレビューの表示を無効にするには、Response view settings をクリックして PDF プレビューのインライン化を有効化オプションをクリアします。

応答が HTML ファイルの場合は、プレビューを表示をクリックして、JCEF ベースのブラウザーを使用してエディタータブでプレビューできます。

応答ハンドラースクリプトがある場合、このスクリプトの一部として実行されたテストの結果は、サービスツールウィンドウのテストタブに表示されます。各テストをクリックすると、対応する応答ハンドラースクリプト内のテストソースコードにすばやく移動できます。

The Tests tab of the Run tool window

イベントストリームをサブスクライブすると、WebStorm はサービスツールウィンドウにイベントを表示します。ここでは、Stop をクリックして、クライアント / サーバー接続のステータスを表示し、接続を終了することもできます。コンテンツタイプ(text/event-stream または application/x-ndjson のいずれか)に応じて、応答はプレーンテキストまたは改行で区切られた JSON としてフォーマットされます。イベントストリームの各行を処理する応答ハンドラースクリプトを作成できます。

Server-sent events

ストリームイベントのファイルへのリダイレクトは現在サポートされていません。

エディターで応答ファイルを開く

  1. 開きたい応答へのリンクにキャレットを置きます。

  2. メインメニューで表示 | ソースに移動に移動するか、Ctrl+B または F4 を押します。

あるいは、応答行を Ctrl+Click することもできます。

Open the response tooltip

JSONPath を使用して JSON レスポンスからデータを抽出する

HTTP クライアントは JSONPath クエリをサポートしており、受信した JSON ドキュメントからデータを解析して抽出することができます。これを行うには、応答ハンドラースクリプトで次の関数を使用します。

jsonPath(ObjectToParse, JSONPathExpression)

この関数をすばやく挿入するには、jsonPath ライブテンプレートを使用します。

  1. リクエスト後、応答ハンドラースクリプト部分で、> jsonPath と入力し始めます。

  2. Enter を押してライブテンプレートを展開し、JSONPath 式を完成させます。

    例: この式は、slideshow オブジェクトの一部である slides 配列内の最初の要素の title フィールドの値を取得して出力します。

    GET https://examples.http-client.intellij.net/json > {% client.log(jsonPath(response.body, "$.slideshow.slides[0].title",)) %}

    取得した値をサービスツールウィンドウのレスポンスハンドラータブでプレビューします。

スクラッチファイル内のレスポンスを比較する

スクラッチファイルから要求が実行されると、応答出力ファイルへのリンクが元の要求に追加されます。

  • 以下のいずれかを行います。

    • 応答ファイルへのリンクにキャレットを置きます。Alt+Enter を押して、<レスポンス名> と比較インテンションの動作を選択します。

    • ガターの Compare responses をクリックして、リストから <レスポンス名> と比較を選択します。

      Compare responses (menu)

リクエスト履歴の応答を比較する

物理ファイルからリクエストが実行されると、レスポンス出力へのリンクがリクエスト履歴に追加されます。

  1. 応答ファイルへのリンクにキャレットを置きます。メインメニューで表示 | ソースに移動に移動するか、Ctrl+B または F4 を押して、このファイルを新しいエディタータブで開きます。

  2. メインメニューで表示 | 比較に移動するか、Ctrl+D を押します。WebStorm は、httpRequests フォルダーから応答ファイルを開くように求めるプロンプトを表示します。

  3. 現在のファイルと比較する応答ファイルを選択し、開くをクリックします。

2 つの応答ファイルが差分ビューアーで開かれ、それらの内容を比較できます。

Comparing responses in the Diff Viewer for files

リクエスト履歴を表示

WebStorm は、最近実行された 50 個の要求を http-requests-log.http ファイルに自動的に保存します。このファイルは、プロジェクトレベルの .idea/httpRequests/ ディレクトリに保管されます。リクエスト履歴を使用すると、特定のレスポンスにすばやく移動したり、リクエストを再度発行したりできます。リクエスト履歴から再度リクエストが発行されると、その実行情報とレスポンス出力へのリンクがリクエスト履歴ファイルの先頭に追加されます。

リクエスト履歴を開く

  • リクエストのエディターパネルの上部にある Show HTTP request history をクリックします。

  • メインメニューからツール | HTTP クライアント | HTTP リクエストの履歴を表示を選択します。

Requests history

出力をカスタムファイルまたはディレクトリにリダイレクトする

  • HTTP クライアントは、出力をカスタムファイルまたはディレクトリにリダイレクトできます。強制リダイレクトとソフトリダイレクトの 2 つの演算子をサポートしています。

    • >> オペレーターは常に新しいファイルを作成し、要求されたファイル名がすでに存在する場合は、ファイル名に -n サフィックスを追加します。

    • >>! オペレーターは、ファイルがすでに存在する場合、ファイルを書き換えます。

クッキーを管理する

応答によって受信された Cookie は、.idea/httpRequests/ ディレクトリの専用 http-client.cookies ファイルに自動的に保存されます。保存できるクッキーの数は 300 に制限されています。有効期限に達していない限り、Cookie の名前は、Cookie に指定されたドメインパスに一致する URL への後続の各要求に自動的に含まれます。

クッキーを無期限にしたい場合は、date パラメーターとして -1 を入力します。例:

# domain path name value date .example.com / userId 0x4d2 -1
the http-cookies file

HTTP リクエストでカスタム Cookie を設定する場合は、Cookie ヘッダーを使用できます。セミコロンで区切られた name=value ペアのリストとして Cookie を入力します。例:

GET http://localhost:80/api Cookie: theme=dark; country=France

gRPC リクエスト

HTTP クライアントは gRPC リクエストをサポートしています。HTTP クライアントがリクエストを gRPC リクエストとして処理するには、GRPC キーワードでリクエストを開始します。

HTTP Client supports gRPC requests

.proto ファイルに基づいて、WebStorm は gRPC の補完を提供します: すべての既知の gRPC サービス、特定のサーバーの単項およびサーバーストリーミングメソッド、リクエスト本文で受け入れられたメッセージのフィールド。プロジェクトに .proto ファイルがない場合でも、サーバーがアクセス可能なサービスに関する情報を HTTP クライアントに提供する gRPC リフレクション(英語)をサポートしていれば、コード補完を使用できます。

HTTP Client supports gRPC requests: completion

始める前に

proto ファイルから gRPC リクエストを生成する

  • proto ファイルで、RPC メソッドの近くにある gRPC HTTP クライアントでリクエストを生成をクリックします。

    Generate a gRPC request from a PROTO file

エンドポイントツールウィンドウから gRPC リクエストを生成する

HTTP リクエストと同様に、エンドポイントツールウィンドウを使用して gRPC リクエストを生成することもできます。

  1. エンドポイントツールウィンドウを開きます: 表示 | ツールウィンドウ | エンドポイント。プロジェクトで定義されている場合は、gRPC エンドポイントが表示されます。

  2. エンドポイントを選択します。これにより、HTTP クライアントタブにサンプルリクエストが生成されます。

  3. リクエストを完了し、リクエストの送信をクリックします。デフォルトのアドレスとポートを独自の値に置き換える必要がある場合があります。リクエストボディには、proto ファイルのデータ構造に基づいてコード補完を使用します。

  4. HTTP クライアントタブの下部で応答をプレビューします。

the HTTP Client tab

gRPC メタデータを送信する

  • GRPC リクエストに、次の構文を使用して gRPC メタデータを入力します: Metadata-key: Value

    例:

    GRPC localhost:8080 X-Myhostname: Example.org

安全な gRPC を使用する

サーバー側 TLS によって保護された接続を開始できます。

  • アドレスの前に grpcs と入力します。例:

    GRPC grpcs://ijhttp-examples.jetbrains.com/hello.HelloService/SayHello

Websocket リクエスト

HTTP クライアントは WebSocket リクエストをサポートします。HTTP クライアントがリクエストを WebSocket リクエストとして処理するには、WEBSOCKET キーワードで開始し、その後にサーバーアドレスを続けます。リクエストの構造は次のとおりです。

WEBSOCKET ws://localhost:8080/websocket Content-Type: application-json // Used for content highlighting only // Request body, for example: { "message": "First message sent on connection" } === // message separator { "message": "Second message" // will be sent right after the previous one } === wait-for-server // keyword used to wait for the server response { "message": "Send this after the server response" }

WebSocket リクエストの作成を高速化するには、次のことができます。

  • .http ファイルのエディターパネルの上部にある The Add Request button をクリックし、WebSocket リクエストを選択します。

  • .http ファイルで、wsr と入力し、Enter を押して WebSocket ライブテンプレートを適用します。

複数のメッセージを送信する

  • === セパレーターを使用して、複数のメッセージを送信します。

    { "message": "First message sent on connection" } === // message separator { "message": "Second message" } === { "message": "Third message" }

サーバーの応答後にメッセージを送信する

  • メッセージの前に、=== wait-for-server と入力します。

    これにより、HTTP クライアントはメッセージを送信する前にサーバーの応答を待機します。=== wait-for-server 行を繰り返すことにより、複数の応答を待つことができます。例: 次のメッセージは、3 つのサーバー応答の後に送信されます。

    === wait-for-server === wait-for-server === wait-for-server { "message": "This messages is sent after 3 server responses" }

インタラクティブにメッセージを送信する

接続を開始すると、サービスツールウィンドウから直接サーバーと対話できます。新しいメッセージごとにメッセージを送信したり、サーバーの応答を表示したりできます。

  1. サービスツールウィンドウで、開いている接続を選択します。

  2. ウィンドウの下部の WebSocket に送信されるメッセージに、メッセージの内容を入力します。

  3. その右側で、メッセージ形式(プレーンテキスト、JSON、XML、HTML)を選択します。

  4. Ctrl+Enter を押してリクエストを送信します。

ウィンドウの上部に、サーバーの応答が表示されます。

The Services tool window

GraphQL

WebStorm は、HTTP リクエスト本文で GraphQL 操作を送信するためのサポートを提供します。HTTP または WebSocket を介して送信できます。

GraphQL クエリを使用して HTTP リクエストを作成する

  1. .http ファイルに、GRAPHQL キーワードに続けてサーバーアドレスを入力します。

  2. リクエストの本文で、GraphQL 操作(クエリ、ミューテーション、サブスクリプション)を作成します。例:

    ### HTTP request with GraphQL query GRAPHQL http://localhost:8080/graphql query { toDos { title, completed, author { username } } }

GraphQL クエリを使用した HTTP リクエストの作成を高速化するには、次のことができます。

  • .http ファイルのエディターパネルの上部にある The Add Request button をクリックし、GraphQL クエリリクエストを選択します。

  • .http ファイルで、gqlr と入力し、Enter を押して GraphQL ライブテンプレートを適用します。

GraphQL 変数を使用する

HTTP リクエストの本文では、クエリ文字列とは別に動的データを渡す場合に GraphQL 変数を使用できます。

  • クエリ部分の後に、JSON 変数辞書を入力します。

    query ($name: String!, $capital: String!) { country(name: $name, capital: $capital) { name capital } } { "name": "France", "capital": "Paris" }

    HTTP クライアント環境変数を GraphQL 変数値として使用することもできます。例: この JSON では、"{{Author}}" は環境変数です。実行時の値は、リクエストの送信時に選択した環境によって異なります。

    { "author": "{{Author}}" }

プロキシ設定の構成

  1. 設定ダイアログ(Ctrl+Alt+S)で、外観 & 振る舞いシステム設定を選択し、次に HTTP プロキシを選択します。

  2. 開いた HTTP プロキシダイアログで、手動プロキシ構成を選択し、以下を指定します。

    • ホスト名およびポート番号フィールドにプロキシのホスト名とポート番号を入力します。

    • 認証を有効にするには、プロキシ認証チェックボックスを選択して、対応するフィールドにユーザー名とパスワードを入力します。

クライアント SSL/TLS 証明書を設定する

HTTP サーバーが安全な通信のために SSL/TLS 認証を必要とする場合、HTTPS 要求を送信する前にクライアント証明書を指定する必要がある場合があります。HTTP クライアントでは、プライベート環境ファイルを使用してクライアント証明書をセットアップできます。

証明書へのパスを指定

  1. .http ファイルの実行リストで、環境を Private ファイルに追加を選択します。

  2. 開いた http-client.private.env.json ファイルで、必要な環境に SSLConfiguration オブジェクトを追加します。clientCertificate に、クライアント証明書へのパスを入力します。証明書キーが別のファイルに保存されている場合は、そのパスを clientCertificateKey に入力します。例:

    { "dev": { "MyVar": "SomeValue", "SSLConfiguration": { "clientCertificate": "cert.pem", "clientCertificateKey": "MyFolder/key.pem" } } }

    または、clientCertificateclientCertificateKey をオブジェクトとして記述することもできます。これにより、パスに加えて証明書の形式を指定できます。例:

    { "dev": { "SSLConfiguration": { "clientCertificate": { "path": "file.crt", "format": "PEM" }, "clientCertificateKey": { "path": "file.key", "format": "DER" } } } }

証明書のパスフレーズを設定する

クライアント証明書を生成するときにパスフレーズを使用した場合は、それを HTTP クライアントに提供する必要があります。

  1. http-client.private.env.json ファイルで、"hasCertificatePassphrase": trueSSLConfiguration オブジェクトに追加します。例:

    { "dev": { "SSLConfiguration": { "clientCertificate": "file.crt", "hasCertificatePassphrase": true } } }
  2. ガターの Set value for certificate passphrase をクリックするか、キャレットを hasCertificatePassphrase に置いて Alt+Enter を押し、「証明書のパスフレーズ」の値を設定しますを選択します。

  3. 開いたウィンドウで、証明書のパスフレーズを入力します。

    HTTP Client Secured Value window

パスフレーズを今すぐ入力したくない場合は、2 番目の手順を省略できます。この場合、WebStorm は、HTTPS 要求を実行するときにパスフレーズの入力を求めるプロンプトを出します。

証明書の検証を無効にする

開発目的で、自己署名証明書または期限切れの証明書を持つホストがある場合があります。このホストを信頼する場合は、その証明書の検証を無効にすることができます。

  • http-client.private.env.json ファイルで、verifyHostCertificate": falseSSLConfiguration オブジェクトに追加します。例:

    { "sslTest": { "SSLConfiguration": { "verifyHostCertificate": false } } }

この環境でリクエストを実行すると、WebStorm はホスト証明書を検証しません。

関連ページ:

エディターの基本

WebStorm エディターは、コードの作成、読み取り、変更に使用する IDE の主要部分です。エディターは次の領域で構成されています。スクロールバーは現在のファイルのエラーと警告を表示します。パンくずリストは、現在のファイルのコード内を移動できます。ガターには、行番号、アノテーション、コンテキスト依存のアクションアイコンが表示されます。タブには、現在開いているファイルの名前が表示されます。ナビゲーション:さまざまなショートカットを使用して、エディターウィンドウとさまざまなツールウィンドウを切...

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択します。あるいは...

コード補完

コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc のコメント、TypeScript 型定義などからの追加情報も、完成度を大幅に向上させることができます。補完はサードパーティのコードのシンボルに対しても機能します。ほとんどの場合、必要なのは、必要なファイルをプロジェクトに追加することだけです。こ...

ソースコードの作成と編集

コードを使用する場合、WebStorm は作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用したいアクションのショートカットを覚えていない場合は、を押して名前でアクションを見つけてください。同じダイアログを使用してクラス、ファイル、シンボルを見つけることができます。詳しくは、名前でターゲッ...

コードの再フォーマットと再配置

WebStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。で定義されていないものがあれば、プロジェクト設定から取得されます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択します。再...

コードリファレンス情報

WebStorm は、標準 API、プロジェクトとその依存関係からのシンボル、外部ライブラリで定義されたシンボルの参照を示します。ドキュメントポップアップでシンボルのドキュメントを表示し、リンクが利用可能な場合は外部サイトのドキュメントを開くことができます。ほとんどの HTML タグといくつかの属性では、WebStorm は対応する MDN 記事の要約を表示します。ドキュメントポップアップとツールウィンドウの参照情報に加えて、WebStorm はエディターにインレイヒントを表示します。これらは、パ...