こんにちは。はけです。

ふだんはシステムエンジニアでWEB系の開発をしています。

今回は超簡単にHTTP接続を行う方法を解説しようと思います。

  • HTTP要求を投げるためのテストツールをつくるのが大変！
  • 簡単にHTTP要求を投げてテストしたい！
  • HTTP要求を種類別に送信したい！

こんな経験ありますよね？

特にWEB系の開発では「HTTP接続」は必ず使用され、特に肝になってくる部分だと思います。

このHTTP接続を超簡単に試すことができます。それが、Visual Studio CodeのREST Clientです。

本記事では実際に使いながらREST Clientを学ぶことができます！

ほんとうに簡単にできるので皆さんも試してみてください！！！

では、早速解説していきます！

簡単にできる！Visual Studio Code のREST ClientでHTTP接続をテストする！！

ではさっそく超簡単にできるREST ClientによるHTTP接続の方法を解説していきます。

実行環境

私が確認した環境は以下の環境になります。

  • Windows10
  • Visual Studio Code 1.50.1
  • REST Client 0.24.3

まずはHTTP接続を試してみる

まずは単純なHTTP接続（要求）を投げてみましょう！

単純なHTTP接続を行っていきます。次の３STEPを解説していきます。

  • Visual Studio Codeをインストールする
  • REST Clientをインストールする
  • HTTPファイルを作成する

Visual Studio Codeをインストールする

今回使用するREST Clientを使用するためには、Visual Studio Codeが必要なので、持ってない方はインストールしていきます。

exeファイルをダウンロードする

次のサイトからexeファイルをダウンロードしてください。

https://code.visualstudio.com/download

ここでWindowsの方は赤枠部分を押すことでインストール用ファイル(exeファイル)がダウンロードできます。

ダウンロードしたexeファイルを実行し、Visual Studio Codeをインストールする

ダウンロードフォルダに先ほどのexeファイルがダウンロードされているので、ダブルクリックで実行してください。

特に問題なくインストールができると思います。ここでは詳細は割愛します。

※VisualStudioCodeはデフォルトが英語ですが日本語化出来ます。日本語化する場合は次の方のサイトがわかりやすかったので参考にしてください。

https://qiita.com/nanamesincos/items/5c48ff88a4eeef0a8631

REST Clientをインストールする

次にREST Clientをインストールしていきます。

REST Clientはプラグインなので、Visual Studio Code内でインストールすることがができます。

Visual Studio Codeを開く

Visual Studio Codeを開きます。

プラグインタブでREST Clientを検索しインストールする

画像のようにインストールボタンを押下することでインストールができます。

「プラグイン」タブ→検索窓に「REST Client」を入力→「インストール」を押す

これでインストールができます。

HTTPファイルを作成する

次にHTTP接続の内容を定義するための「.http」ファイルを作成します。

この「.http」ファイルがREST Client用のファイルになります。

次のような「test.http」ファイルをつくってください。

GET https://www.google.com/ HTTP/1.1

HTTP接続！

では接続してみます。ファイル上に表示される「Send Request」を押してください。

接続がうまくできると右上に「HTTP/1.1 200 OK」が表示されます。200が表示されると接続成功です。

なお、400番台や500番台が返ってくると接続失敗になります。

今回の場合、googleのページに接続が成功し、赤枠部分にgoogleホームページのHTMLが返されています。

単純なHTTP接続は以上となります。

このあとはHTTP接続の種類別の書き方を解説していきます。

HTTP要求の種類別に要求をしてみる！

HTTP要求をする際にHTTP要求の種類に注意しないといけません。

種類が変わると取りたい情報が取れないことがよくあるからです。

HTTP要求の種類として次を解説します。

リクエストメソッドGET
POST
PUT
DELETE
エンコードタイプx-www-form-urlencoded
json
xml
curl－

リクエストメソッドごとにHTTP要求をしてみる

HTTPはGETとPOST、PUT、DELETEで大きく変わります。

GETでHTTP要求をおこなう

GETでは、URLに直接パラメータを指定します。

GETのURLは「https://xxxxxx.jp/?user=abc&date=19900120」などのような形式になります。

次のようなコードを書きます。

GET https://www.google.com/?user=aiueo&20101208 HTTP/1.1

URLの後に?をつけることでパラメータを設定することができます。

パラメータとパラメータの間は&で区切ります。

POST、PUT、DELETEでHTTP要求をおこなう

POST、PUT、DELETEはほぼ同じです。

変わるのはリクエストメソッドの部分です。GETと書いていた部分をPOST、PUT、DELETEのいづれかに変えます。

POST http://localhost/data/ HTTP/1.1
Content-Type: application/xml

<request>
    <user>sample</user>
    <date>Wed, 21 Oct 2015 10:00:50 GMT</date>
</request>
###

PUT http://localhost/data/ HTTP/1.1
Content-Type: application/xml

<request>
    <user>sample</user>
    <date>Wed, 21 Oct 2015 10:00:50 GMT</date>
</request>
###

DELETE http://localhost/data/ HTTP/1.1
Content-Type: application/xml


<request>
    <user>sample</user>
    <date>Wed, 21 Oct 2015 10:00:50 GMT</date>
</request>

パラメータの指定方法がGETと変わります。URLやオプションを指定し、1行改行したあとにパラメータを指定することができます。

このコードではxml形式でパラメータを設定しています。

エンコードタイプごとのパラメータの設定方法については次の章で詳しく解説していきます！

エンコードタイプごとにHTTP要求をしてみる

エンコードタイプによるパラメータ指定方法の違いを解説していきます。

ここでの内容はすべてPOST,PUT,DELETEでの指定方法になります。GETはURL上でのパラメータ設定のみとなります。

x-www-form-urlencoded形式でHTTP要求をおこなう

次のようなコードを書いてください。x-www-form-urlencoded形式によるHTTP要求が行なえます。

POST http://localhost/ HTTP/1.1
Content-Type: x-application/x-www-form-urlencoded; charset=UTF-8

user=abcd
&date=20201010

「Content-Type」に「x-application/x-www-form-urlencoded;」を指定することでx-www-form-urlencoded形式になります。

パラメータはURLとオプション指定後、１行改行して設定してください。

x-www-form-urlencoded形式では、GETのときと同じように&でパラメータとパラメータの間を区切ります。

json形式でHTTP要求をおこなう

次のようなコードを書いてください。json形式によるHTTP要求が行なえます。

POST http://localhost/ HTTP/1.1
Content-Type: application/json

{
    "user": "abcd",
    "date": "20201010"
}

「Content-Type」に「application/json」を指定することでjson形式を指定できます。

パラメータはURLとオプション指定後、１行改行して設定してください。

json形式では、jsonを直接記載します。これが直接パラメータに指定されます。

xml形式でHTTP要求をおこなう

次のようなコードを書いてください。xml形式によるHTTP要求が行なえます。

POST http://localhost/data/ HTTP/1.1
Content-Type: application/xml

<request>
    <user>sample</user>
    <date>Wed, 21 Oct 2015 18:27:50 GMT</date>
</request>
###

「Content-Type」に「application/xml」を指定することでxml形式を指定できます。

こちらもパラメータはURLとオプション指定後、１行改行して設定してください。

xml形式では、xmlを直接記載します。これが直接パラメータに指定されます。

curlコマンドでHTTP要求をしてみる

最後に少し毛色が違いますが、curl形式での要求の作り方を紹介しておきます。

Linux上でHTTP接続を確認したい場合に、curlコマンドによるテストをする場合がよくあります。

そのcurlコマンドもREST Clientで簡単につくることができます。

curlコマンドを作りたいURLのパラメータの１行下（画像の場合9行目）にカーソルを置いた状態で、「F1」コマンドをおいてください。

次に検索ボックスで「Copy Request As cURL」を入力し、選択してください。

すると、HTTP要求をcurlコマンドにした文字列がクリップボードにコピーされます。

「貼り付け(Ctrl + v)」することでcurlコマンドが取得できます。

以上がcurlコマンドの取得方法になります。

まとめ

今回はVisual Studio Code のREST Clientで超簡単にHTTP接続を行う方法を解説しました。

主に次のようなことを解説しました。

  • 単純なHTTP接続の方法
  • リクエストメソッドごとのHTTP接続の方法
  • エンコードタイプごとのHTTP接続の方法
  • curlコマンドの簡単な作り方

私も最近このツールを知り、あまりの簡単さに驚愕しました。

テストや動作確認を本当に簡単にできるのでみなさんも試してみてください。