|
1 | 1 | --- |
2 | | -title: GETリクエストとPOSTリクエスト |
| 2 | +title: HTTPリクエストメソッド |
3 | 3 | --- |
4 | 4 |
|
5 | | -import postInDevelopment1 from "./postInDevelopment1.mp4"; |
6 | | -import postInDevelopment2 from "./postInDevelopment2.mp4"; |
7 | | -import postInDevelopment3 from "./postInDevelopment3.mp4"; |
| 5 | +import networkDevtool1 from "./network-devtool-1.mp4"; |
| 6 | +import networkDevtool2 from "./network-devtool-2.mp4"; |
8 | 7 |
|
9 | | -## GETリクエストとPOSTリクエスト |
| 8 | +## リクエストの種類 |
10 | 9 |
|
11 | | -HTTP上の通信において<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と言いましたが、今まで扱ってきたのはその中でも**GETリクエスト**と呼ばれるものになります。 |
| 10 | +{/* prettier-ignore */} |
| 11 | +<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と言いました。HTTPのリクエストには、<Term type="httpMethod">**メソッド**</Term>と呼ばれる区分があります。 |
12 | 12 |
|
13 | | -GETリクエストで<Term>サーバー</Term>にデータを送信する場合、前頁で扱ったように、<Term>クエリパラメータ</Term>としてURLの末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときにURLにパスワード情報が載ってしまい機密情報の漏洩につながります。また、URLの長さの制限のため、大量の情報は送信できません。 |
| 13 | +今まで扱ってきたのはその中でもメソッドがGETである、**GETリクエスト**と呼ばれるものになります。 |
14 | 14 |
|
15 | | -そこで用いるのが**POSTリクエスト**です。POSTリクエストでは、<Term>クエリパラメータ</Term>とは別に、<Term>リクエストボディ</Term>と呼ばれる領域を使って大容量のデータを送信できます。 |
| 15 | +GETリクエストで<Term>サーバー</Term>にデータを送信する場合、前頁で扱ったように、<Term>クエリパラメータ</Term>としてURLの末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときにURLにパスワード情報が載ってしまい機密情報の漏洩につながります。また、URLの長さの制限のため、大量の情報は送信できません。 |
16 | 16 |
|
17 | | -HTTPリクエストのこのような区分を、<Term>**HTTPメソッド**</Term>と呼びます。 |
| 17 | +そこで用いるのが<Term type="httpMethod">メソッド</Term>がPOSTであるHTTPリクエストの、**POSTリクエスト**です。POSTリクエストでは、<Term>クエリパラメータ</Term>とは別に、<Term>リクエストボディ</Term>と呼ばれる領域を使って大容量のデータを送信できます。 |
18 | 18 |
|
19 | 19 |  |
20 | 20 |
|
21 | | -前頁の例を、POSTリクエストを用いて書き直してみましょう。`form`要素の`method`属性に`post`を指定することで、ブラウザは送信ボタンが押されたときに`POST`メソッドの<Term>リクエスト</Term>を発行します。 |
| 21 | +前頁の例を、POSTリクエストを用いて書き直してみましょう。`form`要素の`method`属性に`post`を指定することで、ブラウザは送信ボタンが押されたときにPOSTリクエストを発行します。 |
22 | 22 |
|
23 | 23 | ```html title="public/index.html" |
24 | 24 | <!doctype html> |
@@ -55,43 +55,39 @@ app.listen(3000); |
55 | 55 |
|
56 | 56 | <ViewSource url={import.meta.url} path="_samples/post-request" /> |
57 | 57 |
|
58 | | -これまで利用していた`app.get` ([`express.Application#get`メソッド](https://expressjs.com/ja/api.html#app.get.method)) では、GETメソッドの<Term>リクエスト</Term>しか受け付けられないため、`/send`へのPOSTリクエストを受け付けるために`app.post` ([`express.Application#post`メソッド](https://expressjs.com/ja/api.html#app.post.method)) を利用しています。 |
| 58 | +これまで利用していたExpressの[`get`メソッド](https://expressjs.com/ja/api.html#app.get.method)では、GETリクエストしか受け付けられないため、`/send`へのPOSTリクエストを受け付けるために[`post`メソッド](https://expressjs.com/ja/api.html#app.post.method)を利用しています。 |
59 | 59 |
|
60 | 60 | {/* prettier-ignore */} |
61 | | -<Term>クエリパラメータ</Term>にアクセスするには、`request.query` (<a href="https://expressjs.com/ja/api.html#req.query">`express.Request#query`プロパティ</a>)を使用しましたが、<Term>リクエストボディ</Term>を使用するには、`request.body` (<a href="https://expressjs.com/ja/api.html#req.body">`express.Request#body`プロパティ</a>)を使用します。 |
| 61 | +<Term>クエリパラメータ</Term>には、`request`オブジェクトの<a href="https://expressjs.com/ja/api.html#req.query">`query`プロパティ</a>からアクセスできましたが、<Term>リクエストボディ</Term>には、`request`オブジェクトの<a href="https://expressjs.com/ja/api.html#req.body">`body`プロパティ</a>からアクセスできます。 |
62 | 62 |
|
63 | 63 | `app.use(express.urlencoded({ extended: true }));`は、<Term>リクエストボディ</Term>の解釈方法を定めています。HTMLのフォームが送信されたとき、ブラウザが発行するPOSTリクエストの<Term>リクエストボディ</Term>は、<Term>クエリパラメータ</Term>と同じくURLエンコードされた形式で記述されます。[`express.urlencoded`関数](https://expressjs.com/ja/api.html#express.urlencoded)は、URLエンコードされた<Term>リクエストボディ</Term>を読み取り、`request.body`にオブジェクトの形式でデータを保存する役割を担っています。 |
64 | 64 |
|
65 | | -このシステムでは、まず次のような画面が表示されます。 |
66 | | - |
67 | | - |
| 65 | +このWebサイトにアクセスし、以下のように入力します。 |
68 | 66 |
|
69 | | -以下のように入力して、送信ボタンをクリックすると |
| 67 | + |
70 | 68 |
|
71 | | - |
| 69 | +送信ボタンをクリックすると`http://localhost:3000/send`に移り、以下のような画面が表示されます。GETリクエストの時と違い、<Term>クエリパラメータ</Term>がURLに表示されていないことが分かります。 |
72 | 70 |
|
73 | | -`http://localhost:3000/send`に移り、以下のような画面が表示されます。GETリクエストの時と違い、<Term>クエリパラメータ</Term>がURLに表示されていないことが分かります。 |
| 71 | + |
74 | 72 |
|
75 | | - |
| 73 | + |
76 | 74 |
|
77 | | -## POSTリクエストを開発者ツールで覗いてみる |
| 75 | +## ブラウザの通信を覗いてみる |
78 | 76 |
|
79 | | -実際にPOSTリクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの`Network`タブを開き、文字を入力して送信してみます。 |
| 77 | +ブラウザの開発者ツールには、ブラウザの行うネットワーク通信を監視するツールが搭載されています。これを使い、実際にPOSTリクエストの中身がどうなっているか覗いてみましょう。 |
80 | 78 |
|
81 | | -<video src={postInDevelopment1} controls /> |
| 79 | +開発者ツールの`Network`タブを開き、フォームに文字を入力して送信してみます。 |
82 | 80 |
|
83 | | -そして`Name`欄の`send`をクリックし、`Headers`を選択すると`general`欄の`Requested method`が`POST`になっています。また、`Headers`の横にある`Payload`を選択し`Form data`を見ると、`name`と`age`の情報が載っています。 |
| 81 | +そして`Name`欄の`send`をクリックし、`Headers`を選択すると`Request Method`が`POST`になっています。 |
84 | 82 |
|
85 | | -<video src={postInDevelopment2} controls /> |
| 83 | +<video src={networkDevtool1} controls /> |
86 | 84 |
|
87 | | -ここからさらに、`Form data`の横の`view source`や`view URL-encoded`も見てみましょう。するとURLエンコードされた<Term>リクエストボディ</Term>の中身を見ることができます。 |
| 85 | +また、`Headers`の横にある`Payload`を選択し`Form Data`を見ると、`name`と`age`の情報が載っています。さらに、`Form Data`の横の`view source`や`view URL-encoded`も見てみましょう。するとURLエンコードされた<Term>リクエストボディ</Term>の中身を見ることができます。 |
88 | 86 |
|
89 | | -<video src={postInDevelopment3} controls /> |
| 87 | +<video src={networkDevtool2} controls /> |
90 | 88 |
|
91 | 89 | 以上のようにして、POSTリクエストの中身を覗くことができます。 |
92 | 90 |
|
93 | | - |
94 | | - |
95 | 91 | ## 演習問題 |
96 | 92 |
|
97 | 93 | 古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。 |
|
0 commit comments