@@ -12,12 +12,83 @@ import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";
1212
1313入力した内容によって、次に移る（表示される）ページが異なるウェブページがあるが、入力した内容によって異なるウェブページが表示されるよう、入力した内容が移った先のページのURLに反映されている。URLのうち、入力した内容が反映されている部分をクエリパラメータという。
1414
15- 例：google.comで、検索エンジンに何か入力して、検索すると、検索結果が表示されるが、そのページのURLに注目。（下画像赤線がクエリパラメータ）
15+ 例：google.comで、検索エンジンに何か入力して、検索すると、検索結果が表示されるが、そのページのURLに注目。（下画像赤線がクエリパラメータ）
16+ ![ クエリパラメータ] ( クエリパラメータ.png )
17+
18+ 以下が上記サイトのURL
19+ [ https://www.google.com/search?q=utcode&sxsrf=APq-WBv6kgtDWiq8hT6wfFdMPw4M5qWnNQ%3A1647830270847&source=hp&ei=_uQ3YrnJMY-F0wTg65qgDg&iflsig=AHkkrS4AAAAAYjfzDslMMqbHckba3h4_maDN03TFTmoX&oq=&gs_lcp=Cgdnd3Mtd2l6EAMYATIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJ1AAWABg4wpoAXAAeACAAQCIAQCSAQCYAQCwAQo&sclient=gws-wiz ] ( https://www.google.com/search?q=utcode&sxsrf=APq-WBv6kgtDWiq8hT6wfFdMPw4M5qWnNQ%3A1647830270847&source=hp&ei=_uQ3YrnJMY-F0wTg65qgDg&iflsig=AHkkrS4AAAAAYjfzDslMMqbHckba3h4_maDN03TFTmoX&oq=&gs_lcp=Cgdnd3Mtd2l6EAMYATIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJzIHCCMQ6gIQJ1AAWABg4wpoAXAAeACAAQCIAQCSAQCYAQCwAQo&sclient=gws-wiz )
20+
21+ URLの末尾に ` ?key1=value1&key2=value2&... ` の形式でクエリパラメータを記載できる。
22+ expressでは ` request.query ` オブジェクトに格納される。
23+
24+ ``` javascript title="script.js"
25+ const express = require (" express"
26+
27+ const app = express ();
28+ app .get (" /" request , response ) => {
29+ response .send (JSON .stringify (request .query ));
30+ });
31+ app .listen (3000 );
32+ ```
33+
34+ :::tip JSON.stringifyメソッド
35+ ` JSON.stringifyメソッド ` はオブジェクトをJSON形式の文字列に変換するメソッド。
36+ :::
37+
38+ :::tip URLとして使用できない文字の対処方法
39+ URLとして使用できない文字（日本語文字など）は[ URLエンコード] ( https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0 ) する必要がある。JavaScriptなら ` encodeURIComponent ` 関数で変換できる。
40+
41+ ``` javascript
42+ encodeURIComponent (" 日本語" // "%E6%97%A5%E6%9C%AC%E8%AA%9E"
43+ ```
44+ :::
1645
1746## サーバーにデータを送信する
1847form要素を使うとユーザーの入力からクエリパラメータを生成してページ遷移できる。
1948
20- ・ formのaction属性: フォーム送信時に移動し、データを送信するページ
21- ・input要素: テキストボックス
22- ・inputのname属性: クエリパラメータのキー
23- ・button要素: form内のボタンをクリックするとformのactionに指定したページに遷移する（送信ボタンになる）
49+ - formのaction属性: フォーム送信時に移動し、データを送信するページ
50+ - input要素: テキストボックス
51+ - inputのname属性: クエリパラメータのキー
52+ - button要素: form内のボタンをクリックするとformのactionに指定したページに遷移する（送信ボタンになる）
53+
54+ 以下のコードの、htmlファイル（staticディレクトリ内に作る）と、jsファイルを作成し、実行してみよう。
55+ ``` html title="index.html"
56+ <!DOCTYPE html>
57+ <html lang =" ja"
58+ <head >
59+ <meta charset =" utf-8"
60+ <title >フォーム</title >
61+ </head >
62+ <body >
63+ <form action =" /send"
64+ <input name =" name"
65+ <input name =" age"
66+ <button >送信</button >
67+ </form >
68+ </body >
69+ </html >
70+ ```
71+ ``` javascript title="sever.js"
72+ const express = require (" express"
73+
74+ const app = express ();
75+ app .use (express .static (" static"
76+ app .get (" /send" request , response ) => {
77+ response .send (
78+ ` あなたの名前は${ request .query .name } ${ request .query .age } `
79+ );
80+ });
81+ app .listen (3000 );
82+ ```
83+
84+ 上記コードを実行すると、以下のような画面がブラウザに表示される。
85+ ![ 初めの画面] ( フォームの例①.png )
86+
87+ 以下のように入力して、送信ボタンをクリックすると、
88+ ![ 初めの画面に入力] ( フォームの例②.png )
89+
90+ [ http://localhost/3000/send ] ( http://localhost/3000/send ) に移り、以下のような画面が表示される。
91+ ![ http://localhost/3000/sendの様子 ] ( フォームの例③.png )
92+
93+ このページのURLを見てみよう。特に、クエリパラメータの部分に注目。
94+ ![ URLのクエリパラメータ] ( フォームのURL.png )
0 commit comments