React (Next.js) と Python (Flask) を使ったアプリケーションの作成
この記事では、MacでReact (Next.js) と Python (Flask) を使ってウェブアプリケーションを開発する方法を紹介します。また、データベースとしてSQLiteを利用し、データの永続化も行います。
必要なソフトウェアのインストール
まずはじめに、以下のソフトウェアをインストールしておきます。
- Node.js (Next.js開発のため)
- Python (Flask開発のため)
Node.jsのインストールは、公式サイトからMac用のインストーラをダウンロードしてインストールしてください。
Pythonのインストールは、MacにはデフォルトでPythonがインストールされていますが、最新のPythonをインストールするには公式サイトからダウンロードしてください。
プロジェクトディレクトリの作成
ターミナルで以下のコマンドを実行してプロジェクトディレクトリを作成し、移動します。
mkdir my_project
cd my_project
Next.jsアプリの作成
npx create-next-app frontend
cd frontend
npm install
cd ..
上記のコマンドで、frontendという名前のNext.jsアプリが作成されます。create-next-appはNext.jsのアプリケーションを作成するためのCLIツールで、npxで実行することで最新版をダウンロードして使用できます。
Flaskアプリの作成
次に、Pythonの仮想環境を作成し、Flaskをインストールします。
python3 -m venv backend
source backend/bin/activate
pip install Flask
仮想環境は、プロジェクトごとにPythonの環境を分けることができる機能です。python3 -m venv backendコマンドで、backendという名前の仮想環境が作成されます。source backend/bin/activateで仮想環境をアクティブ化し、その中でFlaskをインストールします。
その後、backendディレクトリにapp.pyを作成し、以下の内容を記述します
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return "Hello from Flask!"
if __name__ == '__main__':
app.run(debug=True)
このコードは、最もシンプルなFlaskアプリケーションです。app = Flask(name)でFlaskのインスタンスを作成し、@app.route('/')でルート（トップページ）へのリクエストを受け付けるよう設定しています。hello()関数は、リクエストが来たときに"Hello from Flask!"という文字列を返します。最後のif name == 'main':で、このファイルが直接実行されたときにapp.run(debug=True)を実行し、開発サーバーを起動します。
Next.jsとFlaskの連携
frontend/pages/index.jsを編集し、Next.jsアプリからFlaskアプリにリクエストを送信するように変更します。
import { useState, useEffect } from 'react';
export default function Home() {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('http://localhost:5000/')
.then((res) => res.text())
.then((data) => setMessage(data));
}, []);
return (
<div>
<h1>Next.js + Flask</h1>
<p>{message}</p>
</div>
);
}
このコードでは、ReactのuseStateとuseEffectフックを利用しています。useStateでmessageという状態を定義し、useEffectでFlaskアプリからデータを取得してmessageにセットします。取得したデータは、<p>タグで表示されます。
CORS対応
FlaskアプリにCORSを設定するために、flask-corsパッケージをインストールします。
pip install flask-cors
次に、backend/app.pyを編集し、CORSを設定します。
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # CORS設定を追加
@app.route('/')
def hello():
return "Hello from Flask!"
if __name__ == '__main__':
app.run(debug=True)
これで、Next.jsアプリとFlaskアプリが正しく通信できるようになります。
動作確認
両方の開発サーバーを実行します。
Next.js開発サーバー:
cd my_project/frontend
npm run dev
Flask開発サーバー:
cd my_project/backend
source bin/activate
python app.py
ブラウザで http://localhost:3000 を開き、Next.jsアプリからFlaskアプリへのリクエスト結果が表示されることを確認します。"Hello from Flask!"というメッセージが表示されるはずです。
以上で、MacでReact (Next.js) と Python (Flask) を使用したアプリの基本的な導入が完了しました。今後は、フロントエンド（Next.js）とバックエンド（Flask）の機能を拡張し、アプリケーションを充実させていくことができます。データベース（SQLite）を利用してデータの永続化も行いましたので、CRUD機能などの実装も可能です。
SQLiteデータベースの設定
FlaskアプリにSQLiteデータベースを設定するために、以下のパッケージをインストールします。
pip install flask_sqlalchemy
次に、backend/app.pyを編集し、データベースの設定を追加します。
from flask import Flask, jsonify, request
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
CORS(app)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///my_database.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Item(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80), nullable=False)
def __init__(self, name):
self.name = name
def __repr__(self):
return f'<Item {self.name}>'
db.create_all()
@app.route('/')
def hello():
return "Hello from Flask!"
@app.route('/items', methods=['GET'])
def get_items():
items = Item.query.all()
return jsonify([str(item) for item in items])
@app.route('/items', methods=['POST'])
def add_item():
name = request.json['name']
item = Item(name=name)
db.session.add(item)
db.session.commit()
return jsonify(str(item)), 201
if __name__ == '__main__':
app.run(debug=True)
このコードでは、flask_sqlalchemyを使用してSQLiteデータベースを設定しています。app.config['SQLALCHEMY_DATABASE_URI']でデータベースの接続情報を指定し、db = SQLAlchemy(app)でデータベースのインスタンスを作成します。Itemクラスはデータベースのテーブルを表現し、db.create_all()でテーブルを作成します。get_items()とadd_item()関数でデータベースからアイテムを取得、追加する処理を実装しています。
フロントエンドでデータベースを操作する
フロントエンドでデータベースにアクセスするために、frontend/pages/index.jsを編集します。
import { useState, useEffect } from 'react';
export default function Home() {
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState('');
useEffect(() => {
fetchItems();
}, []);
const fetchItems = async () => {
const res = await fetch('http://localhost:5000/items');
const data = await res.json();
setItems(data);
};
const addItem = async () => {
if (!newItem) return;
const res = await fetch('http://localhost:5000/items', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: newItem }),
});
const data = await res.json();
setItems([...items, data]);
setNewItem('');
};
return (
<div>
<h1>Next.js + Flask + SQLite</h1>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<input
type="text"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
/>
<button onClick={addItem}>Add Item</button>
</div>
);
}
このコードでは、useStateでitemsとnewItemの状態を定義し、useEffectでアイテムを取得するfetchItems()関数を実行しています。addItem()関数は、新しいアイテムをデータベースに追加するための処理を実装しています。
動作確認
Next.js開発サーバーとFlask開発サーバーが実行されていることを確認し、ブラウザで http://localhost:3000 を開きます。以下のことを確認します。
- 新しいアイテムを入力して、「Add Item」ボタンをクリックすると、アイテムがリストに追加されます。
- ページをリロードしても、リストに表示されるアイテムが保持されています。
これで、React (Next.js) と Python (Flask) を使用したアプリケーションにデータベース (SQLite) を導入し、データの永続化ができるようになりました。さらに機能を追加したり、データベーススキーマをカスタマイズしたりして、アプリケーションを発展させていくことができます。
この記事が、MacでReact (Next.js) と Python (Flask) を使ったアプリケーション開発に役立つことを願っています。
Discussion
記事とってもわかりやすかったです！
ありがとうございました！☺️