utcode-learn/docs/3-golden-week/06-form/index.md at 5cfe70fec42358b0f1c5517ee96d5e2f2aab6e00 · ut-code/utcode-learn

title	フォーム

import CodeBlock from '@theme/CodeBlock'; import Term from "@site/src/components/Term"; import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";

クエリパラメータの利用

クエリパラメータとは？

入力した内容によって、次に移る（表示される）ページが異なるウェブページがあるが、入力した内容によって異なるウェブページが表示されるよう、入力した内容が移った先のページのURLに反映されている。URLのうち、入力した内容が反映されている部分をクエリパラメータという。

例：google.comで、検索エンジンに何か入力して、検索すると、検索結果が表示されるが、そのページのURLに注目。（下画像赤線がクエリパラメータ）

以下が上記サイトのURL
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

URLの末尾に ?key1=value1&key2=value2&... の形式でクエリパラメータを記載できる。
expressでは request.query オブジェクトに格納される。

const express = require("express");

const app = express();
app.get("/", (request, response) => {
  response.send(JSON.stringify(request.query));
});
app.listen(3000);

:::tip JSON.stringifyメソッド JSON.stringifyメソッドはオブジェクトをJSON形式の文字列に変換するメソッド。 :::

:::tip URLとして使用できない文字の対処方法 URLとして使用できない文字（日本語文字など）はURLエンコードする必要がある。JavaScriptなら encodeURIComponent 関数で変換できる。

encodeURIComponent("日本語") // "%E6%97%A5%E6%9C%AC%E8%AA%9E"

:::

サーバーにデータを送信する

form要素を使うとユーザーの入力からクエリパラメータを生成してページ遷移できる。

formのaction属性: フォーム送信時に移動し、データを送信するページ
input要素: テキストボックス
inputのname属性: クエリパラメータのキー
button要素: form内のボタンをクリックするとformのactionに指定したページに遷移する（送信ボタンになる）

以下のコードの、htmlファイル（staticディレクトリ内に作る）と、jsファイルを作成し、実行してみよう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>フォーム</title>
  </head>
  <body>
    <form action="/send">
      <input name="name" />
      <input name="age" />
      <button>送信</button>
    </form>
  </body>
</html>

const express = require("express");

const app = express();
app.use(express.static("static"));
app.get("/send", (request, response) => {
  response.send(
    `あなたの名前は${request.query.name}で、${request.query.age}歳ですね。`
  );
});
app.listen(3000);