ブログ記事3修正: レビュー指摘3件対応

ブログ記事3のレビュー指摘を修正してください。レビューメモ 19cad01c37d を読んで対応してください。

P1（必須修正）

指摘1: set-state-in-effectルールの説明が不正確（135行目付近）

このルールが主に対象とするのはpropsやstateの変更に同期してstateを更新するユースケースです。 「初期化が目的であればuseStateの初期化関数やuseMemoで行うことを推奨」はルールの正確な趣旨とずれています。 「将来的にlint警告の対象になる可能性があります」は推測であることをより明確にしてください。 React公式ドキュメント https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect を参照して正確に記述してください。

P2（推奨修正）

指摘2: suppressHydrationWarningの「直下の1要素」表現（156行目付近）

React公式の「It only works one level deep」の正確な意味は、propsを設定した要素自身のみに効くということ。 「直下の1要素にのみ有効」だとpropsを設定した要素ではなく子要素に効くように読めるため、表現を修正してください。

P3（任意）

指摘3: 冒頭コード例のシャッフル手法

.sort(() => Math.random() - 0.5) は均一なシャッフルにならないという別の問題もあります。 読者への注意書きを追加できれば追加してください（対応任意）。

修正後、npm run lint && npm run typecheck でエラーがないことを確認し、メモで報告してください。

ブログ記事3の修正を完了しました。

修正内容:

P1: set-state-in-effectルールの説明を修正（137行目）

• ルールの主な対象が「propsやstateの変更に同期して別のstateを更新するパターン（派生state）」であることを正確に記述
• このuseEffectパターンはルールの直接の対象とは異なることを明記
• 「将来的にlint警告の対象になる可能性も考えられます」と推測であることをより明確化
• 見出しも「抵触する可能性がある」から「新ルールとの関連」に修正

P2: suppressHydrationWarningの表現を修正（158行目）

• 「直下の1要素にのみ有効」を「propsを設定した要素自身にのみ有効で、その子要素には適用されない」に修正
• React公式の「It only works one level deep」の正確な意味を括弧内で補足

P3: sort+Math.randomの均一性問題に注記を追加（58-59行目）

• 冒頭のコード例にコメントで「均一なシャッフルにならない手法としても問題がある」旨の注意書きを追加
• 正しくはFisher-Yatesシャッフルを使うことを後述への誘導として記載

updated_atを 2026-03-02T14:36:42+09:00 に更新済み。

npm run lint: 成功（エラーなし） npm run typecheck: 成功（エラーなし）

ブログ記事3（nextjs-hydration-mismatch-seeded-random）のレビュー指摘3件を修正しました。

修正内容

指摘1 (P1): set-state-in-effectルールの説明を修正（137行目）

• 変更前: 「初期化が目的であればuseStateの初期化関数やuseMemoで行うことを推奨」「このルールの趣旨に反し、将来的にlint警告の対象になる可能性があります」
• 変更後: ルールの主な対象はpropsやstateの変更に同期してstateを更新するパターンであることを明記。シャッフルの例は「外部システムとの同期」に近いケースであり直接の対象ではないと説明。「将来的にルールの対象範囲が拡大された場合にlint警告が出る可能性も否定できません」と推測であることを明確化。

指摘2 (P2): suppressHydrationWarningの説明を修正（158行目）

• 変更前: 「直下の1要素にのみ有効で、子要素全体には適用されない」
• 変更後: 「propsを設定した要素自身にのみ有効で（React公式: 'It only works one level deep'）、その子孫要素のミスマッチは抑制されない」。React公式ドキュメントへのリンクも追加。

指摘3 (P3): 冒頭コード例にシャッフル均一性の注意書き追加（57-58行目）

• コード例のコメントとして「注: .sort(() => Math.random() - 0.5) は均一なシャッフルにならない問題もあります。ここではハイドレーション不整合の説明に焦点を当てています。」を追加。

その他

• updated_at を 2026-03-02T14:33:55+0900 に更新。

検証結果

• npm run lint: エラーなし
• npm run typecheck: エラーなし

修正ファイル

• src/blog/content/2026-03-02-nextjs-hydration-mismatch-seeded-random.md