新しいFetch APIの章で使用する問題を作成する

[chvmvd]

問題案の検討過程については、#857 (comment) と #857 (comment) 、#857 (comment) を参照。最終的な結論については、#857 (comment) に記載している。

[chvmvd]

章の構成は次のようなものが想定されます。

• GETリクエストで、レスポンスがテキスト
• GETリクエストで、レスポンスがJSON
• POSTリクエストで、リクエストがクエリパラメータで、レスポンスがテキスト
• POSTリクエストで、リクエストがJSONで、レスポンスがテキスト
• POSTリクエストで、リクエストがJSONで、レスポンスもJSON

これをもとにすると、次のような問題を作成する必要があります。

• GETリクエストで、レスポンスがテキストの
説明の例と確認問題
• GETリクエストで、レスポンスがJSON
の説明の例と確認問題
• POSTリクエストで、リクエストボディがクエリパラメータで、レスポンスがテキスト
の説明の例と確認問題
• POSTリクエストで、リクエストボディがJSONで、レスポンスがテキスト
の説明の例と確認問題
• POSTリクエストで、リクエストボディがJSONで、レスポンスがJSON
の説明の例と確認問題
• 演習問題

現在の「フォーム」、「HTTPリクエストメソッド」、「Fetch API」の章において、説明の例あるいは確認問題、演習問題で使われている問題は以下のようにまとめることができます。

問題概要	問題の目的	問題種別（説明の例、確認問題、演習問題のいずれか）	章の名前
「あなたの名前は〇〇で〇〇歳ですね。」と表示する	フォームの説明	説明の例	フォーム
node-emojiで文字列を変換	フォームの演習	演習問題	フォーム
書籍検索システム	フォームの演習	演習問題	フォーム
「あなたの名前は〇〇で〇〇歳ですね。」と表示する	POSTリクエストの説明	説明の例	HTTPリクエストメソッド
掲示板システム	POSTリクエストの演習	演習問題	HTTPリクエストメソッド
天気予報を表示する	Fetch APIによるGETリクエストの説明	説明の例	Fetch API
「あなたの名前は〇〇で〇〇歳ですね。」と表示する	Fetch APIによるPOSTリクエストの説明	説明の例	Fetch API
「あなたの名前は〇〇で〇〇歳ですね。」と表示する	JSONを使ったFetch APIによるPOSTリクエストの説明	説明の例	Fetch API
チャットアプリ	Fetch APIの演習	演習問題	Fetch API

ここから、使用できそうな問題設定は、次のように抽出できる。

• 天気予報を表示する
• node-emojiで文字列を変換
• 「あなたの名前は〇〇で〇〇歳ですね。」と表示する
• 書籍検索システム
• チャットアプリ

GETリクエストで、レスポンスがテキストの問題の案は次のものなどが考えられる。

• “Hello World”という文字列を返す
  • 👍十分簡単
  • 👎実用的でなく面白みがない
• “サーバーは正常に動作しています”という文字列を返す
  • 👍十分簡単
  • 👎ある程度実用的である
• 天気予報を返す
  • 👍十分簡単
  • 👍実用的である
• 今日が祝日であるか平日であるかを返す
  • 👍十分簡単
  • 👍実用的である
• 日付を返す or 時刻を返す
  • 👍比較的簡単
  • 👎フロントエンド側でも時刻自体は計算できるので、サーバー側で時刻を計算する必要性を理解しにくい
• ランダムなおみくじの結果を返す or ランダムな名言を返す
  • 👍以前のおみくじの復習になる
  • 👎少し難しい
  • 👍実用的である
  • 👎不正を防ぐためなどの理由でサーバー側で計算するという必然性は挙げられるが、それを理解させるのは難しい

GETリクエストで、レスポンスがJSONの問題の案は次のものなどが考えられる。

• ユーザー情報を返す（名前、年齢など）
• サーバーの情報を返す（今日のアクセス数、今週のアクセス数など）
• 曜日ごとの営業時間を返す


  {
    monday: { open: "10:00", close: "19:00" },
    tuesday: { open: "10:00", close: "19:00" },
    wednesday: { open: "10:00", close: "19:00" },
    thursday: { open: "12:00", close: "17:00" },
    friday: { open: "10:00", close: "21:00" },
    saturday: { open: "09:00", close: "18:00" },
    sunday: { open: "09:00", close: "18:00" }
  }

• 天気予報を返す（天気、気温、湿度など）
• 駅のデータを返す（そこの駅の名前と路線名など）
• 祝日のリストを返して、祝日の数を計算して表示する
• その日が祝日であるかと祝日であれば祝日の名前を返す
• 図書館の名前と住所のリストを返す

POSTリクエストでレスポンスがテキストの問題の案は次のものなどが考えられる。

• 「あなたの名前は〇〇で〇〇歳ですね。」という文字列を返す
• 2つの数の和を返す
• BMIを計算して返す
• それぞれの科目の点数を渡し、合否を返す
• それぞれの商品の数を渡し、合計金額を返す
• node-emojiで文字列を変換する

POSTリクエストでレスポンスがJSONの問題の案は次のものなどが考えられる。

• BMIとその判定を返す
• それぞれの科目の点数を渡し、平均点と合否を返す
• それぞれの商品の数を渡し、合計金額とその内訳を返す
• 書籍検索アプリ
• チャットアプリ

以上を元にそれぞれの項目では次の問題を使うことを考える。

• GETリクエストで、レスポンスがテキスト
  • 説明の例：天気予報を返す問題
  • 確認問題：祝日であるかを返す問題
• GETリクエストで、レスポンスがJSON
  • 説明の例：天気予報を返す問題
  • 確認問題：祝日であるかとその祝日の名前を返す問題
• POSTリクエストで、レスポンスがテキスト（リクエストがJSONのものと、クエリパラメータのもので同じ問題を使用する）
  • 説明の例：点数を渡し、合否を返す問題
  • 確認問題：BMIを返す問題
• POSTリクエストで、レスポンスがJSON
  • 説明の例：点数を渡し、平均点と合否を返す問題
  • 確認問題：BMIとその判定を返す問題
• 演習問題
  • 演習問題1：おみくじの結果を返す問題 or node-emojiで文字列を変換する問題
  • 演習問題2：書籍検索アプリ or チャットアプリ

[chvmvd]

章の構成について、POSTリクエストで、リクエストがクエリパラメータであるものと、POSTリクエストで、レスポンスがテキストであるものについては、説明しないことになったため、章の構成は次のようになります。

• GETリクエストで、レスポンスがテキスト
• GETリクエストで、レスポンスがJSON
• POSTリクエストで、リクエストがJSONで、レスポンスもJSON

POSTリクエストで、レスポンスがテキストのものは扱わないことになったため、問題案もそれに応じて再考します。

POSTリクエストでレスポンスがJSONの問題の案は前回考えていたものも含めると次が考えられます。

• BMIとその判定を返す
• それぞれの科目の点数を渡し、平均点と合否を返す
• それぞれの商品の数を渡し、合計金額とその内訳を返す
• 消費税を計算し、元の金額、税額、合計金額を返す
• 書籍検索アプリ
• チャットアプリ

GETリクエストの確認問題として、祝日に関する問題を作成していましたが、これらに関係する制度は少し複雑であるため、他の問題に変える必要が出てきました。代わりに営業時間に関する問題を作成することにします。

これをもとに全体の問題案を考え直すと、次のようになります。

• GETリクエストで、レスポンスがテキスト
  • 説明の例：天気予報を返す問題
    「晴れです。」という文字列を返して、表示する。
  • 確認問題：営業中か営業時間外かを返す問題
    「カフェは現在営業中です。」という文字列を返して、表示する。
• GETリクエストで、レスポンスがJSON
  • 説明の例：天気予報を返す問題
    天気と温度のオブジェクトを返して、「晴れで気温は30度です。」と表示する。
  • 確認問題：営業中か営業時間外かだけでなく、営業時間も返す問題
    営業中かどうかの値と営業時間を返して、「カフェは現在営業中です。本日の営業時間は10:00から18:00です。」のように表示する。
• POSTリクエストで、リクエストがJSONで、レスポンスもJSON
  • 説明の例：点数を渡し、平均点と合否を返す問題
    複数科目の点数を渡すことで、その平均点と合否を返す。
  • 確認問題：消費税を計算する問題
    元の金額を渡すことで、元の金額と税額、合計金額を返す。
• 演習問題
  • 演習問題1：書籍検索アプリ
    チャットアプリでsetInterval関数やdocument.createElement関数を用いる必要があり、難易度がいきなり上がってしまうので、ここでdocument.createElement関数を使う問題が必要である。
  • 演習問題2：チャットアプリ
    次の「データベース」の章でチャットアプリを作成するため、ここで必ず扱う必要がある。

[chvmvd]

POSTリクエストで、リクエストがJSONで、レスポンスもJSONのものについては、サーバーの状態を変更するものの方がいいため、考え直します。問題案は次のようなものが考えられます。

• 来場者カウンター（来場人数を入力して送信すると、来場者の延べ人数が返ってくる）
• 寄付額トラッカー（寄付額を入力すると、トータルの寄付額が返ってくる）
• 寄付額トラッカー改（寄付額を入力すると、寄付人数とトータルの寄付額が返ってくる）
• コーヒー販売記録（コーヒーを注文すると、販売数と売上額が返ってくる）

これらをもとに、最終的に次のようになりました。

• GETリクエストで、レスポンスがテキスト
  • 説明の例：天気予報を返す問題
    「晴れです。」という文字列を返して、表示する。
  • 確認問題：営業中か営業時間外かを返す問題
    「カフェは現在営業中です。」という文字列を返して、表示する。
• GETリクエストで、レスポンスがJSON
  • 説明の例：天気予報を返す問題
    天気と温度のオブジェクトを返して、「晴れで気温は30度です。」と表示する。
  • 確認問題：営業中か営業時間外かだけでなく、営業時間も返す問題
    営業中かどうかの値と営業時間を返して、「カフェは現在営業中です。本日の営業時間は10:00から18:00です。」のように表示する。
• 演習問題
  • 演習問題1：為替レートを取得する問題
    チャットアプリでsetInterval関数を用いる必要があるため、一度ここでsetInterval関数に触れる必要がある。
  • 演習問題2：為替レートをもとに通貨の換算をする問題
    書籍検索アプリ、チャットアプリでinput要素を扱う必要があるため、一度ここでinput要素に触れる必要がある。
• POSTリクエストで、リクエストがJSONで、レスポンスもJSON
  • 説明の例：点数を渡し、平均点と合否を返す問題
    複数科目の点数を渡すことで、その平均点と合否を返す。
  • 確認問題：コーヒー売上記録
    杯数を渡すことで、売上杯数と売上金額を返す。
• 演習問題
  • 演習問題1：書籍検索アプリ
    チャットアプリでdocument.createElement関数を用いる必要があり、難易度がいきなり上がってしまうので、ここでdocument.createElement関数を使う問題が必要である。
  • 演習問題2：チャットアプリ
    次の「データベース」の章でチャットアプリを作成するため、ここで必ず扱う必要がある。