サーバー処理（app.py）

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route("/chat", methods=["POST"])
def chat():
    user_message = request.json.get("message")
    # ここでAIや処理を呼び出してレスポンスを作成
    response = f"あなたが言ったのは: {user_message}"
    return jsonify({"reply": response})
  

これは app.py に書くサーバ側の入口部分です。やってることは超シンプル： フロントから来た JSON の message を受け取って、そのまま返してるだけ。
実際はここに AI 呼び出しや DB 保存、Slack 連携などを差し込むイメージです。

フロント処理（message.js）

// static/js/message.js
document.getElementById("sendBtn").addEventListener("click", () => {
    const message = document.getElementById("input").value;

    fetch("/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message })
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("chatBox").innerHTML += 
          "
" + data.reply + "
";
    });
});
  

こちらは message.js に入れるクライアント側の小さなスクリプト。 ボタンを押したら入力をサーバに投げて、返ってきた reply を画面にポンと追加します。
要は「app.py が受け取って → message.js が表示する」の基本ループを担ってます。

テンプレートと配置

フォルダ構成はシンプルにしておくと迷いにくいよ：

project/
├─ app.py                # サーバ（Flask）
├─ templates/
│  └─ message.html       # ブラウザに表示するHTML（Flaskのテンプレート）
└─ static/
   └─ js/
      └─ message.js      # フロント側のJS
  

templates/message.html の中で JS を読み込むときは、テンプレート側に普通に <script src="{{ url_for('static', filename='js/message.js') }}"></script> を置きます（表示用に記事に貼るときはエスケープしてね）。

動かし方

# 任意で仮想環境を作る
python -m venv venv
# mac/linux
source venv/bin/activate
# windows
venv\Scripts\activate

# 必要パッケージを入れる
pip install Flask

# サーバ起動
python app.py

# ブラウザで開く
http://127.0.0.1:5000/
  

まずはこれで動かしてみて、挙動を確認しましょう。動いたら次に機能追加に進めば OK！