<Timtim />

概要

4年後期のプログラミングIIIBの授業時間で開発した、明石高専内のイベント・メンバー募集プラットフォームです。

「やりたいを、だれかと」をコンセプトに、友人との2人チーム開発により制作しました。

「メンバー集めの大変さ」を解決することを目的としたアプリケーションです。

• 一緒にやってくれる人がなかなか見つからない
• グループLINEやメールで呼びかけても誰も答えてくれない
• 専門知識のある人に手伝ってほしい
• 他学年や他学科の学生とも何かしたい

こういった課題を、コミュニティを明石高専内に限定することで解決します。

明石高専には本科2年生～4年生の全学生が1チーム10人弱ほどのチームを結成して、各チームが独自のテーマを選定して毎週1,2時間活動する、Co+workという授業があります。 友人がこのCo+workで使用するアプリを開発したいのだが経験が無いので一緒に開発しよう！と誘ってくれたのがきっかけで、Plus Mateyの開発を始めました。

スライド

システム概要

だれかと一緒にやりたい、手伝ってほしい活動やイベントを投稿し、利用者がそれに応募することで、仲間を集めるプラットフォームです。

できること

Plus Mateyの主要機能を紹介します。

• イベントの主催
  • 自分のやりたいこと、手伝ってほしいこと等を投稿し、一緒に活動してくれる人を集めることができます。
• 集めたいメンバーの条件設定
  • 主催者は集めたいメンバーを学年や学科からタグ付けすることで、参加メンバーの条件設定ができます。
• イベントへの参加
  • 投稿されているイベントから、自分が参加したいものを選び、応募することができます。また、条件による絞り込み検索を行えます。
• イベントの通知
  • 応募したイベントの当日のリマインド、お気に入り投稿者のイベント期日の通知、主催者側にはイベントの応募状況を通知します。

ターゲット

明石高専内の以下のような方々を対象としています。

• 学生の手伝いが必要な教員
  • 若者の文化についていけない！
  • 学生の学習のためにこんなことをさせてあげたい！
  • → そんな学生の手が必要なときに
• やりたいけど人が足りない学生
  • 今までの全体メールやポスターで行っていたメンバー募集はもう必要ありません
• 勉強会の開催
  • 学校の課題や、学生による講演、テスト対策などにもご利用できます

類似アプリとの違い・強み

• コミュニティの限定
  • 他のマッチングアプリとは異なり、コミュニティを明石高専内に絞ることで、集まる人の身元がはっきりしており、イベントの投稿が気軽に行えます
• 教員と学生の交流
  • 教員からもイベントの投稿が可能なので、授業以外でも教員と学生の交流を増やすことができます
  • また、学科ごとの作業の手伝いを学生にしてもらうことで、学生の経験にもなります
• 学生の発掘
  • 普段は自分から活動しない学生でも、イベントを通して意外な能力を発揮し、隠れていた優秀な学生を発掘できます
• 活動の継続
  • 一人で活動するよりもだれかと一緒に活動することで、ピアプレッシャーやピアサポートの効果が得られ、活動が継続しやすくなります
  • 三日坊主になってしまったあの活動も是非投稿してみては？

技術的特徴

モダンなWebアプリケーションとして以下の技術を採用：

• Next.js App Router: 最新のNext.js機能を活用した高速なWebアプリ
• TypeScript: 型安全性を重視した開発環境
• Firebase: Firestoreによるリアルタイムデータベースと認証システム
• Tailwind CSS: 効率的なスタイリングとレスポンシブデザイン
• Server Actions: Next.js 14の新機能を活用したサーバーサイド処理

取り組み

プロジェクト設計とモダン開発環境構築

2024年9月6日にプロジェクトを開始し、まずNext.js 14のApp Routerを活用したモダンな開発環境を構築しました。TypeScriptによる型安全な開発を重視し、ESLintやPrettierによるコード品質管理、.editorconfigによる統一的な開発環境を整備しました。

データベース設計とFirebase活用

イベントデータやユーザー情報を効率的に管理するためにFirebase Firestoreを採用しました。特に以下の点に注力しました：

• イベントデータ構造の設計: タイトル、説明、開催日時、参加者情報など包括的なデータ管理
• 参加者管理システム: arrayUnion()を活用した効率的な参加者情報の更新
• リアルタイムデータ同期: Firestoreの特性を活かしたリアルタイムなデータ更新

認証システムとユーザー管理

GoogleアカウントによるOAuth認証を実装し、セキュアで使いやすい認証システムを構築しました。ユーザー情報はFirestoreに保存し、アイコンや名前などのプロフィール情報を効率的に管理できるようにしました。

Server ActionsとモダンなNext.js活用

Next.js 14の新機能であるServer Actionsを積極的に活用し、以下の機能を実装しました：

• イベント一覧取得: サーバーサイドでのデータフェッチ
• イベント申し込み・キャンセル処理: リアルタイムな参加状況の更新
• フォームバリデーション: Zodライブラリを活用した型安全なデータ検証

UI/UX設計とコンポーネント開発

ユーザビリティを重視したUI設計を行い、以下の要素を実装しました：

• イベントカードコンポーネント: 再利用可能なカード型UI
• 申し込み確認ポップアップ: ユーザーの操作ミスを防ぐ確認機能
• レスポンシブデザイン: モバイルファーストなアプローチ
• カラーパレット設計: アクセシビリティを考慮した配色

状態管理とフロントエンド最適化

React Hooksを活用した効率的な状態管理を実装し、useMemoによる不要な再計算の防止など、パフォーマンス最適化にも取り組みました。また、Next.jsのImageコンポーネントを使用した画像最適化も行いました。

チーム開発とプロジェクト管理

2人チームでの効率的な開発を実現するため、以下の取り組みを行いました：

• GitHub運用: Issue・Pull Requestベースの開発フロー
• コードレビュー: 品質維持のための相互レビュー体制
• ブランチ戦略: feature branchを活用した並行開発
• コミット管理: Conventional Commitsに基づいた分かりやすいコミットメッセージ

デプロイとCI/CD

Vercelを活用した継続的デプロイメントを構築し、mainブランチへのマージ時に自動的にプロダクション環境にデプロイされる仕組みを整備しました。これにより、開発からリリースまでのサイクルを高速化できました。