JTPA Community Hub: AI勉強会の運営を支えるコミュニティサイト

なぜ作ったか

ベイエリアAI勉強会/JTPAの活動では、イベント告知、RSVP、登壇者情報、発表資料、参加者チェックイン、プロジェクト共有、記事、Q&Aなどがそれぞれ別の場所に分散しがちでした。運営側はイベントごとに参加者管理や発表資料の整理が必要で、参加者側も「次のイベントはどこか」「登壇資料はどこにあるか」「他の人がどんなAIプロジェクトを作っているか」を追いにくい状態になりやすい。

そこで、AI勉強会の活動を一つの場所に集約するコミュニティサイトを作りました。いま見ているこの「みんなのプロジェクト」機能も、このプロジェクトの一部です。

何を作ったか

JTPA / ベイエリアAI勉強会向けのコミュニティ運営プラットフォームです。

主な機能は以下です。

• イベント一覧、イベント詳細、RSVP、ウェイトリスト
• 登壇者登録、発表タイトル/概要の登録、スライドや動画リンクの共有
• QRコードによる当日チェックイン
• AIプロジェクトのShowcase投稿、管理者レビュー、コメント、いいね
• メンバーブログ、Q&A、メモ/ノウハウ、コミュニティ投票
• Googleログイン、公開プロフィール、マイページ
• 管理画面でのイベント作成、投稿承認、参加者CSV出力、権限管理
• 日本語/英語の多言語対応

単なる告知サイトではなく、勉強会の運営と参加者同士の継続的な交流を支えるための実用アプリとして作っています。

仕組み

フロントエンドは Next.js 16 App Router + React 19、ホスティングは Firebase App Hosting です。データは Firestore、認証は Firebase Auth の Google OAuth、画像や発表資料は Firebase Storage を使っています。

設計上のポイントは、Firestoreの読み書きを基本的にサーバー側へ寄せたことです。Server Components が表示用データを読み、Server Actions が投稿、RSVP、承認、コメント、いいねなどの更新処理を担当します。ブラウザから直接Firestoreを書き換える構成にせず、認可は requireUser / requireAdmin / requireEditor のようなサーバー側ヘルパーに集約しました。

一方で、画像やスライドなどの大きなファイルはブラウザからFirebase Storageへ直接アップロードします。アップロード後にServer ActionでメタデータだけをFirestoreへ保存する構成にして、Cloud Run側で重いファイル転送を受けないようにしています。

AIをどう使って作ったか

実装の大部分は Codex や Claude Code と対話しながら進めました。AIに「全部作って」と丸投げするのではなく、機能ごとに小さく分解し、既存コード、制約、期待する挙動、テスト方法を毎回渡す形にしました。

たとえば、次のような流れです。

1. 人間が「イベントRSVPにウェイトリストを入れたい」「QRチェックインを作りたい」「Showcase投稿に承認フローを入れたい」といった運用上の要件を決める
2. AIに既存のデータモデル、Server Action、Firestore rules、UIコンポーネントを読ませる
3. AIに実装方針を出させ、認可、データ整合性、エラー時の挙動を確認する
4. 小さな単位で実装させる
5. npm run typecheck、npm run lint、npm test、Firestore/Storage rulesテストで壊れていないか確認する
6. レビューコメントやCIの失敗をAIに渡して修正する

特に効果が大きかったのは、Firestoreのデータモデル、Server Actions、管理画面、Markdown投稿フォーム、i18n文言、テスト、READMEや運用ドキュメントの整備です。AIは既存パターンに合わせた実装を高速に出せるので、同じ設計でイベント、プロジェクト、記事、Q&A、投票などの機能を横展開しやすくなりました。

逆に、人間側で強く管理する必要があったのは、セキュリティ、権限設計、運営フロー、ユーザー体験、Next.js 16の新しい仕様への追従です。AIが出したコードをそのまま信じるのではなく、「誰がこの操作をできるべきか」「失敗した時にデータが壊れないか」「承認前の投稿が公開されないか」を重点的に見ました。

難しかったポイント

一番難しかったのは、コミュニティサイトとして自然に見えるUIと、運営ツールとして必要な厳密さを両立することです。参加者向けにはシンプルに見せつつ、裏側ではRSVP数、ウェイトリスト、登壇者数、出席数、承認状態、投稿者権限、ファイル所有者などを正しく扱う必要があります。

QRチェックインも、単にQRを表示するだけではなく、イベント開始前後の有効期限、ログイン後のリダイレクト、同じ人の二重チェックイン、管理者による手動修正、累計参加回数の更新まで考える必要がありました。

また、Next.js 16は従来のNext.jsと違う点が多かったので、AIに任せる前にプロジェクト内のドキュメントや実際のAPIを読ませることが重要でした。

作ってみて得られた学び

AIコーディングで大事なのは、プロンプトを長くすることよりも、良い制約を渡すことだと感じました。「このファイルを読んで」「この既存パターンに合わせて」「このテストを通して」「この権限境界を壊さないで」と指定すると、AIはかなり実務的な開発パートナーになります。

一方で、プロダクトの目的や運営上の判断はAIだけでは決まりません。どの投稿を承認制にするか、Q&Aは即時公開にするか、イベント参加者に何を入力してもらうか、といった判断はコミュニティの文脈を知っている人間が決める必要があります。

今後やりたいこと

今後は、投稿やQ&AのAI要約、イベント後の自動レポート、参加者向けのおすすめ記事/プロジェクト表示、運営向けのダッシュボード分析などを追加したいです。コミュニティ内に蓄積されるプロジェクト、記事、質問、イベント資料をAIで再利用しやすくして、勉強会の知識がイベント当日だけで終わらない形にしていきたいです。