フロントエンド
Signalsが急に話題になったのはなぜか Reactの仕組みが持つ構造的コスト Signalsの基本的な考え方 なぜこれが重要なのか 依存関係追跡という仕組み Virtual DOMとの違い なぜ今になって必要になったのか 注意点：万能ではない フロントエンドの流れの中での…
Virtual DOMは「速いDOM」ではない DOM操作はなぜ重いのか jQuery時代に起きていた問題 Virtual DOMの発想 なぜ差分検出が効くのか 「再レンダリング＝遅い」という誤解 なぜ手動最適化では解決できなかったのか パフォーマンスの本当の効果 注意点：Virtual…
フロントエンドの進化はUIの進化ではない ブラウザはどうやって画面を描いているのか jQuery時代の問題：reflow地獄 Virtual DOMの本当の役割 なぜSPAは重くなるのか SSRが速い理由 Hydrationという新しい問題 RSCが狙っているもの CSSの進化も同じ文脈 実務…
フロントエンドの歴史はUIではなく「計算資源の配置」の歴史 ダイヤルアップ時代：回線が最も高価だった ブロードバンド時代：通信が安くなりUIが増える スマートフォン時代：CPUが弱くなる SSRの再評価：計算をサーバへ戻す CDNとエッジの登場：距離が問題…
フロントエンドは流行ではなく「ボトルネック移動」で変化している jQueryが解決した問題：ブラウザ差異 次のボトルネック：状態管理の崩壊 SPAが解決した問題：状態管理 SPAのボトルネック：初回表示 SSRが解決した問題：描画位置 SSRのボトルネック：不要…
ブラウザ競争がフロントエンド技術を短命にする理由 JavaScriptエンジンは1つではない なぜブラウザは競争しているのか 具体例：AJAXが不要になった瞬間 CSSでも同じことが起きている なぜSafariが特に問題になるのか Polyfillとトランスパイルの存在 技術選…
フロントエンドの進化が速く見えるのはなぜか ECMAScriptとは何か なぜJavaScriptだけ影響が大きいのか フレームワークが古くなる仕組み なぜフロントエンドは毎年学習が必要になるのか Babelとトランスパイルが加速させた変化 技術選定で注意すべき点 結局…
フロントエンドのフレームワークが「毎年変わる」と感じる理由 そもそもフロントエンドの役割が変わり続けている jQueryが最適だった時代 次の問題：画面が壊れる SPAフレームワークが登場した理由 さらに新しい問題：表示が遅い SSRが流行した本当の理由 そ…
巨大バンドルの原因は「ライブラリが重い」ではありません なぜSPAはバンドルが1つに集まるのか Tree Shakingとは何をしているのか Tree Shakingが効かないパターン 副作用（side effect） CommonJS 動的参照 ライブラリが巨大化する理由 さらに大きな原因：…
SPAは「ページが切り替わらない」ことがメモリリークの原因です MPAでは起きにくく、SPAで起きる理由 イベントリスナがリークを生む仕組み Reactでよくある例 さらに危険なパターン setInterval DOM参照の保持 Promiseの未解決 メモリリークが実際に起きると…
SSRとPWAは「相性が悪い」のではなく、キャッシュの担当範囲が違います Webアプリは実は多層キャッシュで動いている SSRのキャッシュは「HTMLのキャッシュ」 PWAのキャッシュは「リソースのキャッシュ」 なぜ「両立しない」と言われるのか 両立させる設計 HT…
Service Workerは「オフライン対応のためのAPI」ではありません SPAが抱える問題とキャッシュの必要性 SPAの通信はページではなくリソース単位になる Service Workerの動作原理 ブラウザの外で動くJavaScript キャッシュストレージという別のキャッシュ ブラ…
SSRのDehydrationは「HTMLを渡す技術」ではなく「状態を渡す技術」です Hydrationの前に必ず存在するDehydration Hydrationとは何をしている処理なのか なぜそれだけでは動かないのか Dehydrationの仕組み サーバはHTMLと一緒に「状態」を送っている Hydrati…
SPAで状態管理ライブラリ（Redux等）が必要になった歴史的背景 MPA時代の状態はどこにあったか SPAで起きた変化 コンポーネント分割が新たな問題を生む 状態の分散と不整合 状態管理ライブラリの役割 なぜ最初は不要に見えるのか 注意点：状態管理は万能では…
SPAはなぜCore Web Vitalsで不利になりやすいのか Core Web Vitalsとは何を測っているのか SPAの初期表示で何が起きているか 「SPAは速い」は間違いではない LCPが悪化する本当の原因はAPI通信 なぜSSRがSEOで有利になるのか CLSもSPAで悪化しやすい よくあ…
HTMLが早く出るほどレイアウトは揺れやすくなる CLSとは何を測っているのか SSRでなぜ発生しやすいのか フォントロードが最大の原因になる 画像も同じ問題を起こす なぜLCPとトレードオフになるのか 対策：フォント表示戦略 対策：画像のサイズ指定 もう一つ…
SPAは遅いのではなく「描画の開始が遅れる」 Critical Rendering Pathとは何か 通常のWebページの場合 SPAの場合に起きること なぜLCPが遅くなるのか CSSブロッキングとの組み合わせ よくある誤解：JSが重いから遅い？ 改善アプローチ 注意点：Skeleton UIの…
SSRは「通信が重い」のではなく「計算が増える」 SPAとSSRでサーバの役割はどう変わるか なぜCPU使用率が上がるのか 具体的な比較 同時接続数との関係 よくある誤解：キャッシュすれば解決？ Node.js特有の問題 対策として行われること 注意点：サーバ増強だ…
SEOのためにSSRが必要、は半分正しい 検索エンジンは何を見ているのか SSRとは何をしているのか Prerenderingとは何か 技術的な違い（重要） どちらを選ぶべきか よくある誤解：GoogleはJSを完全に解釈する？ 注意点：Prerenderingの落とし穴 結局どう違うの…
SSRは「毎回レンダリングする」わけではない SPAとSSRのキャッシュの違い CDNが得意なもの エッジキャッシュとは何か Cache-Controlヘッダの役割 なぜSPAはCDNと相性が弱いのか キャッシュが破綻するケース エッジで再生成する仕組み（ISR） 結局、何が起き…
コードスプリッティングは「軽くする技術」ではない まずSPAの初期表示で何が起きているか コードスプリッティングの仕組み ウォーターフォールでの変化 「効くタイミング」はページ遷移時 よくある失敗：分割しすぎ prefetchと組み合わせたときに真価が出る…
「SSRを速くした」のではなく「待たせ方を変えた」 従来のSSRの問題点 ストリーミングレンダリングの仕組み 何が高速化されているのか Suspenseとプレースホルダの役割 なぜSPAより速く感じるのか 注意点：万能ではない SSRの進化の方向性 「SSRを速くした」…
SPAは壊れているのではなく「サーバが正しく動いている」 そもそもSPAのルーティングとは何か なぜ404が起きるのか（本質） なぜリンククリックでは動くのか 必要になるサーバ設定の正体 よくある誤解：historyモードが悪い？ もう一つの問題：APIの404を壊…
「SSRは速い」のではなく「先に始めている」 SSRの画面表示で実際に起きている通信 プリロードとは何をしているのか preloadの役割 SPAとの違い プリフェッチがページ遷移を速くする理由 なぜSPAは遅く見えるのか ネットワークウォーターフォールで見る違い …
SPAで「戻るボタンが壊れる」現象の正体 従来のWebではなぜ問題にならなかったのか SPAではページ遷移が存在しない History APIとは何か なぜ壊れるのか 典型的な失敗パターン 状態をメモリだけで管理** URLに状態を持たせない** API再取得だけに頼る** 正し…
SSRで起きるHydration mismatchとは何か まずHydrationの前提を確認する mismatchはなぜ起きるのか 代表的な原因：時刻 乱数も危険 環境依存値 非同期データ mismatchが起きると何が起きるか なぜ開発環境では起きにくいのか 対策の基本方針 1. 時刻を描画し…
SPAにおけるHydrationの正体 まず前提：SPAは本来DOMを自分で作る SSRでは最初からHTMLが存在する Hydrationが必要になる理由 Hydrationで内部的に起きていること なぜHydrationが重いのか Hydrationが終わるまで何が起きるか よくある誤解 注意点 開発で気…
SPAで発生する「白画面問題」の正体 SPAの画面はHTMLでは作られていない JavaScriptバンドルとは何か 白画面が発生する具体的なポイント 1. ダウンロード失敗** 2. 構文エラー** 3. 実行時例外** なぜ開発環境では再現しないのか SSRとの決定的な違い JavaSc…
SPAはなぜ初回表示が遅くなりやすいのか ブラウザがページを表示するまでの流れ SPAで実際に起きている処理 1. JavaScriptのダウンロード** 2. JavaScriptのパース** 3. 実行（評価）** 4. API通信** 5. DOM生成** 「通信が遅い」のではない なぜSSRは早く見…
Storybookは「UIカタログ」ではなく「実行可能な仕様」にできる なぜStorybookがSDDと相性が良いのか 間違った使い方 正しい書き方 ― 状態をストーリーにする テストとの連携 APIとの接続 実務での運用手順 注意点 ― Storybookの落とし穴 まとめ ― Storybook…
