Skip to content

index.mdx

Latest commit

 

History

History
371 lines (281 loc) · 17.1 KB

index.mdx

File metadata and controls

371 lines (281 loc) · 17.1 KB
title Fetch APIによるデータの送信

import coffeeSalesAppVideo from "./coffee-sales-app.mp4"; import bookSearchAppVideo from "./book-search-app.mp4"; import chatAppVideo from "./chat-app.mp4";

Fetch APIを用いると、サーバーからデータを取得するだけでなく、サーバーにデータを送信することもできます。この節では、Fetch APIを用いてデータを送信する方法について学びます。実践的なアプリケーションの開発のためには、HTTPの仕組みについて、より深く理解する必要があります。まずは、HTTPリクエストとレスポンスの詳細な構造を確認しましょう。

HTTPリクエストとレスポンスの構造

Expressによるサーバー構築の節では、クライアントからサーバーへの要求をリクエストと呼び、その応答をレスポンスと呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。

  • 制御情報: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、メソッドと呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、ステータスコードと呼ばれる、リクエストの結果を示すコードが含まれます。
  • ヘッダー: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
  • ボディ: リクエストやレスポンスの実際のデータ。リクエストのボディには、サーバーに送信するデータが含まれ、レスポンスのボディには、サーバーからクライアントに返されるデータが含まれます。

HTTPリクエストは、メソッドによってそのリクエストの目的を示します。代表的なHTTPリクエストメソッドは、次の2つです。

  • GET: サーバーからデータを取得するためのリクエスト。Webページを表示するためのリクエストなどに使用されます。
  • POST: サーバーにデータを送信するためのリクエスト。フォームの送信などに使用されます。

これまで扱ってきた、ブラウザのアドレスバーにURLを入力したときに発行されるリクエストや、Fetch APIにURLのみを指定して発行されるリクエストは、全てGETリクエストです。データを送信するためには、代わりにPOSTリクエストが使用できます。POSTリクエストでは、GETリクエストには存在しないリクエストボディが存在し、ここにサーバーに送信したいデータを含めることができます。

HTTPメッセージの構造

Fetch APIでデータを送信する

Fetch APIを用いてPOSTリクエストを送信するためには、fetch関数の第2引数に、リクエストメソッド、リクエストヘッダー、リクエストボディを指定します。

次の例では、Fetch APIを用いて、銀行口座から預金を引き出すアプリケーションを作成します。利用者が「一万円を出金」ボタンを押すと、Fetch APIを用いてPOSTリクエストがサーバーに送信され、サーバーは銀行口座の残高を更新してレスポンスを返します。ブラウザは、このレスポンスを受け取り、残高を更新して表示します。

  • main.mjs
    • 6行目では、express.jsonを用いて、リクエストボディをJSONとして解釈できるようにしています。これにより、11行目のように、リクエストの処理中にrequest.bodyを通してJSON形式のリクエストボディにアクセスできるようになります。
    • 9行目では、app.postメソッドを、/transactionというパスに対するリクエストを受け付けるために使用しています。app.getメソッドがGETリクエストを受け付けるのに対し、app.postメソッドはPOSTリクエストを受け付けます。
  • public/script.js
    • 2行目のfetch関数の第2引数のオブジェクトには、methodプロパティにリクエストメソッドを、headersプロパティにリクエストヘッダーを、bodyプロパティにリクエストボディを指定しています。
    • 6行目で指定されているcontent-typeリクエストヘッダは、リクエストボディの形式を示すために使用されます。ここでは、application/jsonを指定して、リクエストボディがJSON形式であることを示しています。
    • 8行目のJSON.stringify関数は、JavaScriptのオブジェクトをJSON形式の文字列に変換するために使用されます。これにより、オブジェクトをリクエストボディとして送信できるようになります。
import express from "express";

const app = express();
app.use(express.static("./public"));
// リクエストボディをJSONとして解釈する
app.use(express.json());

const account = { balance: 100000 };
app.post("/transaction", (request, response) => {
  // リクエストボディはrequest.bodyに格納される
  account.balance += request.body.amount;
  response.json(account);
});

app.listen(3000);
<p>残高: <span id="balance"></span>円</p>
<button id="withdraw-button" type="button">一万円を出金</button>
<script src="./script.js"></script>
document.getElementById("withdraw-button").onclick = async () => {
  const response = await fetch("/transaction", {
    // POSTリクエストを送信
    method: "POST",
    // リクエストヘッダーにContent-Typeを指定
    headers: { "Content-Type": "application/json" },
    // リクエストボディにJSON形式のデータを指定
    body: JSON.stringify({ amount: -10000 }),
  });
  const account = await response.json();
  document.getElementById("balance").textContent = account.balance;
};

ブラウザに搭載されている開発者ツールを用いると、ブラウザが発行したリクエストや、受け取ったレスポンスの内容を確認できます。次の画像は、Google ChromeのNetworkタブを開いた状態で、上記のサンプルアプリケーションを実行したときのものです。/transactionに対するPOSTリクエストが正しく発行されていることがわかります。

開発者ツールのNetworkタブ

確認問題

次のように、売れた杯数を入力することで、売上杯数と売上金額を計算するWebアプリケーションを作成してみましょう。