パフォーマンス
Virtual DOMは「速いDOM」ではない DOM操作はなぜ重いのか jQuery時代に起きていた問題 Virtual DOMの発想 なぜ差分検出が効くのか 「再レンダリング＝遅い」という誤解 なぜ手動最適化では解決できなかったのか パフォーマンスの本当の効果 注意点：Virtual…
フロントエンドの進化はUIの進化ではない ブラウザはどうやって画面を描いているのか jQuery時代の問題：reflow地獄 Virtual DOMの本当の役割 なぜSPAは重くなるのか SSRが速い理由 Hydrationという新しい問題 RSCが狙っているもの CSSの進化も同じ文脈 実務…
フロントエンドの歴史はUIではなく「計算資源の配置」の歴史 ダイヤルアップ時代：回線が最も高価だった ブロードバンド時代：通信が安くなりUIが増える スマートフォン時代：CPUが弱くなる SSRの再評価：計算をサーバへ戻す CDNとエッジの登場：距離が問題…
SPAでは「必要なデータだけ欲しい」ためGraphQLが選ばれやすい REST APIは“画面”ではなく“資源”を返す Overfetch問題とは何か SPAは“画面中心設計”のアプリケーション GraphQLは「画面が欲しい形でデータを取得する」 Underfetch問題も同時に解決する それで…
巨大バンドルの原因は「ライブラリが重い」ではありません なぜSPAはバンドルが1つに集まるのか Tree Shakingとは何をしているのか Tree Shakingが効かないパターン 副作用（side effect） CommonJS 動的参照 ライブラリが巨大化する理由 さらに大きな原因：…
ECサイトでSSRが選ばれるのはSEOではなく売上の問題 なぜ表示速度が売上に影響するのか SSRが変えているのはLCP SPAとECの相性問題 実際に起きる現象 SEO以外の効果 SNS流入 広告品質スコア クローラ巡回 SSRでもSPAの利点は使える 注意点 サーバ負荷 在庫情…
SPAは万能ではなく「用途が限定された最適解」 SPAが得意なこと 社内システムと相性が良い理由 公開サイトで起きる問題 初回表示の遅さ SEOとクローラ URLの意味が弱くなる 実務で起きる設計失敗 SSRとの違い 向き不向きの目安 注意点 まとめ SPAは万能では…
ISRは「SSRの重さ」と「SSGの古さ」を同時に解決した 従来のSSRの問題 実際に起きる現象 SSGの問題 ISRの仕組み 重要なポイント なぜこれが重要なのか CDNとの関係 注意点 即時更新が必要なページ キャッシュの誤解 実務での使い分け まとめ ISRは「SSRの重…
SSRは「通信が重い」のではなく「計算が増える」 SPAとSSRでサーバの役割はどう変わるか なぜCPU使用率が上がるのか 具体的な比較 同時接続数との関係 よくある誤解：キャッシュすれば解決？ Node.js特有の問題 対策として行われること 注意点：サーバ増強だ…
コードスプリッティングは「軽くする技術」ではない まずSPAの初期表示で何が起きているか コードスプリッティングの仕組み ウォーターフォールでの変化 「効くタイミング」はページ遷移時 よくある失敗：分割しすぎ prefetchと組み合わせたときに真価が出る…
SPAで発生する「白画面問題」の正体 SPAの画面はHTMLでは作られていない JavaScriptバンドルとは何か 白画面が発生する具体的なポイント 1. ダウンロード失敗** 2. 構文エラー** 3. 実行時例外** なぜ開発環境では再現しないのか SSRとの決定的な違い JavaSc…
カクつきの原因は「速さ」ではなく「タイミング」 ブラウザは常に描画しているわけではない jQueryアニメーションの仕組み 何が起きているのか requestAnimationFrameとは何か なぜ滑らかになるのか jQueryが不利になる理由 実際のカクつきパターン 特に重い…
「jQueryは遅い」は本当にjQueryのせいなのか DOM操作はJavaScriptではない jQueryは何をしているのか なぜ昔は問題にならなかったのか 状況を変えたのはJavaScriptエンジン セレクタがボトルネックになる理由 ループで顕著に現れる さらに影響が大きかった…
オプティマイザはMySQLのバージョンごとに別物 オプティマイザとは何をしているのか バージョンごとに何が変わるのか 実際に起きる典型的な問題 なぜ開発環境では起きないのか バージョンアップ時の危険な思い込み 対策：必ず見るべきもの ヒント固定は最終…
MySQL8.4は「速くなった」のではなく遅くなりにくくなった まず前提：MySQLの遅さの多くはクエリではない InnoDBのロック競合の改善 統計情報（オプティマイザ）の改善 I/O処理の改善 パフォーマンススキーマの強化 注意点 なぜこの方向の改善なのか どう評…
インデックスがあるのにLIKE検索が遅い理由 B-Treeインデックスは辞書と同じ なぜ英語では問題になりにくいのか インデックスが使われないもう1つの理由 EXPLAINで確認する よくある誤解 現実的な解決策 前方一致に変える FULLTEXTインデックス 検索専用カラ…
日本語検索が遅いのはSQLではなくMySQL設定 日本語検索でインデックスが効かない理由 文字数ではなく「バイト長」で比較している COLLATIONが遅さを引き起こす よくある誤った対処 効率的な解決策 前方一致検索に変える ngram FULLTEXTを使う COLLATIONを見…
インデックスが急に効かなくなるのはSQLのせいではない 典型的な症状 なぜインデックスが使われないのか MySQL5.6と5.7以降の違い よくあるパターン：低選択性カラム もう一つの原因：統計情報のズレ なぜ本番だけ遅いのか LIKE検索で突然遅くなる例 インデ…
まず最初に：Astroを選ぶと「こういうコード」になる 想定するプロダクト：よくあるWebサイト構成（SEO重視＋ちょい動き） プロジェクトの素の構造：Astroはこう置く 1本目の具体コード：共通レイアウト（BaseLayout.astro） 2本目の具体コード：トップペー…
