こんにちは。今日は一日かけて、Procom（プロコム）の開発を集中的に進めました。特に「ユーザーページ表示の安定化」と「お気に入りユーザー機能の実装」について、大きな進展がありました。
今回はその記録を、技術的な背景や悩んだポイントを含めて、開発ログ風ブログ記事としてまとめておこうと思います。今後の振り返りや、同じようにSNSサービスを開発している方の参考になれば幸いです。
Contents
🔧 今日の主な作業内容
- お気に入りユーザー機能のデータ取得修正
- ユーザーページにおける表示の不具合修正
- ユーザー検索と重複コードの統合
- Next.jsにおける型エラー（TypeScript）の調整
- UI上の微調整（アカウント設定ボタン、ハンバーガーメニューなど）
1. お気に入り機能の修正：Firestore構造との整合性
お気に入り機能は、以前にユーザーが他のユーザーを「お気に入り」登録できるようにしたもので、Firestoreの users/{uid}/favorites/{favUid} サブコレクションに保存する構成です。
ただし問題は、表示側でそのデータが正しく取得・反映されていなかった点です。
🧱 原因と対応
初期の取得処理は、トップレベルの users/{uid} ドキュメントの中に favorites: [uid1, uid2, ...] という配列を想定していたコードのままだったため、サブコレクションからの読み取りには対応していなかったことが判明。
そこで以下のように、サブコレクション favorites を取得してから、それぞれのユーザー情報を users/{favUid} から改めて取得し、プロフィール情報を整えて返すようにAPI（/api/favorites）を改修しました。
tsコピーする編集するconst favoritesRef = db.collection('users').doc(uid).collection('favorites');
const snapshot = await favoritesRef.get();
for (const doc of snapshot.docs) {
const targetUid = doc.id;
const userSnap = await db.collection('users').doc(targetUid).get();
...
}
無事に photoUrl, name, title を含めた表示ができるようになり、ユーザー一覧にも反映されるようになりました。
2. ユーザーページの表示不具合と調査ログ
今日は「お気に入り一覧からユーザーページに飛んでも写真とプロフィールが表示されない」という重大なバグも発見しました。
🕵️♀️ 原因の調査
UserPageClient.tsx コンポーネントにおいて、fetch(/api/user/${uid}) で取得したプロフィールをローカルストレージに一度保存する構成になっていたものの、ロジック上で「ログインユーザーと一致しない場合」の処理が正しく反映されていませんでした。
また、プロフィールや画像のスライド処理は PhotoSliderBlock に依存していたため、初期化処理が非同期でズレる可能性がありました。
🔥 ログ出力の活用
以下のログを追加して、状況を丁寧に追跡しました：
tsコピーする編集するconsole.log('🔥 profile =', profile);
console.log('🔥 photos =', profile.photos);
この結果、profile は取得できており、photos も存在していることが確認できました。つまり データは取得できているが、描画に渡す前に状態が更新されていないか、UI側で何らかの非表示条件に該当していたということがわかりました。
解決として、useEffect の依存配列や setPhotos のタイミングを調整し、setCurrent(0) のタイミングも含めて安定化しました。
3. コード重複の統合：UserSearchClient.tsx と /users/page.tsx
Procomでは、ユーザー検索ページ /users に関するコードが UserSearchClient.tsx と app/users/page.tsx の2箇所に重複していました。
2つとも fetch('/api/users') → フィルタリング → マッピング表示 という流れであり、UI部分も95%以上が同じでした。
✅ 解決策
- 検索・フィルタリング・表示処理を
UserSearchClient.tsxに統一。 app/users/page.tsxでは<Header />,<Footer />を追加するラッパーに徹する形にして分離。
こうすることで今後のメンテナンス性が向上し、検索UIを一箇所で調整すれば全体に反映される構成になりました。
4. TypeScriptの型エラー対応
今日は以下のような型エラーが多く表示されました：
Property 'instgrm' does not exist on type 'Window'Import declaration conflicts with local declarationCannot find module '@/types'Type 'void' is not assignable to type 'ReactNode'
🛠 対応内容：
window.instgrmやwindow.twttrは(window as any).instgrmに修正。- 型の重複定義
type Photo = {...}は@/typesに一元化。 console.log(...)をJSX内に書いていた箇所はuseEffect外に出すことでエラー回避。
特に console.log(...) を <div>{console.log(...)} </div> のように書いてしまうと void を描画しようとしてしまい、Reactが怒るので注意です。
5. UI調整：アカウント設定リンクの色・ログイン表示
ログイン後に表示される「⚙ アカウント設定」のリンクが背景と同化して見えづらい問題があったため、style={{ color: '#fff' }} を付加して視認性を改善。
また、スマホ向けにハンバーガーメニュー内の表示が崩れていたため、CSSのz-indexやdisplay: flex周りを調整しました。
💬 今日の感想と今後の課題
正直、今日だけでも10回以上は「原因不明の不具合」に直面しましたが、デバッグログとコンソール出力を活用することで少しずつ状況を切り分け、特定・修正することができました。
特に以下の気づきが大きかったです：
- 「データがない」のではなく「描画されていない」ケースも多い
- Firestore構造を変えたら、API側・表示側両方の見直しが必要
- すべてを一度に直そうとせず、段階的に原因を切り分けることが重要
🗓 明日のタスク予定
- お気に入り解除機能の実装
- QRコード出力時の表示名調整（セッション取得強化）
- ユーザーページの上部に「○○さんのページ」と正しく表示
- Next.jsにおけるログイン状態の保持の安定化（Cookie確認）
- 検索時の並び順改善（最近追加された順やランダム表示など）
✍️ おわりに
Procomは、単なる「SNSリンクまとめ」ではなく、パフォーマーやYouTuberが自分の活動を集約して発信できる場所になることを目指しています。
地味なバグ修正や、見えないところの改善も多いですが、確実に一歩ずつ前進しています。
引き続き、楽しく・丁寧に、Procomを育てていきます。
読んでいただき、ありがとうございました！
