HTTP リクエスト構文の調査
このセクションでは、HTTP リクエストの形式について説明します。HTTP リクエストの送信と HTTP レスポンスの表示の詳細については、「HTTP クライアント」を参照してください。
WebStorm コードエディターで HTTP リクエストを作成するには、次の一般的な構文を使用します。
HTTP リクエストでコメントを使用する
リクエスト内で、
//
または#
で任意の行を開始して、コメント行にします。// A basic request GET http://example.com/a/
HTTP リクエストの名前を設定する
実行 / デバッグ構成、どこでも検索、なんでも実行でリクエストをすばやく見つけるために、名前を付けることができます。
リクエストの上にある
###
、# @name
、# @name =
の横に名前を入力します。

リクエストに名前がない場合、WebStorm はリクエストファイル内の位置 ( #1
など) をリクエスト名として使用します。リクエストファイルに同じ名前のリクエストが複数含まれている場合、WebStorm はそれぞれの名前にリクエストの位置番号を追加します。これにより、各リクエスト名が一意になり、サービスツールウィンドウ、実行 / デバッグ構成などで必要なものを簡単に見つけることができます。


GET リクエストに短い形式を使用する
GET 要求の場合、要求メソッドを省略して URI のみを指定できます。
// A basic request https://example.com/a/
単一のファイルで複数のリクエストを作成する
リクエストの終わりには、
###
セパレータをその下に入力します。// A basic request https://example.com/a/ ###セパレータに別のリクエストを作成します。
// A basic request https://example.com/a/ ### // A second request using the GET method https://example.com:8080/api/html/get?id=123&value=content
長いリクエストをいくつかの行に分割する
すべてのクエリ文字列行をインデントしますが、最初の行はインデントします。
// Using line breaks with indent GET http://example.com:8080 /api /html /get ?id=123 &value=contentクエリ文字列が原因で URL が長すぎる場合は、専用のコンテキストアクションを使用して、各クエリパラメーターを新しい行に配置できます。クエリ文字列部分にキャレットを置き、Alt+Enter ( コンテキストアクションの表示 ) を押して、クエリパラメーターを別々の行に配置を選択します。
GET https://example.com:8080/api/get/html?firstname=John&lastname=Doe&planet=Tatooine&town=FreetownGET https://example.com:8080/api/get/html? firstname=John& lastname=Doe& planet=Tatooine& town=Freetown同様に、
Content-Type: application/x-www-form-urlencoded
を使用してリクエストの本文をフォーマットできます。キャレットを本文に置き、Alt+Enter ( コンテキストアクションの表示 ) を押して、URL エンコード形式のパラメーターを別々の行に配置を選択します。POST https://ijhttp-examples.jetbrains.com/post Content-Type: application/x-www-form-urlencoded key1=value1&key2=value2&key3=value3&key4=value4&key5=value5POST https://ijhttp-examples.jetbrains.com/post Content-Type: application/x-www-form-urlencoded key1 = value1 & key2 = value2 & key3 = value3 & key4 = value4 & key5 = value5x-www-form-urlencoded
ボディのラッピングを構成するには、 を使用します。=
の前後および&
の前にスペースを構成するには、 を使用します。
認証を使用して Web サービスにアクセスする
アクセスしている Web サービスに応じて、基本(英語)またはダイジェスト (英語) 許可ヘッダーを提供します。
// Basic authentication GET http://example.com Authorization: Basic username password ### // Digest authentication GET http://example.com Authorization: Digest username password
要求メッセージ本文を提供する
リクエストの中に空白行を追加し、次のいずれかを実行します。
リクエスト本文を適切な場所に入力します。
// The request body is provided in place POST https://example.com:8080/api/html/post HTTP/1.1 Content-Type: application/json Cookie: key=first-value { "key" : "value", "list": [1, 2, 3] }コンテンツタイプヘッダーフィールドの値を WebStorm でサポートされている言語のいずれかに設定すると、対応する言語フラグメントが HTTP リクエストメッセージ本文に自動挿入されます。コンテンツタイプが指定されていない場合は、言語フラグメントを手動で挿入できます。
要求本体をファイルから読み取るには、
<
シンボルの後にファイルのパスを入力します。// The request body is read from a file POST https://example.com:8080/api/html/post Content-Type: application/json < ./input.json
multipart/form-data コンテンツタイプを使用する
要求のコンテンツタイプをマルチパート / フォームデータに設定します。マルチパート / フォームデータメッセージの一部としてファイルを送信するには、コンテンツ処理ヘッダーに
filename
パラメーターを含めます。POST https://example.com/api/upload HTTP/1.1 Content-Type: multipart/form-data; boundary=boundary --boundary Content-Disposition: form-data; name="first"; filename="input.txt" // The 'input.txt' file will be uploaded < ./input.txt --boundary Content-Disposition: form-data; name="second"; filename="input-second.txt" // A temporary 'input-second.txt' file with the 'Text' content will be created and uploaded Text --boundary Content-Disposition: form-data; name="third"; // The 'input.txt' file contents will be sent as plain text. < ./input.txt --boundary--
次のリダイレクトを無効にする
HTTP リクエストがリダイレクトされると(3xx ステータスコードが受信されると)、リダイレクトされたページの応答が返されます。サービスツールウィンドウでは、リダイレクトされたページの応答と、要求中に発生したすべてのリダイレクトを表示できます。
次のリダイレクトを無効にすることをお勧めします。この場合、実際のリダイレクト応答ヘッダー(301 または 302 など)が返されます。
リクエストの前に、
@no-redirect
タグ付きのコメント行を追加します。// @no-redirect example.com/status/301
リダイレクトされた要求がすでにある場合は、サービスツールウィンドウの Redirections
リストの横にある無効にするをクリックできます。これにより、@no-redirect
タグが最初のリクエストに追加されます。

リクエスト履歴へのリクエストの保存を無効にする
必要に応じて、リクエストをリクエスト履歴に保存しないようにすることができます。これは、リクエストに機密データが含まれていて、ログに記録したくない場合に役立ちます。
リクエストの前に、
@no-log
タグ付きのコメント行を追加します。// @no-log GET example.com/api
受信した Cookie の Cookie への保存を無効にする jar
必要に応じて、受信した Cookie が Cookie jar に保存されないようにすることができます。このようにして、http-client.cookies ファイルから不要な Cookie を手動で削除することを回避できます。
リクエストの前に、
@no-cookie-jar
タグ付きのコメント行を追加します。// @no-cookie-jar GET example.com/api
HTTP リクエストのタイムアウトをカスタマイズする
HTTP クライアントには、サーバーとの接続を確立するための 60 秒のタイムアウトと、進行中の接続で新しいパケットを待機するための別の 60 秒のタイムアウトがあります。これらのタイムアウトは両方ともカスタマイズできます。
確立された接続で新しいパケットのタイムアウトを設定するには、リクエストの前に
@timeout
タグを含むコメント行を追加します。# @timeout 600 GET example.com/api接続タイムアウトを設定するには、リクエストの前に
@connection-timeout
タグを含むコメント行を追加します。// @connection-timeout 2 m GET example.com/api
デフォルトでは、タイムアウト値は秒単位ですが、値の後に明示的な時間単位を追加できます。ミリ秒の場合は ms
、秒の場合は s
、分の場合は m
で、たとえば 100 ms
または 5 m
です。
変数を使用する
HTTP リクエストを作成する場合、変数を使用してその要素をパラメーター化できます。変数は、リクエストのホスト、ポート、パスの値、クエリパラメーターまたは値、ヘッダー値、リクエストの本文内または外部ファイルで使用される任意の値を保持できます。
リクエスト内で変数を使用する
変数を
{{variable}}
として二重波括弧で囲みます。
変数名には、文字、数字、アンダースコア記号 _
、ハイフン記号 -
、またはドット記号 .
を含めることができます (変数名のドットについては下記の注意を参照してください)。
HTTP クライアントにはいくつかの種類の変数があります。これらは優先順位に従って以下にリストされています。変数名が競合する場合は、このリストの上位の値が使用されます。
環境変数は特別な環境ファイルで定義され、任意の .http ファイルで使用できます (名前が競合する場合は、パブリック変数がプライベート変数よりも優先されます)。
client.global.set
メソッドを使用して応答ハンドラースクリプトで定義されたグローバル変数。インプレース変数は .http ファイル内で定義され、同じファイル内でのみ使用できます。
リクエストごとの変数は、リクエストの前に
request.variables.set
メソッドを使用して定義され、このリクエストでのみ使用できます。
さらに、HTTP クライアントは動的に生成された値を組み込み動的変数に提供します。このような変数には予約名があります。
環境変数
環境変数を使用すると、プロジェクト内に一連の環境定義を格納できます。例: リクエストでホスト名を明示的に指定する代わりに、さまざまな環境で {{host}}
変数を作成できます。開発環境ではローカルホスト名、本番環境ではパブリックホスト名です。次に、現在の .http ファイルエディターの上部にある実行リストを使用して、環境を選択できます。
環境がありません : このオプションを選択すると、現在のファイルでリクエストを実行するときに環境は使用されません。リクエストに変数が含まれていない場合は、これを選択します。
環境名(本番環境や開発環境など): 選択した環境は、現在のファイル内のすべてのリクエストに使用されます。
をクリックしたときに環境を選択する必要はありません。これは、同じ環境で複数のリクエストを実行し、リクエストを実行するたびにそれを選択したくない場合に役立ちます。
<実行前に環境を選択する> : このオプションを選択すると、
をクリックするたびに環境を選択する必要があります。これは、環境を頻繁に切り替え、実行ごとに明示的に環境を選択して、必要な環境で要求を確実に実行する場合に便利です。

選択した環境は、リクエストの構造を見る、ブラウザーでのリクエストのオープン、リクエストの実行、および実行 / デバッグ構成の作成の場合に、デフォルトの環境として使用されます。
環境変数を定義する
環境変数は環境ファイルで定義されます。
リクエストのエディターパネルの上部にある実行リストで、環境を追加する場所を選択します。
環境を公開する場合は、環境を Public ファイルに追加…を選択します。これにより、http-client.env.json ファイルに環境が追加されます。このファイルには、ホスト名、ポート、クエリパラメーターなどの一般的な変数を含めることができ、プロジェクトと一緒に配布することを目的としています。
環境をプライベートにする場合は、環境を Private ファイルに追加…を選択します。これにより、環境が http-client.private.env.json ファイルに追加されます。このファイルには、パスワード、トークン、証明書、その他の機密情報が含まれる場合があります。http-client.private.env.json ファイルで指定された変数の値は、パブリック環境ファイルの値をオーバーライドします。
作成したファイルに目的の変数を入力します。
次のサンプル http-client.env.json 環境ファイルは、開発と本番の 2 つの環境を定義しています。追加の http-client.private.env.json ファイルは機密認証データを保持します。
{ "development": { "host": "localhost", "id-value": 12345, "username": "", "password": "", "my-var": "my-dev-value" }, "production": { "host": "example.com", "id-value": 6789, "username": "", "password": "", "my-var": "my-prod-value" } }{ "development": { "username": "dev-user", "password": "dev-password" }, "production": { "username": "user", "password": "password" } }HTTP リクエストの例は次のとおりです。
GET http://{{host}}/api/json/get?id={{id-value}} Authorization: Basic {{username}} {{password}} Content-Type: application/json { "key": "{{my-var}}" }WebStorm では、リクエストを実行する前に、リクエストのエディターパネルの上部にある実行リストを使用して実行環境を選択できます。
選択に応じて、結果の要求は次のいずれかになります。
GET http://localhost/api/json/get?id=12345 Authorization: Basic dev-user dev-password Content-Type: application/json { "key": "my-dev-value" }GET http://example.com/api/json/get?id=6789 Authorization: Basic user password Content-Type: application/json { "key": "my-prod-value" }
リクエストの実行時に変数が解決されない場合、WebStorm は通知を表示し、別の実行環境をすばやく作成、更新、選択できるようにします。

複数の環境ファイルを管理する
プロジェクトには、HTTP リクエストファイルと対応する環境ファイルを含む複数のディレクトリが存在する場合があります。この場合、リクエストの環境を選択する際に次のセクションを使用できます。
ファイルに対しては、現在のディレクトリと親ディレクトリに保存されている環境を示します。
このリストから環境を選択すると、HTTP クライアントは現在のディレクトリに保存されているファイル (パブリックおよびプライベート) 内でその環境を見つけようとします。この環境にファイルがない場合は、親ディレクトリをチェックします。
プロジェクト全体からは、プロジェクトの他のすべての場所 (現在のディレクトリと親ディレクトリを除く) に保存されている環境を示します。これらのディレクトリのファイルに、ファイルに対してセクションの環境と同じ名前の環境が含まれている場合、その環境はリストに表示されません。
プロジェクト内のどこにでも表示されるようにしたい場合は、環境に一意の名前を付けることができます。

これを例で説明してみましょう。次のようなプロジェクト構造があるとします。
service1
ディレクトリに保存されている .http
ファイルは、dev
環境を選択すると、key
変数の myKey1
値を使用します。service2
ディレクトリに保存された .http
ファイルは、key
変数の myKey2
値を使用します。
プライベートファイルに host
変数が含まれている場合、プライベートファイルはパブリックファイルよりも優先されるため、.http
ファイルはその値を使用します。それ以外の場合は、パブリックファイルの値が使用されます。
インプレース変数
インプレース変数のスコープは、それが宣言された .http ファイルです。同じファイル内の複数のリクエストで同じ変数を参照する場合は、インプレース変数を使用します。
インプレース変数を作成するには、HTTP メソッドセクションの上に「@
」と入力し、その後に変数の名前を入力します。例:
リクエストごとの変数
request.variables.set(variableName, variableValue)
メソッドを使用して、HTTP 要求で使用される変数の値を設定できます。HTTP リクエストの上に、{% ... %}
でラップされたプレリクエストスクリプトを記述します。例:
プレリクエストスクリプトで定義された変数は、スクリプトに続く単一のリクエスト内でのみ使用できます。
変数の初期化コンテキストアクション (Alt+Enter) を使用すると、インプレース変数または環境変数をすばやく追加したり、リクエスト前ハンドラースクリプトで変数を初期化したりできます。

プレリクエストスクリプトでは、HTTP クライアント暗号 API を使用して、SHA-1、SHA-256、SHA-512、MD5 などの暗号化ハッシュ関数に基づいて HTTP 署名を生成し、変数としてリクエストに渡すこともできます。例:
動的変数
動的変数は、リクエストを実行するたびに値を生成します。それらの名前は $
で始まります:
$uuid
または$random.uuid
: 普遍的に一意の識別子を生成します (UUID-v4)$timestamp
: 現在の UNIX タイムスタンプを生成します$isoTimestamp
: UTC タイムゾーンの ISO-8601 形式で現在のタイムスタンプを生成します。$randomInt
: 0 〜 1000 のランダムな整数を生成します。$random.integer(from, to)
:from
(両端を含む) とto
(両端を含まない) の間のランダムな整数を生成します (たとえば、random.integer(100, 500))。パラメーターを指定しない場合は、0 ~ 1000 のランダムな整数が生成されます。$random.float(from, to)
:from
(両端を含む) とto
(両端を含まない) の間のランダムな浮動小数点数を生成します (たとえば、random.float(10.5, 20.3))。パラメーターを指定しない場合は、0 ~ 1000 のランダムな浮動小数点数が生成されます。$random.alphabetic(length)
: 長さlength
(0 より大きい必要があります) の大文字と小文字のシーケンスを生成します。$random.alphanumeric(length)
: 長さlength
(0 より大きい必要があります) の大文字と小文字、数字、アンダースコアのシーケンスを生成します。$random.hexadecimal(length)
: 長さlength
(0 より大きい必要があります) のランダムな 16 進文字列を生成します。$random.email
: ランダムなメールアドレスを生成します。$exampleServer
: は、HTTP クライアントのみを使用してアクセスできる WebStorm 組み込み Web サーバーに置き換えられます。この変数は、GraphQL および WebSocket の例で使用されます。
より動的な変数
住所、色、会社名など、他の型のランダムデータを生成できます。HTTP クライアントは、Java 偽者(英語)ライブラリの次のクラス (およびパラメーターを必要としないメソッド) をサポートしています。
$random.address
$random.beer
$random.bool
$random.business
$random.ChuckNorris.fact
$random.code
$random.color
$random.commerce
$random.company
$random.crypto
$random.educator
$random.finance
$random.hacker
$random.idNumber
$random.internet
$random.lorem
$random.name
$random.number
$random.phoneNumber
$random.shakespeare
$random.superhero
$random.team
$random.university
使用可能な変数の提案を取得するには、「{{$random.}}
」と入力し始めます。
URL パラメーターや本文などのリクエスト部分で動的変数を使用します。
事前リクエストハンドラースクリプトと応答ハンドラースクリプトでは、通常の JavaScript 変数と同様に、波括弧なしで使用します。例:
システム環境変数
HTTP クライアントでは、オペレーティングシステムの環境変数を使用できます。
これらにアクセスするには、{{$env.ENV_VAR}}
構文を使用します。ここで、ENV_VAR
は環境変数の名前です。事前リクエストハンドラースクリプトと応答ハンドラースクリプトでは、通常の JavaScript 変数と同様に、波括弧なしで使用します。例:
変数名の入力を開始すると、使用可能な変数の提案が表示されます。

変数内のコレクションを反復処理する
環境変数および事前リクエストスクリプトで初期化される変数は、ID またはユーザー名のリストなどの要素のコレクションを表すことができます。このような変数が HTTP リクエストで使用されると、HTTP クライアントはこのリストの各要素に対して個別のリクエストを送信します。WebStorm は、このような変数に対して JSONPath 式もサポートしており、特定の要素または要素のサブセットにアクセスし、それぞれに対してリクエストを送信できます。
たとえば、ID によって書籍に関する情報を返すサーバーがある場合、JSON 配列 [1,2,3,4,5]
を変数 id
に割り当て、それを本文または URL 部分で使用できます。
HTTP クライアントは、各リクエストのコレクションから後続の項目に変数を置き換えながら、5 つの連続したリクエストを送信します。
同様に、リクエスト本文でコレクションを使用することもできます。次の例では、HTTP クライアントは本文に異なる値を持つ 3 つのリクエストを送信します: name: Alice
、name: Bob
、name: Charlie
JSONPath を使用すると、配列内の JSON オブジェクトの特定のパラメーターにアクセスすることもできます。例: 次のクエリでは、HTTP クライアントは、users
という変数内のすべてのオブジェクトの各 name
値に対するリクエストを送信します。
変数で JSONPath を使いやすくするために、WebStorm は、既知の JSON オブジェクトパラメーターの補完、検証、ハイライトなどの JSONPath コーディング支援を提供します。JSONPath 言語は、動的変数を除くすべての HTTP クライアント変数 (二重の波括弧で囲まれている) に挿入されます。

事前リクエストスクリプトおよび応答ハンドラースクリプトのループ内の現在のインデックスを取得するには、request.iteration()
メソッドを使用します。例: 0
は、配列の最初の項目が処理され、最初のリクエストが送信されていることを示します。
request.iteration() の例
事前リクエストスクリプトおよび応答ハンドラースクリプトのループ内でインデックスによって値を取得するには、request.templateValue(Integer)
メソッドを使用します。
request.templateValue() の例
応答を処理する
JavaScript を使用して応答を処理できます。リクエストの後に >
文字を入力し、JavaScript ファイルのパスと名前を指定するか、応答ハンドラーのスクリプトコードを {% ... %}
でラップします。
詳細は、HTTP レスポンス処理 API リファレンスを参照してください。
応答をリダイレクトする
応答をファイルにリダイレクトできます。>>
を使用して、接尾辞がすでに存在する場合は新しいファイルを作成し、>>!
を使用して、ファイルが存在する場合はファイルを書き換えます。絶対パスまたは現在の HTTP リクエストファイルからの相対パスを指定できます。また、環境変数や次の事前定義された変数など、パスで変数を使用することもできます。
{{$projectRoot}}
はプロジェクトのルートディレクトリを指します{{$historyFolder}}
は .idea/httpRequests/ を指します
次の HTTP 要求の例では、HTTP 要求ファイルの隣の myFolder に myFile.json を作成し、応答をそれにリダイレクトします。ファイルがすでに存在する場合は、myFile-1.json が作成されます。
次の HTTP リクエストの例では、.idea/httpRequests/ に myFile.json を作成します。ファイルがすでに存在する場合は、ファイルを上書きします。また、プロジェクトルートにある handler.js スクリプトを使用して応答を処理します。
関連ページ:

HTTP クライアント
HTTP クライアントプラグインを使用すると、WebStorm コードエディターで HTTP リクエストを直接作成、編集、実行できます。HTTP リクエストを作成して実行する必要がある場合、主に 2 つのユースケースがあります。RESTful Web サービスを開発していて、それが期待どおりに機能し、仕様に準拠してアクセス可能であり、正しく応答することを確認したい場合。RESTful Web サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと...

名前でターゲットを検索する (どこでも検索)
プロジェクト内またはプロジェクト外のアイテムは、その名前で見つけることができます。単一のエントリポイントから、Git 内のファイル、アクション、クラス、シンボル、設定、UI 要素などを検索できます。プロジェクト内のテキストの検索の詳細については、「プロジェクト内のターゲットを検索する」を参照してください。どこでも検索:に移動するか、を 2 回押して、すべて、クラス、ファイル、シンボル、アクションタブのある検索ウィンドウを開きます。デフォルトでは、すべてタブが開き、WebStorm に最近のフ...

なんでも実行
なんでも実行は、実行 / デバッグ構成、アプリケーション、npm または yarn スクリプト、コマンド、タスクを起動し、最近のプロジェクトを開くための簡単な方法です。また、入力時に候補を生成することにより、適切なコマンド構文を使用するのにも役立ちます。コマンドを呼び出すと、なんでも実行はそれ以降の作業を適切なツールに委譲します。なんでも実行ポップアップを開く:を 2 回押します。ツールバーになんでも実行アイコンを追加することもできます。そのためには、設定ダイアログ () を開き、に移動してメ...

言語インジェクション
言語インジェクションを使用すると、ファイルのメイン言語とは異なるプログラミング言語のコードを操作できます。WebStorm は、HTML、CSS、XML、JSON、RegExp、文字列とテンプレートリテラル内、XML に似た言語のタグと属性内の他のコードフラグメントを編集するための包括的な言語支援を提供します。始める前に:プラグインのインストールの説明に従って、設定 | プラグインページのインストール済みタブで IntelliLang バンドルプラグインが有効になっていることを確認します。一時的に...

ライブテンプレート
ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力してを押します。を押し続けると、テンプレート内の 1 つの変数から次の変数に移動します。を押して、前の変数に移動します。ライブテンプレートの種類:次のタイプのライブテンプレートが区別されます。シンプルなテンプレートは固定のプレーンテキストのみを含みます。単純なテンプレートを展開すると、そのテキストがソースコー

ファイル構造
WebStorm を使用すると、構造ツールウィンドウおよび構造ポップアップでファイルの構造を表示および移動できます。構造ツールウィンドウのツールバーでクリックし、表示する要素を選択します。プロジェクトがバージョン管理されている場合、構造ツールウィンドウと構造ポップアップに VCS ステータスの色が表示されます。これは、ファイルの変更を追跡できます。変更されたオブジェクトの名前は青色になり、新しく追加されたオブジェクトの名前は緑色でハイライトされます。構造のアイコンにマウスを合わせると、ツールチッ...