ユーザ解答データを fetch API でサーバに送信する方法

HTML，JavaScript，CSS を用いて作成した解答表示ページに，ユーザの解答データをサーバへ送信する機能を追加した事例を紹介する。

前回の記事（https://masassiah.xyz/archives/1901）を拡張したものである。

HTML, JavaScript, CSS で解答と解説を表示する

ログ送信の全体フロー

本スクリプトでは，ユーザが質問に回答したタイミングで，その情報を fetch API により外部サーバへ送信する。

処理の流れは以下のとおりである。

1. ユーザーが回答する。
2. setupQuestionToggle(questionId) 関数が実行される。
3. fetch を用いて回答内容を JSON 形式で API に送信する。
4. サーバーからレスポンスを受け取る。
5. 成功 or 失敗のメッセージをコンソールに表示する。

送信データの構成

送信するデータは data オブジェクトにまとめている。

const data = {
    timestamp: new Date().toISOString(), // 現在の日時（ISO 8601 形式）
    action: "button_clicked",  // ユーザーの操作を記録
    year: "t2025k",  // 識別用の固定値
    questionID: questionId,  // 質問ID（識別用）
    userAnswer: userAnswer,  // ユーザーの選択した回答
    correctAnswer: correctAnswer,  // 正解の選択肢
    appName: navigator.appName,  // 使用ブラウザの名前
    appVersion: navigator.appVersion  // 使用ブラウザのバージョン
};

補足

• timestamp を ISO 8601 形式で統一することで，時刻データの扱いが容易になる。
• year: "t2025k" のような固定値は、集計時の識別に利用できる。
• navigator.appName, navigator.appVersion により、利用者の環境情報も取得可能である。

fetch API による送信処理

以下のコードにより，JSON データをサーバへ POST 送信する。

fetch("https://hogehoge.jp/api/kouji2/v1/index.php", {
    method: "POST",  // HTTPメソッド
    headers: {
        "Content-Type": "application/json"  // JSON 形式で送信
    },
    body: JSON.stringify(data),  // `data` をJSON化
    mode: "cors"  // クロスオリジン通信を許可
})
.then((response) => {
    if (response.ok) {
        console.log("ログ送信成功");  // 成功メッセージ
    } else {
        console.error("ログ送信失敗");  // 失敗メッセージ
    }
})
.catch((error) => {
    console.error("通信エラー:", error);  // エラーハンドリング
});

各設定項目の解説

• method: "POST"
  • POST メソッドを用いてデータを送信する。
• headers: { "Content-Type": "application/json" }
  • 送信するデータが JSON 形式であることを指定する。
• body: JSON.stringify(data)
  • JavaScript オブジェクトを JSON 形式に変換する。
• mode: "cors"
  • クロスオリジン通信を許可する設定である。

fetch API とは

fetch API は、Webブラウザがサーバーとデータをやり取りするための仕組みである。
代表的な用途は以下のとおりである。

• Webサイトから最新のニュースを取得
• ユーザーの入力をサーバーに送信
• データベースの情報を取得して表示

従来の XMLHttpRequest に比べ，fetch API はシンプルで扱いやすい。

エラーハンドリング

.catch() を用いて通信エラーを処理する。

.catch((error) => {
    console.error("通信エラー:", error);
});

改善案

ユーザ通知を行う場合は，以下のように alert を追加することも可能である。

.catch((error) => {
    alert("通信エラーが発生しました。ネットワーク環境を確認してください。");
    console.error("通信エラー:", error);
});

サーバレスポンスの取得

サーバから返却された JSON データを取得するには，以下のように .then() を追加する。

.then((response) => response.json())
.then((data) => {
    console.log("サーバーのレスポンス:", data);
})

補足

• response.json() を使ってサーバーのレスポンスを JSON 形式に変換。
• 取得したデータをコンソールに表示。

まとめ

fetch API を用いて JSON データをサーバへ送信する方法を紹介した。
この仕組みを活用することで，ユーザ操作ログの収集を強化し，ページ改善に役立てることができる。