データを fetch API を使用してサーバに送信する JavaScript

ユーザの解答を含むデータを fetch API を使用してサーバに送信する JavaScript を紹介します。

先日，紹介した「HTML，JavaScript，CSS で解答と解説を表示する」に，ユーザの解答データをサーバに送信する機能を追加した事例紹介です。

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 による送信

次に、fetch() を使ってデータをサーバーへ送信します。

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);
});

サーバレスポンス

fetch API の .then() で、レスポンスデータを取得できます。

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

補足

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

まとめ

fetch API を使って JSON データを送信する方法を紹介しました。

この方法を用いて，ログの取得を充実させ，ページの改良に役立てたいです。