VCM
オーナー、居住者、財務、予約、リクエスト、レポートなど、住宅コミュニティに必要なすべてを単一のインターフェースに集約するロールベースのWebアプリケーション。
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
概要
VCMは、同一のコードベースから全く異なる2つのユーザー層に対応する物件・コミュニティ管理プラットフォームのフロントエンドです。管理者は物件、居住者、財務、インシデント、レポート、連絡通知などの業務運用に使用します。オーナーおよび居住者は、支払い、サービスリクエスト、共有設備予約、書類確認、コミュニティ情報の閲覧など、自身の用件を処理するために使用します。この製品は、散在する手作業のワークフローを一貫した1つの場所に集約します。
課題
住宅コミュニティの運営には、居住者やオーナーの記録、保守・サービスリクエスト、設備予約、苦情対応、支払い履歴、明細書、点検・事故報告書、お知らせなど、多くの要素を同時に管理することが求められます。これらがスプレッドシートやメールのやり取り、バラバラのツールに分散していると、対応の抜け漏れが発生します。課題は、ワークフローが増加しても高速性、整合性、保守性を維持しながら、運営チームと彼らが世話をする居住者の双方に役立つ1つのインターフェースを構築し、2つの全く異なる体験を提供することでした。
役割とアプローチ
私はフロントエンド開発を主導し、アプリケーションアーキテクチャ、共有データ層、再利用可能なUIパターン、全体を支えるロールベース構造を構築しました。コードベースの筆頭コントリビューターとして、その後の開発基準となる設計規約を策定しました。私が最優先したのは、この種のアプリケーションで陥りがちな「エンティティを追加するたびに同じテーブル、フィルター、フォームロジックを再構築する」という罠を避けることでした。代わりに、少数の強固なプリミティブと権限対応シェルを構築することで、新規ワークフローの追加を再発明ではなく構成で実現できるようにしました。
技術スタック
主な機能
ギャラリー
課題と解決策
最大の課題は、カバーすべき機能領域の広さでした。2つのユーザーロールにわたり、数十種類に及ぶエンティティそれぞれに一覧、絞り込み、作成、編集、エクスポートが必要でした。機能ごとに毎回コードを書き直していては保守不可能なアプリになってしまいます。私は再利用可能なプリミティブと、設定可能な権限連動型ナビゲーションモデルを採用することでこれを解決しました。これにより、メニューのハードコードや重複ロジックを排除し、バックエンドから付与された権限に応じて柔軟に適応するインターフェースを実現しました。
もう一つの継続的な課題は、実際の利用環境に耐えうるステート管理でした。一覧のページネーションとフィルタリングをURLのクエリ文字列で制御することで、ビューを共有可能にし、ブラウザの「進む・戻る」操作を自然に機能させ、再読み込み時にもテーブルの状態が維持されるようにしました。また、機能コンポーネントを軽量に保つため認証を共有ステートとリクエスト層に集約し、さらにエラーバウンダリ、ローディングステート、セッション失効時の適切なリダイレクトを組み込むことで、情報密度の高いダッシュボードがエラーを隠したまま機能停止しないように設計しました。
成果
VCMは、コミュニティ管理の双方のニーズに真に応える単一のフロントエンドです。運用チームは一つの管理者ワークスペースから物件のライフサイクル全体を管理し、居住者は支払い、リクエスト、予約、書類の確認などをセルフサービスで完結できます。共有プリミティブと権限認識シェルに基づいて構築されているため、ワークフローが新たに追加されてもコードベースが肥大化・複雑化することなく、安定してスケールし続けます。