応用編：FastAPI (Backend) + React (Frontend) 構成ガイド

このガイドでは、より拡張性が高く、現代のWeb開発の現場で標準的に採用されている「フロントエンドとバックエンドを分離する構成」を紹介します。Python以外の技術にも触れてみたい方、将来的に商用化できるようなアプリ構成を目指したい方はぜひ挑戦してみてください。

1. 全体像：どう連携するのか？

Streamlitなどはサーバー側で画面もロジックも全て処理しますが、この構成では役割を明確に分けます。

• Frontend (React): ユーザーの操作（パラメータ入力、ボタンクリック）を受け付け、結果を表示する「顔」の部分。
• Backend (FastAPI): 量子アニーリングマシン（D-WaveやAmplifyなど）に計算を投げ、結果を受け取り、Frontendに返す「頭脳」の部分。
• 通信 (HTTP/JSON): 両者はインターネットを介して「JSON形式のデータ」で会話します。

2. Backend: FastAPI (Python)

量子アニーリングのライブラリ（Ocean SDKやFixstars Amplify SDK）はPythonで動くため、Python製の高速WebフレームワークであるFastAPIを使用するのが定石です。

役割

• Reactから送られてきたパラメータ（QUBO行列や制約条件など）を受け取る。
• アニーリングマシンにジョブを送信し、解（Solution）を受け取る。
• Reactが扱いやすい形にデータを整形してレスポンスを返す。

開発のヒント

• CORS (Cross-Origin Resource Sharing) の設定: これが初心者が一番ハマるポイントです。Frontend（例: localhost:3000）とBackend（例: localhost:8000）のドメイン（ポート）が違う場合、明示的に許可しないと通信がブロックされます。

困った時の参照リンク

• FastAPI公式チュートリアル: https://fastapi.tiangolo.com/ja/tutorial/ (日本語で非常に分かりやすいです)
• CORSの設定方法: https://fastapi.tiangolo.com/ja/tutorial/cors/
• Pydantic (データ検証): https://docs.pydantic.dev/latest/

---

3. Frontend: React

JavaScript（またはTypeScript）のライブラリです。モダンなUIを作成するために使用します。

役割

• ユーザーインターフェースの構築。
• Backendへの非同期通信（APIを叩く）。
• ローディング中の表示や、結果の可視化。

開発のヒント

• Vite (ヴィート) で始める: create-react-appよりも高速でモダンな Vite を使ってプロジェクトを作成することをお勧めします。
  • コマンド: npm create vite@latest my-quantum-app -- --template react
• 通信ライブラリ: ブラウザ標準の fetch でも良いですが、axios を使うとコードが少し簡潔になります。

困った時の参照リンク

• React 公式ドキュメント: https://ja.react.dev/
• Vite ガイド: https://ja.vitejs.dev/guide/
• MDN Web Docs (JavaScriptの基礎): https://developer.mozilla.org/ja/docs/Web/JavaScript

---

4. 連携のイメージ

Backend (main.py)

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()

# CORS設定（Reactからのアクセスを許可）
# ※デプロイ時は適切なドメインに変更してください
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"], # Viteのデフォルトポート
    allow_methods=["*"],
    allow_headers=["*"],
)

class AnnealingRequest(BaseModel):
    param_a: int
    param_b: int

@app.post("/solve")
async def solve(req: AnnealingRequest):
    # ここで量子アニーリングを実行
    # result = d_wave_solver.sample(...)

    # ダミーの結果を返す
    return {"energy": -10.5, "solution": [1, 0, 1]}

Frontend (App.jsx)

import { useState } from "react";

function App() {
  const [result, setResult] = useState(null);

  const handleSolve = async () => {
    // FastAPIのエンドポイントを叩く
    const response = await fetch("http://localhost:8000/solve", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ param_a: 10, param_b: 20 }),
    });
    const data = await response.json();
    setResult(data);
  };

  return (
    <div>
      <button onClick={handleSolve}>計算開始</button>
      {result && <div>エネルギー: {result.energy}</div>}
    </div>
  );
}
export default App;

---

5. デプロイ方法（作品の公開）

ハッカソンやイベント中にサクッと公開するための無料・低コストな選択肢です。

コンポーネント	推奨サービス	特徴	リンク
Frontend	Vercel	React/Next.jsの開発元。GitHubと連携して爆速デプロイ可能。無料枠あり。	vercel.com
Backend	Render	Pythonアプリを簡単に公開できる。無料プランあり（スリープ機能あり）。	render.com
Backend	Railway	設定が簡単で、使い勝手が良い。少額のクレジットが必要な場合があるが安定している。	railway.app

デプロイ時の注意点

1. URLの書き換え: ローカル開発時は localhost で通信していましたが、Reactのコード内の fetch 先を BackendのURL（例: https://my-api.onrender.com） に書き換える必要があります。
2. APIキーの管理: D-WaveやAmplifyのAPIトークンをGitHubにアップロードしないように .gitignore の設定を確認し、デプロイ先サービスの「Environment Variables（環境変数）」設定画面でキーを登録しましょう。