アプリ開発4日目～抽選アプリ～

グループ分け抽選アプリの作り方と活用方法

はじめに

学校や職場、サークル活動など、多人数が集まる場面では「誰と同じグループにするか」を決める作業が意外と大変です。手作業でくじ引きを用意するのは手間がかかりますし、毎回同じメンバーが偏ってしまうこともあります。こうした悩みを解決できるのが、グループ分け抽選アプリです。本記事では、React を使った Web アプリとしての作成方法、その具体的な使い方、さらに実際にどんな場面で役立つのかをご紹介します。

アプリの基本機能

• ランダム抽選機能
  ボタンをクリックすると、チームに所属する一人ひとりにランダムで個人番号が割り当てられます。ルーレット風のアニメーションを組み合わせることで、実際に抽選しているようなワクワク感を演出できます。
• 座席（テーブル）割り当て
  割り当てられた番号に応じて、参加者は自動的にテーブルに振り分けられます。今回は例として 5 テーブルを想定しましたが、設定を変更すれば柔軟にテーブル数を増減できます。
• グループ命名機能
  各テーブルに名前を付けられるようになっています。単なる「テーブル1」ではなく「チーム太陽」「チームドラゴン」など自由にネーミングできるので、イベントを盛り上げる要素になります。
• 履歴・記憶機能
  過去のグループ分け結果を記録しておき、次回の抽選時にはなるべく同じメンバーが重ならないように自動調整します。これにより、複数回のイベントでも公平感を保つことが可能です。

作成方法（技術的アプローチ）

開発環境
– Node.js（npm）
– Vite（React の高速開発用ツール）
– React + Hooks（useState, useEffect など）
– Tailwind CSS（スタイリング）
– GitHub やサーバーへのデプロイ（公開用）

手順の流れ

1. 環境構築
   Node.js をインストール後、PowerShell などで以下を実行します。
   npm create vite@latest group-seating
cd group-seating
npm install
npm run dev
   これで開発用サーバーが起動し、http://localhost:5173 で動作確認できます。
2. コンポーネント作成
   src/App.jsx にメインロジックを記述し、抽選用の Roulette コンポーネントや座席表示の TableGrid コンポーネントを分割して管理します。
3. UI実装
   Tailwind を利用してボタンやテーブルの見た目を整えます。ルーレット風のアニメーションは setTimeout と状態管理を組み合わせて実装しました。
4. 履歴保存
   ローカルストレージを利用すれば、簡易的に前回の分け方を保持できます。より本格的にするならサーバー側のデータベースを用意することも可能です。
5. ビルドと公開
   本番公開の際は
   npm run build
   で dist フォルダが生成されます。この中身をレンタルサーバー（例：WPXやエックスサーバー）にアップロードすれば、誰でもアクセスできる Web アプリとして利用可能になります。

使い方

1. ブラウザでアプリのページを開きます。
2. 「抽選開始」ボタンをクリックすると、ルーレットアニメーションが回転し、各参加者に番号が割り当てられます。
3. 番号に応じて自動的にテーブルに配置され、画面上に「テーブルごとのグループ」が表示されます。
4. 管理者はテーブルに名前を付けて保存できます。
5. 2回目以降は履歴が参照され、同じ人が同じグループに固まりにくくなるため、公平なグループ分けが続けられます。

どんな場面で使えるか

• 学校の授業やゼミ
  毎回のディスカッションや課題発表のグループ分けに最適です。
• 企業の研修やワークショップ
  初対面のメンバーが多い場面で、公平にグループを分けることで交流を活性化させます。
• 懇親会やイベント
  20人程度の参加者を5テーブルに分けるようなシーンにぴったりです。
• ボードゲーム・カードゲームのチーム分け
  遊ぶたびにチームをシャッフルできるので盛り上がります。
• PTAや地域活動
  偏らずにグループを分けられるため、会議や作業の効率化につながります。

おわりに

グループ分け抽選アプリは、一見シンプルな機能ですが、実際の場面では大きな効果を発揮します。React と Vite を使えば、開発初心者でも比較的容易に構築できますし、Tailwind を活用すればデザイン面も整えやすいです。また、履歴管理や公平性を意識した機能を加えることで、単なる「くじ引きツール」を超えて、繰り返し利用できる便利なサービスへと進化します。

今後はスマホ最適化やクラウドデータベース連携を加えることで、学校・職場・イベントなど幅広いシーンで活躍できるアプリとして成長させていけるでしょう。