Web Technologies WebApp

ReactとFlaskを使用したスライダー連携アプリの作成方法

以下は、ReactとFlaskを使用してスライダーを作成し、Webアプリを構築する過程を説明するブログ記事の例です。

今回は、Reactを使ってスライダーを作成し、その値をFlaskバックエンドに送信して処理するWebアプリを作成する方法を紹介します。ReactとFlaskの連携、スライダーコンポーネントの作成、Flaskサーバーの設定、そしてデータ通信の流れをステップバイステップで説明します。

1. プロジェクトのセットアップ

まず、Reactアプリを作成します。以下のコマンドでReactのアプリケーションを作成しましょう。

npx create-react-app number-slider
cd number-slider
npm start

これでReactアプリが作成され、開発サーバーが起動します。

Reactのバージョン不一致：Reactバージョンを18に固定

Reactアプリを作成した際に発生した依存関係のエラーは、Reactのバージョンの不一致が原因です。react@19.0.0というバージョンが見つかっているようですが、@testing-library/reactはreact@18.x.xを必要としているため、依存関係の衝突が起きています。

Reactのバージョンを18.x.xに指定することで、依存関係の問題を回避できます。手動でReactのバージョンを18.x.xに設定し、その後依存関係をインストールし直す手順を試してみてください。

  1. create-react-appコマンドを実行する際に、プロジェクトを作成しますが、Reactのバージョンが19.x.xに固定されているため、次に進みます。
  2. プロジェクトが作成されたら、package.jsonを開きます。
  3. reactとreact-domのバージョンを18.x.xに手動で変更します。
"dependencies": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  ...
}
  1. その後、以下のコマンドで依存関係を再インストールします。
npm install

2. 必要なパッケージのインストール

次に、axiosパッケージをインストールして、ReactとFlaskサーバーとの通信を行います。

npm install axios

axiosは、HTTPリクエストを簡単に扱うためのライブラリです。

ファイル階層

/number-slider
│
├── /src
│   ├── /components
│   │   └── SliderComponent.js        # スライダーコンポーネントのファイル
│   ├── App.js                        # Reactアプリのメインコンポーネント
│   ├── index.js                      # Reactのエントリーポイント
│   └── App.css                       # スタイル用のCSSファイル
│
├── package.json                      # プロジェクトの設定ファイル
└── .gitignore                        # Git管理対象外にするファイル

3. Reactのコンポーネント作成

アプリのメインコンポーネントとしてスライダーを作成します。src/components/SliderComponent.jsにスライダーコンポーネントを作成します。

import React, { useState } from 'react';
import axios from 'axios';

const SliderComponent = () => {
  const [sliderValue, setSliderValue] = useState(5); // スライダーの初期値
  const [response, setResponse] = useState(null); // Flaskからのレスポンスを保存

  const handleSliderChange = (event) => {
    const value = event.target.value;
    setSliderValue(value);

    // Flaskバックエンドにスライダーの値を送信
    axios.post('http://localhost:5000/api/update-slider', { value })
      .then((res) => setResponse(res.data))
      .catch((error) => console.error('Error:', error));
  };

  return (
    <div>
      <h2>Adjust the slider</h2>
      <input
        type="range"
        min="1"
        max="10"
        value={sliderValue}
        onChange={handleSliderChange}
      />
      <p>Slider Value: {sliderValue}</p>
      {response && <p>Response from Flask: {response.message}</p>}
    </div>
  );
};

export default SliderComponent;

このコンポーネントでは、スライダーを操作するとその値がhandleSliderChange関数で更新され、FlaskサーバーにPOSTリクエストで送信されます。レスポンスは画面に表示されます。

4. App.jsでコンポーネントを呼び出す

src/App.jsで、先ほど作成したSliderComponentをインポートし、表示します。

import React from 'react';
import SliderComponent from './components/SliderComponent'; // コンポーネントのインポート

function App() {
  return (
    <div className="App">
      <h1>React Slider with Flask</h1>
      <SliderComponent />  {/* スライダーコンポーネントの呼び出し */}
    </div>
  );
}

export default App;

これで、ReactのUIにスライダーが表示されるようになります。

5. Flaskサーバーの設定

次に、Flaskサーバーをセットアップします。以下のコマンドでFlaskをインストールします。

pip install flask

次に、app.pyという名前でFlaskサーバーを作成します。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/update-slider', methods=['POST'])
def update_slider():
    data = request.get_json()
    slider_value = data.get('value')
    print(f"Slider Value: {slider_value}")
    return jsonify({"message": f"Slider value is {slider_value}"})

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

このFlaskサーバーは、POSTリクエストを受け取り、スライダーの値をログに出力し、JSONレスポンスとして返します。

Flaskサーバーの起動

以下のコマンドでFlaskサーバーを起動します。

flask run

サーバーが起動したら、ReactアプリからFlaskサーバーへ通信が行われるようになります。

6. ReactとFlaskの連携

これで、Reactのスライダーを操作するたびに、スライダーの値がFlaskサーバーに送信され、そのレスポンスがReactアプリに表示されます。

7. React 18での問題解決

React 18以降では、ReactDOM.render() が ReactDOM.createRoot() に変更されました。エラーが発生した場合は、以下のようにindex.jsを修正します。

import React from 'react';
import ReactDOM from 'react-dom/client'; // 'react-dom' から 'react-dom/client' に変更
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

これで、React 18に対応したレンダリングが行われるようになります。

8. 結果の確認

すべてが設定できたら、ブラウザでhttp://localhost:3000にアクセスし、スライダーを操作して、その値がFlaskサーバーに送信され、レスポンスが表示されることを確認します。

まとめ

この記事では、ReactとFlaskを使用して、スライダーの値をリアルタイムで送信し、そのレスポンスを表示するアプリケーションを作成しました。ReactのUIコンポーネントとFlaskバックエンドを組み合わせることで、シンプルなフロントエンドとバックエンドの連携方法を学びました。React 18の新しいAPIにも対応し、エラーの解決方法も紹介しました。

このように、ReactとFlaskを使ったスライダーアプリの作成方法を段階的に学ぶことができました。バックエンドとの連携や非同期通信に関する理解を深めるために、ぜひこの手順を試してみてください。

-Web Technologies, WebApp
-