Skip to content

Commit 45868bc

Browse files
authored
GET/POST リクエストの書き直し (#835)
1 parent a39a1fd commit 45868bc

13 files changed

+25
-30
lines changed

docs/3-web-servers/07-get-post/index.mdx

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
2-
title: GETリクエストとPOSTリクエスト
2+
title: HTTPリクエストメソッド
33
---
44

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";
87

9-
## GETリクエストとPOSTリクエスト
8+
## リクエストの種類
109

11-
HTTP上の通信において<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と言いましたが、今まで扱ってきたのはその中でも**GETリクエスト**と呼ばれるものになります。
10+
{/* prettier-ignore */}
11+
<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と言いました。HTTPのリクエストには、<Term type="httpMethod">**メソッド**</Term>と呼ばれる区分があります。
1212

13-
GETリクエストで<Term>サーバー</Term>にデータを送信する場合、前頁で扱ったように、<Term>クエリパラメータ</Term>としてURLの末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときにURLにパスワード情報が載ってしまい機密情報の漏洩につながります。また、URLの長さの制限のため、大量の情報は送信できません
13+
今まで扱ってきたのはその中でもメソッドがGETである、**GETリクエスト**と呼ばれるものになります
1414

15-
そこで用いるのが**POSTリクエスト**です。POSTリクエストでは、<Term>クエリパラメータ</Term>とは別に、<Term>リクエストボディ</Term>と呼ばれる領域を使って大容量のデータを送信できます
15+
GETリクエストで<Term>サーバー</Term>にデータを送信する場合、前頁で扱ったように、<Term>クエリパラメータ</Term>としてURLの末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときにURLにパスワード情報が載ってしまい機密情報の漏洩につながります。また、URLの長さの制限のため、大量の情報は送信できません
1616

17-
HTTPリクエストのこのような区分を、<Term>**HTTPメソッド**</Term>と呼びます
17+
そこで用いるのが<Term type="httpMethod">メソッド</Term>がPOSTであるHTTPリクエストの、**POSTリクエスト**です。POSTリクエストでは、<Term>クエリパラメータ</Term>とは別に、<Term>リクエストボディ</Term>と呼ばれる領域を使って大容量のデータを送信できます
1818

1919
![HTTPメソッドの比較](./method-comparison.png)
2020

21-
前頁の例を、POSTリクエストを用いて書き直してみましょう。`form`要素の`method`属性に`post`を指定することで、ブラウザは送信ボタンが押されたときに`POST`メソッドの<Term>リクエスト</Term>を発行します
21+
前頁の例を、POSTリクエストを用いて書き直してみましょう。`form`要素の`method`属性に`post`を指定することで、ブラウザは送信ボタンが押されたときにPOSTリクエストを発行します
2222

2323
```html title="public/index.html"
2424
<!doctype html>
@@ -55,43 +55,39 @@ app.listen(3000);
5555

5656
<ViewSource url={import.meta.url} path="_samples/post-request" />
5757

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)を利用しています。
5959

6060
{/* 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>からアクセスできます
6262

6363
`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`にオブジェクトの形式でデータを保存する役割を担っています。
6464

65-
このシステムでは、まず次のような画面が表示されます。
66-
67-
![名前と年齢を入力1](postRequest1.png)
65+
このWebサイトにアクセスし、以下のように入力します。
6866

69-
以下のように入力して、送信ボタンをクリックすると
67+
![名前と年齢を入力し、これから送信する。](post-request.png)
7068

71-
![名前と年齢を入力2](postRequest2.png)
69+
送信ボタンをクリックすると`http://localhost:3000/send`に移り、以下のような画面が表示されます。GETリクエストの時と違い、<Term>クエリパラメータ</Term>がURLに表示されていないことが分かります。
7270

73-
`http://localhost:3000/send`に移り、以下のような画面が表示されます。GETリクエストの時と違い、<Term>クエリパラメータ</Term>がURLに表示されていないことが分かります。
71+
![送信後、URLにクエリパラメータが表示されていない。](post-request-2.png)
7472

75-
![名前と年齢を入力3](postRequest3.png)
73+
![GETリクエストとPOSTリクエスト](requestAndResponse.png)
7674

77-
## POSTリクエストを開発者ツールで覗いてみる
75+
## ブラウザの通信を覗いてみる
7876

79-
実際にPOSTリクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの`Network`タブを開き、文字を入力して送信してみます
77+
ブラウザの開発者ツールには、ブラウザの行うネットワーク通信を監視するツールが搭載されています。これを使い、実際にPOSTリクエストの中身がどうなっているか覗いてみましょう
8078

81-
<video src={postInDevelopment1} controls />
79+
開発者ツールの`Network`タブを開き、フォームに文字を入力して送信してみます。
8280

83-
そして`Name`欄の`send`をクリックし、`Headers`を選択すると`general`欄の`Requested method``POST`になっています。また、`Headers`の横にある`Payload`を選択し`Form data`を見ると、`name``age`の情報が載っています
81+
そして`Name`欄の`send`をクリックし、`Headers`を選択すると`Request Method``POST`になっています。
8482

85-
<video src={postInDevelopment2} controls />
83+
<video src={networkDevtool1} controls />
8684

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>の中身を見ることができます。
8886

89-
<video src={postInDevelopment3} controls />
87+
<video src={networkDevtool2} controls />
9088

9189
以上のようにして、POSTリクエストの中身を覗くことができます。
9290

93-
![GETリクエストとPOSTリクエスト](requestAndResponse.png)
94-
9591
## 演習問題
9692

9793
古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。
Binary file not shown.
Binary file not shown.
Loading
4.94 KB
Loading
Binary file not shown.
Binary file not shown.
Binary file not shown.
-46.6 KB
Binary file not shown.
-47.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)