Procom開発・運用における「初心者が陥りやすいエラー・バグ」徹底解説

Procomは、「あなたのすべてを、ここに集約。」をコンセプトに、YouTuber・ダンサー・インフルエンサーなどの自己発信を支援するプロフィール集約プラットフォームです。多機能かつ自由度の高いこのサービスですが、開発・利用の過程で初心者が陥りやすい典型的なエラーやバグがいくつか存在します。

本記事では、Procomの開発初期から現在に至るまでに遭遇した“つまずきポイント”を厳選し、その原因と解決策をまとめました。

---

✅ 1. HTMLやJSXの閉じタグ漏れ

問題例：

return (
  <div>
    <h2>プロフィール編集
  </div>
);

症状：

• 「JSX expressions must have one parent element」エラー
• ビルドできない
• ブラウザ画面が真っ白になる

解決策：

• JSX構文は必ず閉じタグを書くこと。特に<div>や<h2>などのタグで忘れがち。
• <> ... </> のようなFragment構文も活用し、1つの親要素にまとめること。

---

✅ 2. dangerouslySetInnerHTMLと<br>の併用ミス

よくある例：

<div dangerouslySetInnerHTML={{ __html: bio.replace('\n', '<br>') }} />

症状：

• すべての改行が無視される
• <br>タグが文字列として表示されてしまう

正しい方法：

__html: escapeHtml(bio).replace(/\n/g, '<br>')

escapeHtml()でXSS対策しながら、改行を正しく<br>に置換する必要があります。

---

✅ 3. 写真が表示されない／保存されない

症状：

• 写真をアップロードしても表示されない
• ページを再読み込みすると消える

主な原因：

• base64 → Firebase Storage へのアップロード失敗
• Firestoreに photos が保存されていない
• 保存処理の直前にphotosを初期化している

解決法：

• saveProfile()関数の中でphotosが undefinedでないかチェック
• 保存処理をsetTimeoutやawaitで少し待機させて同期を確保
• data-cleared属性で削除マークを誤判定しないようにする

---

✅ 4. Google検索に出てこない（SEO対策ミス）

原因：

• generateMetadata()が機能していない
• titleやdescriptionがユーザーごとに反映されていない
• robots.txtやsitemap.xmlが存在しない

チェックポイント：

• next-sitemapを導入しているか？
• app/user/[uid]/page.tsx に generateMetadata() が実装されているか？
• Google Search Console にURL登録されているか？

---

✅ 5. useState と useEffect の依存配列トラブル

症状：

• undefined なデータを使ってしまう
• 初回のみデータが空のまま表示される

原因：

• useEffect(() => { fetchData() }, []) の中で uid や session の値が undefined

解決策：

useEffect(() => {
  if (!uid) return;
  fetchUserData(uid);
}, [uid]);

依存配列に必要な変数を明示的に指定し、nullチェックを忘れないこと。

---

✅ 6. Firebase Storage の 403 エラー

症状：

• 画像が表示されず、DevToolsで 403 Forbidden

原因：

• Firebase Storage URL に token= パラメータが含まれていない
• Storage セキュリティルールで制限されている

解決法：

• getDownloadURL() で取得したURLを使う
• Storage ルールを以下のように一時的に緩めて確認：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

（※公開サービスでは制限必須）

---

✅ 7. スマホでメニューが開かない（ハンバーガー問題）

症状：

• ハンバーガーアイコンは表示されるが、クリックしても開かない
• navメニューが非表示のまま

原因：

• JavaScriptで状態（isOpen）を制御しているが、クリックイベントが無効
• refで取得したDOMのclassList操作が失敗

対策：

• useRef()の初期化漏れを防ぐ
• CSSで .show クラスが display: block になるよう確認
• addEventListenerを使わずReactイベントで処理する

---

✅ 8. Promise<{ uid: string }>のまま使ってエラー

export async function generateMetadata({
  params,
}: {
  params: Promise<{ uid: string }>
})

これはNG。paramsは非同期で受け取らないので、型は params: { uid: string } に修正。

---

✅ 9. Firestore 保存時に「invalid nested entity」

症状：

• Firestoreにデータを保存しようとすると、以下のようなエラー：

Property profile contains an invalid nested entity

原因：

• undefined や 空の配列 [] が含まれている

解決策：

function cleanData(obj) {
  const cleaned = {};
  for (const key in obj) {
    const value = obj[key];
    if (
      value !== undefined &&
      value !== null &&
      !(Array.isArray(value) && value.length === 0) &&
      !(typeof value === 'string' && value.trim() === '')
    ) {
      cleaned[key] = value;
    }
  }
  return cleaned;
}

Firestoreへ送る前に空データを除去するのがポイント。

---

✅ 10. セッションが切れて保存できない

症状：

• 編集後に保存を押しても反応しない
• Firestoreに反映されない

原因：

• セッションが切れているがUIでは気づきにくい
• CookieがSecureでない／trust proxy設定ミス

対策：

• 保存ボタンの前に /api/session にfetchしてログイン状態確認
• session.loggedIn が falseならログイン誘導を表示
• サーバー側で req.session.save() を忘れない

---

📝 まとめ

初心者が陥りやすいバグは、ほんの些細な構文ミスや非同期のタイミングのズレから始まることが多いです。ですが、1つ1つ丁寧に見直すことで、必ず乗り越えることができます。

特に注意すべきベストプラクティス：

項目	注意点
JSX構文	タグの閉じ忘れに注意。Fragmentでラップする
画像保存	Firebase Storageの制限とトークンに注意
Firestore保存	空文字や空配列はNG。cleanData関数で整形
useEffect	依存配列を正しく設定
セッション管理	getIronSession()やcookieのsecureに注意

---

最後に

Procomは、技術的な挑戦と楽しさを同時に味わえるプロジェクトです。バグに出会うことは、成長のチャンスでもあります。この記事が、あなたの開発やプロフィール管理の参考になれば幸いです。

「うまくいかない」と感じたら、まず冷静に「console.log」で状況を観察することから始めてみましょう！