【AWS】ブラウザ取得したデータをJSON化してS3に送ってみた｜1日1ハンズオン Day 46

2025年10月16日 21:42

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

今回はJavaScript × Python × AWSを絡めてみたいと思います⚔️

1．はじめに

前回までは JavaScript の基礎（DOM操作やイベント処理）を振り返っていました。というのも、普段はあるデータを元に処理するPythonを書いているのですが、ブラウザを起点にしたデータ保存をしたいと思ったのでJSの基礎を思い出したいなーと思いまして😇

今回は簡単なブラウザからのインプットを元に、Pythonでデータを整形して、S3にデータを格納する…という流れをやってみます。

扱う内容は下記👇

・JavaScriptでオブジェクトをJSON化する（JSON.stringify()）
・PythonでJSONを読み込む
・boto3を使ってS3にアップロード

「フロントからのインプット → バックエンドで読み込み → クラウド（S3）にアップロード」という3ステップです。

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

2．構成

今回想定している構成は下記です。

hands-on-aws/
└── day46/
    ├── index.html
    ├── script.js
    ├── move_json.py
    └── upload_to_s3.py
    └── user_data.json   // script.jsで生成されるjsonファイル

というわけでフォルダとファイルを作成。

// フォルダ作成
mkdir -p hands-on-aws/day46

// 対象フォルダに移動
cd hands-on-aws/day46

// ファイル作成
touch index.html script.js upload_to_s3.py move_json.py

// 構成確認
ls

3．ブラウザでデータをJSON化してみる

フロント側を実装します。
名前と点数と入力して、それをJSON化してみようと思います。

3-1．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>

超シンプルな入力フォームができました😆

3-2．script.js

次にJavaScriptで、入力値をJSON文字列に変換するようにします。

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

JSON.stringify() メソッドを使用してJavaScriptのオブジェクトをJSON形式の文字列に変換するようにしました。

見返すように構文メモ✍️

---
JSON.stringify(value, replacer, space)
---
・value 変換したいデータ（オブジェクトなど）
・replacer 変換対象を制御する関数または配列（null＝すべて含める）
・space インデント（見やすさ用）。ここでは2＝2スペースで整形
---

実行すると、ブラウザの <pre> タグ内に👇のような結果が出ます。

と、同時にjson形式でダウンロードもされているはず。

4．PythonでS3に送ってみる

次は「3．」で作成・ダウンロードしたJSONファイルを移動させた上で、クラウド（S3）に保存してみます。

4-1．事前準備

私はすでにインストール済みの環境で作業をしているのですが、未インストールの場合は下記でインストールと設定を行います。

pip install boto3 awscli // boto3（Python SDK）とawscliをインストール
aws configure // アクセスキーとシークレットキーを設定
aws s3 mb s3://pomera-handson-day46 // S3にバケット作成

※ boto3 はグローバルに直接インストールはできないので、venvなど仮想環境を作って作成すると良いです。

4-2．move_json.py

ファイル移動用のpythonファイルを用意します。

# -------------------------------
# move_json.py：ダウンロードフォルダ → day46 フォルダへJSONを移動
# -------------------------------
import os
import shutil
from pathlib import Path

# ダウンロードフォルダ
DOWNLOAD_DIR = Path.home() / "Downloads"

# このスクリプトのあるディレクトリ
DEST_DIR = Path(__file__).resolve().parent

# 対象ファイル
FILE_NAME = "user_data.json"


def move_user_data_json():
    """
    ダウンロードフォルダから DEST_DIR に user_data.json を移動する
    """
    source_path = DOWNLOAD_DIR / FILE_NAME
    dest_path = DEST_DIR / FILE_NAME

    if os.path.exists(source_path):
        shutil.move(source_path, dest_path)
        print(f"📦 {FILE_NAME} を移動しました → {dest_path}")
        return dest_path
    else:
        print(f"⚠️ {DOWNLOAD_DIR} に {FILE_NAME} が見つかりません。手動で確認してください。")
        return None
    
if __name__ == "__main__":
    move_user_data_json()

ちゃんと動作するか、単体で実行してみます。

python upload_to_s3.py

実行前：

実行結果：

無事 user_data.json を day46 ディレクトリに移動できました！

4-3．upload_to_s3.py

アップロード用のpythonファイルを用意します。
「4-2．」で用意した move_json.py を呼び出し、このファイルのみ実行すればファイル移動とS3へのアップロードがされるようにしたいと思います。

# -------------------------------
# Day46：PythonでS3にアップロード
# -------------------------------
import boto3
import json
from datetime import datetime
from move_json import move_user_data_json

# アップロード先バケット
BUCKET_NAME = "pomera-handson-day46"


def upload_to_s3(data):
    """
    渡されたデータをS3にアップロードする
    """
    # JSON化
    json_data = json.dumps(data, ensure_ascii=False)

    # S3クライアント
    s3 = boto3.client("s3")

    # ファイル名を動的に生成
    key_name = f"input/{data['name']}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json"

    # アップロード
    s3.put_object(
        Bucket=BUCKET_NAME,
        Key=key_name,
        Body=json_data
    )

    print(f"✅ S3へアップロード完了しました！（{key_name}）")

if __name__ == "__main__":
    # move_json.py を実行して user_data.json を day46ディレクトリ に移動
    json_path = move_user_data_json()
    if json_path is None:
        exit("❌ user_data.json が見つからなかったため処理を終了します。")

    # day46ディレクトリに移動したJSONを読み込み
    with open(json_path, "r", encoding="utf-8") as f:
        data = json.load(f)

    # S3にアップロード
    upload_to_s3(data)

python upload_to_s3.py

実行結果：

S3にアップロードされているか確認しましょう。

aws s3 ls s3://pomera-handson-day46/input/

実行イメージ：

2025-XX-XX XX:XX:XX         XX ぽめら_2025XXXX_XXXXXX.json

ダウンロードして中身の確認：

aws s3 cp s3://pomera-handson-day46/input/<ファイル名>.json .
cat <ファイル名>.json

実行結果：

無事アップロードされていることを確認できました㊗️

やりたかったことは確認できたので今日はここまでにします！

5．まとめ

今回は、フロントでデータを取得し、バックで処理をして、S3にデータをアップロードをするという3ステップを作成してみました。

Webサービスとして実装するのであればもう少し各要素をシンクロさせることが重要ですが、ローカルで簡単に動かすことを意識した構成をしてみた次第です。

というわけで今日はここまで！
ではまた明日👋

6．参考リンク

・データをJSONに変換：JSON.stringify() メソッド

・S3

・Boto3

【AWS】 ブラウザ取得したデータをJSON化してS3に送ってみた｜1日1ハンズオン Day 46

1．はじめに

2．構成

3．ブラウザでデータをJSON化してみる

3-1．index.html

3-2．script.js

4．PythonでS3に送ってみる

4-1．事前準備

4-2．move_json.py

4-3．upload_to_s3.py

5．まとめ

6．参考リンク

いいなと思ったら応援しよう！

【AWS】ブラウザ取得したデータをJSON化してS3に送ってみた｜1日1ハンズオン Day 46