【ハッカソン開発記#6】Next.js と Python を連携する際にぶつかった問題だけ

Last updated at 2026-06-02Posted at 2026-06-01

Next.js と Python を連携する際にぶつかった問題

現在の Python コードは、

までは完成していて、コンソールへの出力はできた状態です。

しかし、Next.js から利用する Web アプリとして考えると、いくつか課題があります。

現在は結果を print() して終了しています

print(dataList)

Next.js から利用するためには、

API サーバーが必要です。

FastAPI を導入する。

@app.post("/api/search")

のようなエンドポイントを作成する。

現在はスクレイパーが Main.py に直接書かれています。

MarineMesseScraper()

会場を追加するたびに、

if venue == ...

が増えてしまい、面倒です。
更に、plantUMLでクラス図を作成してみたところ、せっかく作ったクラスの関係がｼｮﾎﾞすぎて、これなら関数で十分という機能になっています。

抽象クラスを利用します。

class VenueScraperBase(ABC):
    ...

各会場のスクレイパーはこれを継承する形で実装してみようと思います。

MarineMesseScraper
ZeppScraper

Main.py は会場の違いを意識せず、

scraper.get_formatted_data()

のような共通メソッドを呼び出すだけになります。多態性（ポリモーフィズム）が実現できるようになります。しかし、サイトによってボタンのクリックが必要でないものもあるので、 @abstractmethod を付けるところには注意が必要と考えています。

会場が増えるたびに Main.py を修正する必要があります。

レジストリパターンを利用

VENUE_REGISTRY = {
    "マリンメッセ福岡": MarineMesseScraper,
    "Zepp福岡": ZeppScraper
}

現在は Edge を起動して、実際にDOM操作を行えているかを確認しています。

webdriver.Edge()

ですが、Render や AWS などの Linux サーバーでは画面が存在しないため、このままいくと失敗するそうです。

ヘッドレスモードを利用します。

options.add_argument("--headless")

ChromeDriver を利用し、バックグラウンドで実行する。

Next.js
    ↓ HTTP
FastAPI
    ↓
VenueScraper
    ↓
Selenium
    ↓
Gemini