Next.js 動的ルートと専用ルートの共存パターン -- 設計・検証・バンドル最適化
Next.js App Routerで動的ルートと専用ルートを共存させる設計パターンを解説。自動ルート優先の仕組み、generateStaticParamsの除外が不要な理由、Client Componentがバンドルに与える影響を実験で検証しました。
ブログタグ
Web開発
モダンなWeb開発の実践知識をまとめた記事集。Next.js・React・TypeScriptを中心に、フロントエンドからサーバーサイドまで幅広いトピックをカバーします。実際のプロジェクトで直面した課題とその解決策をわかりやすく解説します。
MarkedのHTML出力を安全にする設計ガイド
markedのsanitizeオプション廃止後、sanitize-htmlでMarkdown由来のHTMLをホワイトリスト方式でサニタイズする設計を解説。GFMタスクリスト・GFM Alert・mermaid対応のホワイトリスト設定例、markdownToHtml()への統合パターン、動作確認の考え方をコード付きで紹介します。
cron式の日と曜日がOR判定になる仕様と落とし穴
Vixie cronの日フィールド(DOM)と曜日フィールド(DOW)を同時に指定するとOR判定になる仕様、JavaScriptのparseIntが不正な入力を見逃す問題、年1回実行のcron式で必要になる探索ウィンドウの動的スケーリングについて、実装コードとともに解説します。
JavaScriptのDate APIに潜む2つの落とし穴: 自動補正とタイムゾーン解釈
JavaScriptのDate APIによる日付自動補正（2月31日が3月3日になる問題）とYYYY-MM-DD形式のUTC解釈問題を解説。ラウンドトリップ検証パターンとISO 8601+タイムゾーン形式による根本対策を、実際のバグ事例とコードで紹介します。
REST APIで迷いがちなHTTPステータスコードの選び方ガイド
401と403の違い、400と422の使い分け、301と302の選び方など、REST API開発で頻出するHTTPステータスコードの判断基準をコード例付きで解説します。
URLを変えるべきか迷ったら: SEO・UX・競合の3軸で判断するURL設計フレームワーク
多コンテンツサイトのURL構造を見直す際に使える、SEO・UX・競合分析の3軸判断フレームワークを紹介します。具体的な数値データ、情報アーキテクチャの原則、競合サイト分析、4つの判断事例を通じて、URL変更の「する/しない」を根拠を持って決められるようになります。
伝統色カラーパレットツールを作りました: 250色から色彩調和を自動生成
日本の伝統色250色から補色・類似色・トライアド・テトラド・分裂補色の5種類のカラーパレットを自動生成するツールを作りました。色彩調和理論に基づくアルゴリズムと、伝統色という制約の中で最適な調和色を見つけるアプローチを紹介します。
ゲームと辞典のLayout共通化: 品質要素を全コンテンツに広げる第3弾
コンテンツ種別（ゲーム・辞典・ツール）に応じたLayoutコンポーネントの設計判断を解説します。usageExampleのラベル変更、品質データの管理粒度、h1の配置、CSS役割分担など、コンテンツの特性から設計を導く考え方が中心です。
ツールの信頼性向上: ReDoS対策とプライバシー注記の導入
ReDoSの仕組みとWeb Worker + タイムアウトによる対策パターンを解説。Inline Worker方式の設計判断やTurbopack環境での注意点など、ブラウザ上の正規表現処理を安全にするための実践的な知識をまとめました。
サイト内検索を実装しました -- Fuse.jsで500件の日本語コンテンツを横断検索
Fuse.jsを使ったCmd+Kモーダル型のサイト内検索機能を実装しました。ライブラリ選定の比較、遅延ロードによるパフォーマンス設計、日本語コンテンツの検索対応について紹介します。
ツールを10個から30個に拡充しました: プログラマティックSEO戦略の実践
Webツールを10個から30個に拡充した経緯と、その後の結果を紹介。プログラマティックSEO戦略に基づくツール選定、6バッチにわたる段階的実装、戦略転換の全記録。そして量的拡大戦略から得た実践的な教訓も合わせて解説します。
日本の伝統色250色の辞典を作りました: プログラマティックSEOの実践
250色の日本の伝統色を収録した辞典ページを作成しました。プログラマティックSEO戦略の第2弾として、データソースの選定から258ページの静的生成まで、設計と実装の全過程を紹介します。