React (TypeScript)+ FlaskでWebアプリケーションを爆速構築する

こんにちは。今日は、React （Type Script）+ FlaskでHello Worldを表示するアプリケーションを爆速開発したので、メモとしてコードを残しておきます。

なお、今回のアプリ開発ではChatGPTに教えてもらいながら作っております。最近コーディングにおけるChatGPT補助の威力を痛感してます・・コードを教えてくれたりエラーの原因調査をして修正案を提示してくれたり、ほんと便利だ・・・

まいります。なお、筆者環境はMacです。

プロジェクトフォルダの作成

mkdir SampleProject
cd SampleProject

フロントエンド（React + TypeScript）の開発

＊Node.js, create-react-appが利用できる状態になっている前提です。

#プロジェクトの作成
npx create-react-app frontend --template typescript

#動作確認
cd frontend
npm start

動作が確認できたら、バックエンドからデータを受け取れるように、index.tsxの中身を以下に置き換えます。

import React, { useState } from 'react';
import './App.css';

function App() {
  const [message, setMessage] = useState<string>("");

  const fetchHelloWorld = async () => {
    const response = await fetch('/hello');
    const data = await response.json();
    setMessage(data.message);
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={fetchHelloWorld}>Get Hello World</button>
        <p>{message}</p>
      </header>
    </div>
  );
}

export default App;

合わせて、バックエンドと通信できるように、バックエンドの通信先をpackage.jsonに定義します。

  "proxy": "http://127.0.0.1:5000/",

バックエンドの開発

Python, pipが利用できる前提です。

プロジェクトフォルダ内、Frontendディレクトリと並列の場所にbackendフォルダを作成し、その中にapp.pyファイルを作成し、以下のコードを書きます。

# ディレクトリの移動
cd ..
mkdir backend
cd backend

# 仮想環境の作成
python -m venv venv

# 仮想環境の有効化
# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate

# 必要モジュール（Flask）のインストール
# https://flask.palletsprojects.com/en/3.0.x/installation/
pip install flask

# App.py
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/hello')
def hello_world():
    return jsonify(message="Hello World")

if __name__ == '__main__':
    app.run(debug=True)

# バックエンドの動作確認
python app.py

バックエンドのURL（http://127.0.0.1:5000）に単体でアクセスしてみることで、動作確認ができます。

フロントエンド+バックエンドの連携

フロントエンド、バックエンドをそれぞれ起動した状態で、フロントエンドの画面にアクセスい、Get Hello Worldボタンを押すと・・・バックエンドから値の取得ができました！！

おしまい