React × Firebase】感情共有SNS「MoodBoard 2.0」を作ってみた！

初めに

こんにちは！24卒の駆け出しエンジニアです。大手ECサイトの保守・運用をメインに行う会社で、社内SEとして働いています。最近はブリッジSEとして中規模ECサイトの案件を中国側とやり取りする業務も担当しています。そんな私が、仕事の合間や帰宅後の時間を使って作った「MoodBoard 2.0」というサービスを紹介します！

MoodBoard 2.0とは？

MoodBoard 2.0は、感情を共有するSNSです。ユーザーは自分の気分や感情を選択し、短い投稿と共に共有することができます。他のユーザーの投稿に「いいね」をしたり、コメントを残したりすることもできます。
サービスURL: https://moodboard-2.web.app/

なぜ作ったの？

「身内で使える掲示板みたいなの作ってみたいなー」という軽いノリから始まりました（笑）
映画「インサイド・ヘッド」を見て感動し、感情を可視化することの面白さに惹かれたからです。
React、Firebase、その他モダンな技術を実践的に学びたかったからです。

技術スタック

フロントエンド: React、React Router、styled-components
バックエンド: Firebase (Firestore, Authentication)
状態管理: React Query
デプロイ: Firebase Hosting

主な機能と仕様

ユーザー認証（サインアップ、ログイン、ログアウト）
感情付きの投稿作成
タイムライン表示（無限スクロール）
いいね機能
コメント機能
ユーザープロフィール
投稿の編集・削除
通知機能
フレンド機能

データフロー

ユーザーが投稿を作成すると、Firestoreに保存されます。
タイムラインはFirestoreから取得した投稿データをReact Queryを使って管理します。
いいねやコメントの操作も、Firestoreのデータを更新し、React Queryで即時反映します。
認証情報はFirebase Authenticationで管理し、Reactコンポーネントで利用します。

つまずいたポイントと解決策

無限スクロールの実装

無限スクロールの実装では、以下の点で苦労しました：

・スクロール位置の検出
・新しいデータの取得とレンダリング
・パフォーマンスの最適化

解決策として、Intersection Observer APIとreact-queryのuseInfiniteQueryを組み合わせて使用しました。これにより、効率的なデータ取得と滑らかなスクロール体験を実現できました。

 javascriptCopyconst {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage
} = useInfiniteQuery(['posts'], fetchPosts, {
  getNextPageParam: (lastPage) => lastPage?.lastVisible || undefined,
});

useEffect(() => {
  const observer = new IntersectionObserver(
    entries => {
      if (entries[0].isIntersecting && hasNextPage) {
        fetchNextPage();
      }
    },
    { threshold: 1 }
  );

  if (observerTarget.current) {
    observer.observe(observerTarget.current);
  }

  return () => {
    if (observerTarget.current) {
      observer.unobserve(observerTarget.current);
    }
  };
}, [fetchNextPage, hasNextPage]);

これからの展望

まだまだ修正が必要な箇所は多いですが、以下の点を中心に改善していく予定です：

UI/UXの改善（レスポンシブデザインの強化、アニメーションの追加）
パフォーマンスの最適化（メモ化、仮想化の導入）
テストの追加（単体テスト、統合テスト）
新機能の追加（ハッシュタグ、検索機能の強化）

さいごに

「MoodBoard 2.0」の開発を通じて、モダンなWeb開発の技術やプラクティスを学ぶことができました。同時に、感情を共有することの面白さや難しさも実感しています。
これからも「楽しみながら学ぶ」をモットーに、新しいチャレンジを続けていきたいと思います。みなさんも、ぜひMoodBoard 2.0を使って、今の気分を共有してみてください！きっと、予想外の感情の繋がりが見つかるはずです。