チーム開発記録1：コミュニティのポータルサイトを作る
概要
オンラインサロン「シンギュラリティ・ラボ（通称シンラボ）」では、エンジニアが中心となって、コミュニティのポータルサイトをチーム開発しています。このサイトは、メンバーが効率的にシンラボ内の情報にアクセスしたり、メンバー間で交流するための情報基盤となります。
今回、このチーム開発を記録として残すため、記事を書くことにしました（実は開発からすでに半年以上経過しているのですが、開発体制が整うまで時間がかかり、今に至ります）。
本開発では、チームの定例ミーティングと、メンバー間で相談しつつ、個々人で担当を決めて機能を制作する形で進行しています。このプロジェクトの最大の魅力は、最先端の技術スタック（React、Next.js、TypeScriptなど）に触れながら、実践的なチームでの開発経験を積むことができる点です（チーム開発方針については、こちらをご参考ください）。
ミーティングでは、具体的な実装や設計に関する活発な意見交換が行われていました。参加メンバーのスキルはまばらで、Web開発はほとんど未経験の人もいましたが、学びの機会を重視した雰囲気で進められており、技術的な背景に関わらず、全員が楽しく開発に参加しています。
今後、開発当初の様子から、順次チーム開発活動を紹介していきます（一緒に開発に取り組みたい方募集中）。
解説する技術スタックの解説画面
開発したもの
ポータルサイトの初期開発では、資料一覧ページの作成と認証機能に着手しました。
具体的には、以下の主要機能と画面の実装を進めました。
- 資料一覧とカード表示
- Googleドライブ等に管理されているコミュニティ資料をデータベースから取得し、一覧として表示する機能
- 資料一覧ページでは、各資料はカード表示し、カードクリックにより資料にリンクできる
bolt.newで生成した資料一覧の画面
-
認証機能
- Clerkを使ったGoogle認証を基本とし、安全にアクセスできるようにログイン画面を実装
- 開発のスピードを優先し、会員専用認証機能（承認機能や招待機能）は後から追加する方針とした
-
基盤コンポーネント
- 再利用性を高めるため、サイドメニューといった共通要素をコンポーネントとして分離
将来的には、動画閲覧ページやメンバープロフィールページ、資料に対するコメントや評価機能 といった、ユーザー間の交流を促進する機能の追加も検討しています。
会議の様子
定例ミーティングは主にZOOMで行われております。
技術的な解説とプロジェクトの進捗確認の二部構成で進めており、参加者全員が利用された技術や開発状況を理解しやすい流れとなっています。
活発な意見交換と設計方針の確立
会議では、単にタスクの進捗を確認するだけでなく、実装の方針やコーディングスタンダードについて深く議論が行われます。
当初、特に重要な議論となったのは、開発フローとコードレビューの進め方についてです。レイアウトやデザインなどの軽微な修正を行う際であっても、勝手に修正を進めるのではなく、事前にSlackなどで方針を共有し、少なくとも1人以上の同意（スタンプでの反応を含む）を得てから実装に入るべきという共通認識が確立されました。これにより、予期せぬコンフリクトや手戻りを防ぎ、レビューアの負担を軽減することを目指しています。
また、Git運用に関しても、ブランチ名は常にfeature/から始めるなど、基本的なルールを整えました。プルリクエストのタイトルやコミットメッセージも日本語で統一する方針が採られました。
技術的な議論の場では、専門知識の有無にかかわらず、いろんな質問が飛び交いました。
例えば、Reactの基本的な概念であるコンポーネント思考について丁寧に解説されました。また、参加者から出た「画面遷移の実装方法」や「supabaseデータベースのアクセス権限（RLS）」といった具体的な質問に対しても、担当者が丁寧に回答し、知識を共有しました。
エラー対処法やログの見方など、実開発で直面する課題についても議論し、経験豊富なメンバーがその知見を共有することで、開発スキル向上をサポートする環境が構築されています。
活用した技術
本開発で活用している主要な技術と、その適用において重要視している概念を紹介します。
フロントエンド技術（Next.js, TypeScript）
- Next.jsのアーキテクチャ
Next.jsでは、ディレクトリ構成がそのままURLのパス（ページ構成）となるため、直感的に画面を設計できます。
また、パフォーマンス向上のため、「サーバーコンポーネント」と「クライアントコンポーネント」の使い分けが重要視されています。画面描画がサーバー側で完結するサーバーコンポーネントを優先し、ブラウザ上で動的な処理（イベント処理やState管理）が必要な最小限の部品のみをクライアントコンポーネント（'use client'宣言が必要）として分離する方針です。 - TypeScript
静的型付け言語であるTypeScriptを採用することで、大規模開発におけるコードの品質と保守性を高めています。インターフェース（interface）を用いてデータ構造の型を定義し、予期せぬエラーの発生を防ぎます。
UI/デザイン基盤（Mantine, ESLint, Prettier）
- コンポーネントライブラリの採用
開発途中で、UIコンポーネントライブラリとしてMantineの導入を決定しました。これは、Mantineが提供するボタンやメニューなどの基本的な部品が豊富であり、公式ドキュメントが非常に丁寧で使いやすいためです。 - コード品質の統一
ESLintとPrettierを導入し、コードの構文チェックや自動整形を徹底しています。これにより、メンバー間のコーディングスタイルを統一し、レビューコストを削減しています。 - アイコンライブラリ
アイコンの表示にはLucide Reactを採用し、使用するライブラリを一つに統一することで、ファイルサイズの肥大化を防ぎ、管理を容易にしています。
3. バックエンド技術（Supabase）
- Supabaseの活用
データベースとして、PostgreSQLをベースとしたSupabaseを利用しています。資料一覧機能のために、ユーザーテーブル、カテゴリーマスター、資料マスターのテーブル設計を進めています。 - ローレベルセキュリティ（RLS）
Supabaseが持つRLS機能（Row-Level Security / 行単位のセキュリティ）を活用する予定です。これにより、データベースの行（データ）ごとにアクセス権限を設定でき、資料の閲覧は全員に許可するが、資料の追加・編集・削除は管理者のみに限定する、といった細かいセキュリティ制御をユーザー単位で実現できます。
なお、データベースへのアクセスは、セキュリティを考慮し、基本的にサーバーサイドで処理を行います。
supabaseによるRLS管理画面
総括
チーム開発は、資料一覧の設計と画面実装というフェーズから開始しました。技術的な基盤（Next.jsのサーバー/クライアントコンポーネントの使い分け、Mantineの導入、SuperbaseのRLS設定など）を開発メンバーで共有しつつ、モダンなアプリケーション開発を目指しています。
次のフェーズでは、データベース接続の実装により、より具体的なデータ連携に取り組む予定です。手を動かしながら連携して学ぶ楽しさを共有しつつ、引き続き開発を進めてまいります。
このプロジェクトは、AIを活用した開発手法を確立し、エンジニアコミュニティに貢献するとともに、参加者一人ひとりのスキル向上を支援する実践的な学習の場を提供します。
プログラミングイベントのご案内
毎月数回、GASを中心としたプログラミングを学べるオンライン講座を開催しております。直接学びたい方はぜひご参加ください。
申し込みフォームはこちら
過去のプログラミングイベントの紹介はこちら
シンギュラリティ・ラボのご案内
オンラインサロン「シンギュラリティ・ラボ」（通称シンラボ）では、さまざまなITスキルを学び、チーム開発に取り組む仲間を募集しております。 初心者から経験者まで、どなたでも参加可能です。
少しでも興味がございましたらお気軽にお越しください。
シンギュラリティ・ラボのHPはこちら
お問い合わせ先 sinlab-recruit@future-tech-association.org
Discussion