チーム開発記録2：ポータルサイト初期バージョンのリリース
概要
オンラインサロン「シンギュラリティ・ラボ（通称シンラボ）」のポータルサイト開発チームは、初期フェーズである資料一覧機能と認証機能の完成を目指し、活発な開発活動を進めています。本記事は「チーム開発記録1」に続く、最新の活動状況と技術的な進展を記録したものです。
このプロジェクトの最大の魅力は、最先端の技術スタック（Next.js、TypeScript、Supabaseなど）に触れながら、実践的なチームでの開発経験を積むことができる点にあります。開発者のスキルレベルは様々ですが、学びの機会を重視し、技術的な背景に関わらず全員が楽しく開発に参加できる環境が構築されています
今回の開発期間では、ポータルサイトの初期開発（資料一覧ページの作成と認証機能）の完了と、今後の開発体制の強化に焦点を当てました。
主要なタスクは、フロントエンドにおけるモバイル対応やデザイン調整、バックエンドにおける認証機能とデータベース連携です。特に、資料一覧ページの実装はほぼ完了し、データベースからデータを取得し表示する機能が整いました。また、次期開発として、動画閲覧機能の追加を主要目標とし、設計を開始しました。
開発したもの
初期フェーズで着手した主要機能について、以下の通り、最終的な修正と実装を完了させました。
資料一覧ページの最終調整
資料一覧の表示において、ユーザー体験を向上させるための調整を行いました。
- モバイル対応の完了：トップページのモバイル画面での表示に対応しました。具体的には、モバイル画面時には「ポータルサイトへようこそ」などの文字サイズを縮小し、不要な改行定義を外すことでレイアウトの崩れを防ぎました。
- カードサイズ可変化：以前、デザイン統一のために固定されていたカードの高さを可変化しました。これにより、資料のディスクリプション（説明文）やラベル表示がテキストと重なってしまう現象（被り）を解消し、視認性を高めました。
- サイドバー機能の調整：サイドバーにロゴを追加し、トップページへのリンク機能を持たせました。また、認証機能との兼ね合いから、ログインページではサイドバーが表示されないよう、レイアウト構造を調整しました。
バックエンドと認証機能の統合
認証サービスClerkとデータベースSupabaseの連携を確実に行いました。
- ClerkとSupabaseのユーザー同期：Clerkで認証されたアカウント情報を、Supabase側のユーザーテーブルに登録する機能を実装しました。この同期は、ClerkのWebhook機能を活用し、新規ユーザーが登録された際に、バックエンド側（サーバーレス関数）で処理を完結させる方法を採用しました。これにより、Clerk上の情報だけでなく、資料閲覧権限の管理に必要なユーザー情報をSupabase上でも保持できるようになりました。
- ローレベルセキュリティ（RLS）の適用：SupabaseのRLSを設定し、データへのアクセス制限を強化しました。
- 初期段階として、
SELECT（資料閲覧）については、ログインしている全てのユーザーに許可する設定を行いました。 - さらに、管理者（アドミンロール）のみが資料の
INSERT（追加）、UPDATE（更新）、DELETE（削除）を実行できるようにするためのポリシー設定を計画・実施しました。このRLSの設定には、ログイン中のClerk IDをSupabaseのセッション変数にセットし、そのIDがSupabaseのユーザーテーブルに存在するかをチェックする複雑な処理が必要となりました。
- 初期段階として、
- 本番環境の構築：Vercel、Clerk、Supabaseの本番用環境を構築し、初期データ（CSVファイル）のインポートを完了させました。メインブランチへのマージ時に自動的にデプロイが行われる仕組み（Vercelの自動デプロイ機能）を活用しています。
会議の様子
定例ミーティングは、技術的な解説とプロジェクトの進捗確認の二部構成で進められ、活発な議論の場となりました。
コーディング規約とリファクタリング
コードの品質と保守性を高めるため、コーディング規約（コーディング規約ファイル）の整備が議論されました。
- パスの統一：インポート文におけるパスの記述方法として、相対パス（
./など）ではなく、構造変更に強い絶対パスに統一する方針が確認されました。 - 関数記述形式の統一：JavaScript/TypeScriptにおける関数コンポーネントの記述形式についても議論され、基本的なコンポーネントは
function関数を使用する方針とし、onClickなどのイベントハンドラー内で使用する関数はアロー関数で記述するなど、用途に応じた使い分けを行うことで合意しました。 - 改善点の管理：ミーティング中に見つかったコード上の軽微な修正点やリファクタリングが必要な箇所は、その場ですぐに対応を割り振るか、GitHub Issuesとしてストックし、忘れずに管理する体制をとりました。
開発フローの改善
チームでの開発をよりスムーズに進めるための運用面の調整が行われました。
- レビューとマージの迅速化：プルリクエスト（PR）は定例ミーティングを待たずにレビュー・マージを進めることで、開発速度を向上させる方針を確認しました。
- 通知設定の強化：PR作成時、マージ時だけでなく、レビューコメントが付いた際にもSlackに通知が飛ぶよう設定を強化しました。これにより、メンバー間のコミュニケーションを円滑化し、対応の遅延を防ぐことを目指しました。
- タスク管理の徹底：GitHubのIssuesとProjectを連携させ、タスクがプロジェクトのどのフェーズにあるかを明確に管理することで、開発状況の可視性を高めました。
次期開発機能の検討
Phase 1の完了を見据え、4月以降の次期開発テーマについて、チーム内で広範なブレインストーミングを行いました。
【検討された機能】
- ユーザー管理機能：ログイン後に管理者による承認を経て初めてアクセスできるようにする機能（承認機能）や、ユーザー権限（メンバー/アドミン）を切り替える画面。
- 資料・コンテンツ追加機能：管理者がブラウザ上の画面から資料を登録・編集・削除できるマスター管理機能。
- お気に入り/ピン機能：ユーザー単位で資料をお気に入り登録したり、全体へのピン留めを設定したりする機能。
- 動画閲覧機能：動画の一覧表示と詳細画面の作成。
- テストの自動化：開発品質を担保するためのテスト導入。
これらの検討を踏まえ、「動画閲覧機能」（一覧と詳細ページ）をPhase 2の主要な開発目標とすることが決定されました。動画閲覧機能は資料一覧とほぼ同じ構造で実装可能な部分が多く、次のステップとして難易度と学習効果のバランスが良いと判断されたためです。
活用した技術
初期フェーズの最終段階で特に重要となった、開発基盤とセキュリティ技術の活用について解説します。
1. バックエンド技術（Supabase）の応用
Supabaseの機能は、単なるデータベースとしてだけでなく、セキュリティ制御の核として活用されました。
- RLSによるアクセス制御：RLS（Row-Level Security / 行単位のセキュリティ）を活用し、資料へのアクセス権限をユーザー認証状態に基づいて細かく設定しました。
- サーバーサイドでのデータベースアクセス：セキュリティを考慮し、データベースへのアクセス処理は、クライアントサイドではなく、基本的にNext.jsのサーバーサイドで完結させる方針を徹底しています。特に、Supabaseの機能（
supabase.rpc）を用いてセッション変数に認証情報をセットする処理は、サーバーコンポーネント（Next.jsのサーバー側）で実行されています。 - SQLの管理：今後RLS設定やカスタム関数が増えることを見越し、Supabaseのファンクション（関数）やポリシー設定に使用するSQL文をGitHubリポジトリ内にファイルとして保存し、コードと合わせて管理する計画が立てられました。
2. デプロイと品質管理
- Vercelによる継続的デプロイメント（CD）：Vercelを活用することで、特定のブランチ（
main）にコードがマージされると自動的にビルドとデプロイが実行され、即座に検証用URLに反映される体制を確立しています。 - テスト環境の検討：テストの自動化は次期テーマとして重要視されており、ビルドが正常に行われるかを確認するテスト（
npm run build）の自動化をGitHub Actionsで実施することが優先度の高いタスクとなりました。より複雑なテスト（単体テスト、画面機能テスト）については、JestやReact Testing Libraryといったツールの導入が検討されています。
総括
今回の開発サイクルを通じて、ポータルサイトの技術的な基盤とセキュリティ体制が大きく強化されました。特に、モダンな認証システムClerkとデータベースSupabaseの連携、そしてRLSの複雑な設定は、参加メンバーにとって高度な学習機会となりました。
第1段階のリリースに向けて、本番環境の準備も完了し、バージョンタグ（V1.0.0）を付与してリリースノートを管理する運用も開始しています（リリースノートはこちら。
次のフェーズでは、動画閲覧機能の設計・実装に加え、テストの自動化を段階的に導入し、開発サイクルの品質向上も図ってまいります。
シンラボのチーム開発は、AIの活用や最先端技術の実践を通して、参加者一人ひとりのスキル向上を支援する場であり続けます。手を動かしながら連携して学ぶ楽しさを共有しつつ、引き続き開発を進めてまいります。
チーム開発に興味のある方、スキルアップを図りたい方はぜひシンラボにお越しください。
シンギュラリティ・ラボのHPはこちら
プログラミングイベントのご案内
毎月数回、GASを中心としたプログラミングを学べるオンライン講座を開催しております。直接学びたい方はぜひご参加ください。
申し込みフォームはこちら
過去のプログラミングイベントの紹介はこちら
GASアプリ開発サービスのお知らせ
シンギュラリティ・ラボでは、GASを中心としたWebアプリ開発のご相談を受け付けております。
普段の作業のちょっとした自動化から自分やチーム専用のカスタムアプリまで、ぜひお気軽にお問い合わせください。
詳細はこちら
シンギュラリティ・ラボのご案内
オンラインサロン「シンギュラリティ・ラボ」（通称シンラボ）では、さまざまなITスキルを学び、チーム開発に取り組む仲間を募集しております。 初心者から経験者まで、どなたでも参加可能です。
少しでも興味がございましたらお気軽にお越しください。
シンギュラリティ・ラボのHPはこちら
お問い合わせ先 sinlab-recruit@future-tech-association.org
Discussion