フロントエンド開発

フロントエンド本番環境ログ管理：Next.js で console.log を無効化するベストプラクティス

本記事では、Next.js プロジェクトの本番環境で console.* ログを無効化する3つの方法（compiler.removeConsole、TerserPlugin pure_funcs、Worker の手動処理）と、3つのプロジェクト（frontend-blog / admin-blog / admin-next）における実践的な適用について体系的に解説します。

Next.js 戻るナビゲーション完全ガイド：スクロール位置復元、URLパラメータ保持、iOSセーフエリア

本記事では、Next.js App Routerにおける戻るナビゲーション時のスクロール復元が機能しない3つの根本原因——sessionStorage条件誤判定、URLパラメータ消失、React Strict Modeの二重マウント——と、それに付随して修正するiOS Safariのセーフエリア揺れ、CategoryFilterタブの揺れ問題について深く掘り下げます。

Quillリッチテキスト動画埋め込みからHLSアダプティブ再生へ：フロントエンド置換の完全実装

本記事では、ブログシステムにおいて、Quillリッチテキストエディタに埋め込まれたMP4動画タグを、記事詳細ページで自動的にHLS m3u8アダプティブストリーム再生に置き換える方法を詳しく解説します。バックエンドの変換パイプライン、meta.contentVideoによる複数動画の保存、フロントエンドのMarkdown/HTML二重パス置換、IndexedDBキャッシュ層の修正、そして実践で遭遇した6つの重要なバグとその修正方法を網羅します。

BlurhashImage — SSRセーフなBlurHashプレースホルダーコンポーネントと「文字のように滑らかな」レンダリング戦略

Zustand + Cookie Storage — SSR認証永続化戦略

**ソースコード**: [`auth.store.ts`](apps/frontend-blog/src/lib/stores/auth.store.ts) (357L) · [`cookie-storage.ts`](apps/frontend-blog/src/lib/stores/cookie-storage.ts) (171L) · [`cookie-manager.ts`](apps/frontend-blog/src/lib/utils/cookie-manager.ts)

React Queryプラットフォームアダプター：三端統一データリクエストと自動フォールバック戦略

React 跨コンポーネント HLS ビデオ協調：クリック再生 + 単一ビデオ排他制御

Ein realer Fall von Frontend-Performance-Optimierung. Durch eine `CustomEvent`-Event-Bus-Architektur kombiniert mit Lazy-Loading wird das Problem der Bandbreitenkonkurrenz durch zahlreiche Videostreams beim Laden der Startseite vollständig gelöst.

管理后台大ファイルアップロード最適化：Multer OOMからプリサインURL直接アップロードへの苦労話

Next.js ゼロスケルトン画面最適化実践：ISR + 4層アーキテクチャ + プラットフォーム認識キャッシュ

Next.js 三モード統一 Fetcher アダプテーションレイヤー：CSR/SSG/SSR ワンクリック切り替えのデータリクエストアーキテクチャ

Next.js App Router 向けに設計された汎用データリクエストレイヤー。単一のコードがブラウザ、ビルド時、サーバーの3つの環境で自動的に適応し、書き込み操作はサーバー側で静かにスキップされ、キャッシュ戦略は環境に応じてインテリジェントに選択されます。