前回のプロジェクトではVanilla JSを用いてマッチングWebアプリを開発しましたが、UI・UXの面で限界があり、より高いレベルのユーザー体験を提供する必要性を感じました。 そこで、新たに学習したReactを適用し、より直感的で反応性の高いインターフェースを実現することを目標に本プロジェクトを企画しました。 また、Reactを用いることでVanilla JSよりもWebアプリをネイティブアプリに近い形で実装できるかという技術的挑戦も並行して行いました。

モバイル環境を優先的に考慮し、様々なデバイス幅を分析した上で、最大幅を480pxに設定し、全体にメディアクエリを適用しました。さらに、rem単位を活用して画面サイズに応じた柔軟な対応を可能にしました。 標準のHTMLフォーム要素(select、input、radio、textareaなど)はブラウザやOSによってスタイルが異なるため、プロジェクトテーマに合わせたカスタムスタイルを適用し、再利用可能なコンポーネントとして作成しました。 チャット機能では、Firebaseのリアルタイム購読を利用してメッセージの変化を即時反映させつつ、ChatProviderに購読解除ロジックを組み込み、ページ遷移時の重複購読を防止しました。チャットルームでは初期表示を20件のメッセージに制限し、スクロール時に20件ずつ追加読み込みすることでパフォーマンス負荷を軽減しました。また、react-intersection-observerライブラリを活用してスクロール最上部の検知を行い、自然な無限スクロールを実装しました。さらに、メッセージ追加時にはrequestAnimationFrameを用いて、モバイル環境でもスムーズにスクロール位置を維持できるよう最適化しました。 App.jsxでは、Firebase AuthとFirestoreの新規ユーザーデータ登録状況を同期するロジックを実装しました。ログイン時にonAuthStateChangedで認証状態を確認し、Firestoreに該当UIDのデータが存在しない場合は即座に新規ユーザーデータを生成します。これにより、認証のみが完了しDBに情報が存在しない状態を防ぎ、安定した初期アクセス体験を提供しました。

Reactでの実装により、画面遷移速度とUIの反応性が大幅に向上し、コンポーネント再利用によって開発効率も高まりました。これにより、モバイル中心のWebアプリにおいてネイティブアプリに近いユーザー体験を実現するという当初の目標を達成し、一般的なWebサービス開発においてもReactの効率性と一貫したユーザー体験提供能力を実感しました。 また、Firebaseの非同期データ処理を扱う中で、データ準備状態に応じたレンダリング制御、ローディングコンポーネントの適用、エラー防止処理などの技術を習得しました。さらに、データロジックをContextとuseReducerベースで管理し、StateとDispatchを分離して供給する構造を採用しました。これにより、機能ごとに4つのContextを細分化し、必要なページにのみ効率的に状態を提供できるようになりました。 2025年7月から8月にかけてコード構造の改善とデザインリニューアルを実施し、初期開発後の保守やリファクタリングの重要性を改めて認識しました。その結果、コードの可読性、パフォーマンス、UIの一貫性を向上させることができました。