Webアプリケーション開発において、「HTMLフォームから送信されたデータをサーバー経由でデータベースに保存する」仕組みは、もっとも基本的かつ重要な技術のひとつです。この記事では、HTMLフォームを使ってユーザー入力を取得し、それをAPIでサーバーに送信し、最終的にMySQLなどのデータベースにINSERTする一連の流れを、Flask（Python）を使って丁寧に解説します。プログラミング初心者でも取り組めるよう、コード例や解説を交えてしっかり紹介していきます。
HTMLフォームでユーザーからの入力を取得する
まずは基本となるHTMLフォームを作成しましょう。今回は「名前」と「メールアドレス」を送信する簡単なフォームです。
<form id="userForm">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">送信</button>
</form>
このフォームは、JavaScriptを使って非同期的にAPIへデータを送信する形で設計します。これにより、ページリロードせずにサーバーと通信が可能になります。
JavaScriptでAPIリクエストを送信する
次に、上記フォームからサーバーにデータを送信するJavaScriptのコードを記述します。fetch()関数を使ってPOSTリクエストを送信します。
<script>
document.getElementById('userForm').addEventListener('submit', async function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const response = await fetch('/api/insert', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name, email })
});
const result = await response.json();
alert(result.message);
});
</script>
このコードは、ユーザーがフォームを送信したときに、入力内容をJSON形式で/api/insertというエンドポイントに送信する処理です。
FlaskでAPIエンドポイントを作成する
続いてPythonのFlaskを使ってAPIを構築します。Flaskは軽量なWebフレームワークで、学習コストも低く扱いやすいため初心者におすすめです。
まずはFlaskの基本セットアップです。
pip install flask flask-cors mysql-connector-python
次に、app.pyというファイルに以下のコードを記述します。
from flask import Flask, request, jsonify
from flask_cors import CORS
import mysql.connector
app = Flask(__name__)
CORS(app) # フロントからのアクセスを許可
# データベース接続設定
db_config = {
'host': 'localhost',
'user': 'your_user',
'password': 'your_password',
'database': 'your_database'
}
@app.route('/api/insert', methods=['POST'])
def insert_data():
data = request.get_json()
name = data.get('name')
email = data.get('email')
try:
conn = mysql.connector.connect(**db_config)
cursor = conn.cursor()
query = "INSERT INTO users (name, email) VALUES (%s, %s)"
cursor.execute(query, (name, email))
conn.commit()
return jsonify({'message': 'データを保存しました！'}), 200
except Exception as e:
return jsonify({'message': f'エラーが発生しました: {e}'}), 500
finally:
cursor.close()
conn.close()
if __name__ == '__main__':
app.run(debug=True)
このエンドポイントは、POSTリクエストで受け取ったデータをMySQLのusersテーブルに保存します。
MySQLでテーブルを作成する
前述のPythonコードで利用したusersテーブルがなければ、次のSQLで作成しておきましょう。
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100)
);
このテーブルに対して、FlaskのAPIがデータをINSERTする仕組みです。
CORS対策を理解しておこう
JavaScriptでAPIにリクエストを送信する場合、CORS（クロスオリジンリソース共有）という制約にぶつかることがあります。Flaskではflask-corsモジュールを使えば簡単に解決できます。
from flask_cors import CORS
CORS(app)
これにより、異なるオリジン（たとえばlocalhost:5500のHTMLページからlocalhost:5000のFlaskサーバーへ）でもAPIにアクセス可能になります。
実行手順まとめ
実際に動作させるための全体手順をまとめておきます。
- HTMLとJavaScriptを
index.htmlとして保存 - Flaskアプリを
app.pyで作成し、python app.pyで起動 - MySQLで
usersテーブルを作成 - ブラウザで
index.htmlを開き、フォームから送信 - サーバー側でデータがINSERTされていることを確認
応用編：バリデーションとセキュリティ
実運用を想定する場合、次のような改善点も重要です。
- 入力データのサニタイズ（XSS対策）
- SQLインジェクション対策（パラメータ化済みクエリを使用）
- バリデーション（空文字や形式のチェック）
- ログ保存
- 認証機能の追加（JWTなど）
初心者でも一歩ずつ実装を進めれば、安全で機能的なフォームとAPIの開発が可能になります。
まとめ
HTMLフォームからAPIを介してデータベースにデータを保存する処理は、モダンなWeb開発の基本です。この記事では、フォーム作成からJavaScriptによるAPI送信、Flaskでの受け取り処理、MySQLへの保存までを丁寧に解説しました。
この知識をベースに、今後のアプリ開発に役立ててください。最初は難しく感じるかもしれませんが、ひとつひとつのステップを理解すれば、誰でもWeb開発の第一歩を踏み出せます。