【JavaScript】ブラウザの入力値を増やせる仕様に変えてみた｜1日1ハンズオン Day 47

ぽめら

2025年10月17日 23:45

こんにちは、ぽめらです。
本記事は1日1ハンズオン企画、第47回です！

今回はAWS連携用のブラウザ仕様を変えてみるために、DOMを使って入力欄を増やすハンズオンにチャレンジします🐸

1．はじめに

前回はJS×Python×AWSで、ブラウザからのデータダウンロード→バックエンド経由でS3にデータをアップロードにチャレンジしました。

今回はそれを少しずつ調整してみたいなと思いまして、フロントの画面を少し変えるハンズオンをしていきたいと思います。
全部一気にやろうとしたら少し手間だったので、ちょっとずつやります😇

では、レッツハンズオン！

2．ブラウザの入力値を増やせる仕様に変えてみた

前回のプログラムを題材にします。

2-1．変更前プログラム

「データをブラウザでダウンロードして、S3にアップロードする」が趣旨だったため前回は単一データをJSONにして保存する仕組みにしていました。

・（変更前）index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ブラウザデータをJSON化 Day46</title>
</head>
<body>
  <h1>データを入力してJSONに変換</h1>

  <input id="name" placeholder="お名前を入力">
  <input id="score" placeholder="スコアを入力">
  <button id="generate">JSONを生成</button>

  <!-- JSON出力エリア -->
  <pre id="output"></pre>

  <script src="script.js"></script>
</body>
</html>

・（変更後）script.js

// -------------------------------
// Day46：ブラウザデータをJSON化
// -------------------------------

const nameInput = document.getElementById("name");
const scoreInput = document.getElementById("score");
const button = document.getElementById("generate");
const output = document.getElementById("output");

// ボタンがクリックされたときにJSONを生成
button.addEventListener("click", () => {
  const data = {
    name: nameInput.value,
    score: Number(scoreInput.value),
    timestamp: new Date().toISOString()
  };

  // JSON文字列に変換
  const jsonData = JSON.stringify(data, null, 2);
  output.textContent = jsonData;
  console.log("JSON生成完了：", jsonData);

  // ブラウザ上でJSONファイルとしてダウンロード
  const blob = new Blob([jsonData], { type: "application/json" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "user_data.json";
  link.click();
});

ただ、データって一個だけ入れたいことの方が少ないので、複数個データを入れられるように改修しよう！というのが今回やりたいこと。

2-2．変更後プログラム

というわけで画面に「行追加」ボタンを追加し、JSで各データをリストに格納することで一つのJSONファイルとしてまとめる方法に変更しました。

・（変更後）index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day47 複数データをJSON化してみる</title>
</head>
<body>
  <h1>複数データ入力フォーム</h1>

  <div id="form-area">
    <input class="name" placeholder="名前を入力">
    <input class="score" placeholder="スコアを入力">
  </div>

  <button id="add">行を追加</button>
  <button id="generate">JSONを生成</button>

  <pre id="output"></pre>

  <script src="script.js"></script>
</body>
</html>

・（変更後）script.js

// -------------------------------
// Day47：複数データをJSON化
// -------------------------------
const formArea = document.getElementById("form-area");
const addButton = document.getElementById("add");
const generateButton = document.getElementById("generate");
const output = document.getElementById("output");

// 行追加ボタン
addButton.addEventListener("click", () => {
  const newRow = document.createElement("div");
  newRow.innerHTML = `<input class="name" placeholder="名前を入力">
                      <input class="score" placeholder="スコアを入力">`;
  formArea.appendChild(newRow);
});

// JSON生成ボタン
generateButton.addEventListener("click", () => {
  const names = document.querySelectorAll(".name");
  const scores = document.querySelectorAll(".score");
  const records = [];

  for (let i = 0; i < names.length; i++) {
    records.push({
      id: i + 1,
      name: names[i].value,
      score: Number(scores[i].value),
      timestamp: new Date().toISOString()
    });
  }

  const jsonData = JSON.stringify(records, null, 2);
  output.textContent = jsonData;

  // JSONをダウンロード
  const blob = new Blob([jsonData], { type: "application/json" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "user_data_bulk.json";
  link.click();

  console.log("✅ JSON生成完了");
});

・結果：

無駄のない洗練されたフォーム
（CSSも何も当ててないので引き続き超シンプル😇）

今日はいったんここまでとします！

3．まとめ

今回は Day46 で実装したプログラムをベースに、複数の値を取得できるように改修をしてみました。

つくるもの（JSONファイル）は変わっていないので、過程の複数データをまとめるだけの仕様でOKでした。

というわけで超短いですが今日はここまで！
ではまた明日👋