⚡

ChatGPTとbolt.newを活用したRails × React × k3s構成の開発事例

に公開
Rails
個人開発
ChatGPT
bolt.new
zennfes2025ai
tech

1. はじめに

本記事では、AIを活用したフルスタック開発の実践事例を紹介します。
題材は、私が個人開発している FF14 Live Ranking という配信ランキングサービスです。

フロントエンドに React SPA、バックエンドに Rails を採用し、ジョブ管理には Sidekiq、インフラは k3s 上に構築しました。さらに、開発の初動を大幅に加速するために ChatGPT と bolt.new を積極的に導入しています。

https://ff14-liveranking.blmlab.net/

2. 開発の動機と題材選び

  • 「何かWebサービスを作ってみたい」という気持ちがスタート地点。
  • 自分の好きな FF14 に関連するデータを可視化したいと考えた。
  • ゲーム内データは規約的に扱いづらいが、配信データなら正規のAPIを通じて取得可能。
  • Twitch / YouTube の配信を集計し、ランキング化するサービスを作ることにした。

題材としては「配信ランキング」というよくあるテーマですが、FF14に特化したものは存在していませんでした。
だからこそ「今どの配信が盛り上がっているのか」を横断的に知れる仕組みを作ることに意味があり、自分のモチベーションにもつながりました。

3. フロントエンド開発（bolt.new）

最初の一歩は フロントエンドのモックアップ生成から始めました。
理由は、まず「どんなサイトを作るのか」のイメージを形にするためです。

  • bolt.new に「FF14の配信ランキングを表示したい」と入力すると、右側にReact + TailwindベースのUIプレビューが即表示される。
  • 生成されたUIは、シンプルで見やすいテーブルデザインで、そのまま本番サイトにも採用できる完成度でした。
  • この時点ではバックエンドやデータは未接続。それでもUIが見えることで開発の方向性が固まった。

bolt.newを使って感じた課題

便利な一方で、エラー修正がうまく効かないケースもありました。
例えば不要な ( が入り込んで構文エラーになったのですが、何度「修正して」とプロンプトを投げても直らず、最終的に bolt.new内のエディタで手動修正しました。
この点は「AIに丸投げ」ではなく、人間の介入が必要だと痛感した部分です。

4. バックエンド開発（ChatGPT）

次に進めたのは API仕様とRails実装です。
ここでもAIを積極的に活用しました。

  1. 要件整理（人間側）

    • 5分ごとにTwitch/YouTubeの配信データをスナップショット
    • 視聴者数ランキングを作成
    • 検索・フィルタ（言語、視聴者数閾値など）に対応

  2. ChatGPTに依頼

    • 上記要件を入力し、API仕様（入出力JSON）を生成させる
    • 仕様をもとに マイグレーション / モデル / コントローラの雛形コードを生成

  3. 人間が微調整した点

    • CSRF対策、Cookieベース認証の組み込み
    • Sidekiqジョブとの連携処理
    • キャッシュ戦略（Rails.cache with Redis）

5. API代表例：Streamsランキング

エンドポイント

GET /api/ranking/streams?limit=50&language=ja&min_viewers=100

返却例（抜粋）

{
  "ts": { "twitch": "2025-09-09T00:55:00Z", "youtube": "2025-09-09T00:55:00Z" },
  "slot": "2025-09-09T00:55:00Z",
  "count": 3,
  "streams": [
    {
      "source": "twitch",
      "id": "1234567890",
      "login": "some_streamer",
      "viewers": 1413,
      "title": "絶やる",
      "url": "https://www.twitch.tv/some_streamer"
    },
    {
      "source": "youtube",
      "id": "YTvIdABC",
      "channel_title": "配信チャンネル",
      "viewers": 140,
      "title": "ギャザクラ雑談",
      "url": "https://www.youtube.com/watch?v=YTvIdABC"
    }
  ]
}
  • ランキングは最新の5分スロットで算出。
  • Twitch/YouTube の最新スナップショットを合算。
  • クエリパラメータで言語や視聴者数閾値を指定可能。

6. bolt.newへのAPI仕様入力

バックエンドの仕様をそのまま bolt.new に入力することで、フロントのAPI連携部分を自動生成しました。

例：/api/stream_totals_series

  • Queryパラメータ（tf, lookback, roll）をChatGPTに書かせる
  • 出力JSONのサンプルも提示
  • それをbolt.newに渡すと、グラフ描画用のReactコンポーネントがプレビューされる

👉 これにより、API設計 → フロント実装の齟齬を最小化できました。

7. データ収集と集計（Sidekiq）

  • ジョブ管理は Sidekiq。
  • FpiPipelineJob を5分ごとに実行（cron: "3-59/5 * * * *"）
    • 若干遅らせて投入し、外部APIの遅延を吸収
  • Twitch/YouTube APIクォータは ChatGPTに逆算させて日次制限内に収まるよう設計
  • 古いスナップショットはメンテナンスジョブで定期削除

この仕組みで「過剰に呼ばない」「でも最新データは確実に取れる」バランスを取っています。

8. インフラ構成（k3s）

本番環境は軽量Kubernetesの k3s 上で稼働。

$ kubectl get pods -n ff14liveranking
NAME                                       READY   STATUS    AGE
ff14liveranking-app-**********       1/1     Running   88m
ff14liveranking-worker-**********    1/1     Running   88m
postgres-**********                  1/1     Running   3d8h
redis-**********                     1/1     Running   3d8h
  • Rails/Reactアプリ：ff14liveranking-app
  • ジョブワーカー：ff14liveranking-worker
  • DB：Postgres
  • キャッシュ/キュー：Redis

Rails.cache のストアもRedisに統一し、キャッシュとジョブキューを同居させたシンプルな構成です。

9. セキュリティ設計

10. まとめ

今回の開発で得られた大きな気づきは、AIは開発を置き換える存在ではなく、ブーストする存在だということです。

  • bolt.new → フロントUIのモックアップを即時生成
  • ChatGPT → API仕様・モデル設計・コード雛形を生成
  • 自分 → リーダーとして方向性を決め、セキュリティや品質を担保

一人開発でありながら、まるでチームで動いているような感覚を味わえました。
ただし、生成コードは必ずしも最適ではなく、エラー修正やセキュリティ設計は人間の判断が不可欠です。

それでも、今回の開発は確実に一人開発のスピードとスケール感を引き上げてくれました。
今後もこの AI駆動のフルスタック開発フロー を、より大きなプロジェクトに広げていきたいと思います。

作ったサービスはこちらです。
https://ff14-liveranking.blmlab.net/

Discussion