ブラウザ
ブラウザ競争がフロントエンド技術を短命にする理由 JavaScriptエンジンは1つではない なぜブラウザは競争しているのか 具体例：AJAXが不要になった瞬間 CSSでも同じことが起きている なぜSafariが特に問題になるのか Polyfillとトランスパイルの存在 技術選…
SSRとSPAでCORS設計が変わる理由をブラウザセキュリティモデルから解説 同一オリジンポリシーとは何か SPAでCORSが必要になる理由 SSRではなぜCORSを意識しないのか CORSと認証の関係 プリフライトが性能に影響する SSRとSPAの設計判断 よくある失敗 まとめ …
SPAで「戻るボタンが壊れる」現象の正体 従来のWebではなぜ問題にならなかったのか SPAではページ遷移が存在しない History APIとは何か なぜ壊れるのか 典型的な失敗パターン 状態をメモリだけで管理** URLに状態を持たせない** API再取得だけに頼る** 正し…
AIはブラウザでは動いていない ブラウザの役割は「計算」ではなく「表示」 AIが必要とする計算量は桁違い 実際の流れ：AIチャットで起きていること JavaScriptはAIを動かしているのか なぜ誤解が生まれるのか 例：Googleドキュメントの場合 例外はあるのか …
シークレットモードは「匿名化」ではない 何が消えて、何が消えないのか 消えるもの 消えないもの サイト側からはどう見えるか シークレットモードは「匿名化」ではない ブラウザのシークレットモード（プライベートブラウズ）を使うと、「検索履歴が残らな…
「このサイトは安全ではありません」と出る本当の理由 HTTPSとHTTPの違い 通信が丸見えになるHTTP HTTPSは暗号化通信 「このサイトは安全ではありません」と出る本当の理由 ブラウザに「このサイトは安全ではありません」と表示されたとき、多くの人は「この…
フロントエンドは「見た目担当」ではない どこに存在しているのか 何をしているのか 画面を作る 操作を受け取る サーバーと連絡する なぜ分かれているのか よくある誤解 フロントエンド＝デザイン 簡単な領域 注意点：フロントエンドだけでは完結しない まと…
インターネットに「ページ」は存在しない 実際に起きていること ページはブラウザが作っている なぜこの仕組みなのか 「通信」が本体の世界 これを理解すると見えること なぜ更新すると内容が変わるのか なぜエラーが出るのか なぜ部分更新ができるのか 注意…
ブラウザは「サイトを表示するソフト」ではない OSとは何をしているものか ブラウザがやっていること 画面を作る プログラムを実行する 通信を管理する 入力を扱う なぜOSに近づいたのか 安全性の仕組み なぜ重要なのか 注意点：万能ではない まとめ ブラウ…
SPAは「新しいページ」を開いていない 普通のWebサイトの動き SPAの動き なぜアプリのように見えるのか SPAが使われる場面 メリット 注意点：最初はむしろ遅い よくある誤解 SPA＝最新で優れた方式 SPA＝表示が速い まとめ：SPAの本質 SPAは「新しいページ」…
最近のWebは「ページ」を開いていない 昔のWeb：文書を取得する仕組み 現在のWeb：必要なデータだけ取得する 何が起きているのか（内部の流れ） なぜこの方式に変わったのか スマホの影響 メリット 注意点：万能ではない 何が変わったのかの本質 最近のWebは…
昔のWebが遅かったのは「技術が未熟」だからではない 最大の原因：通信回線が圧倒的に遅かった 常時接続ではなかった 画像1枚で数十秒 HTMLの仕組みも今とは違った ページは一枚の文書だった サーバー側も遅かった ブラウザの能力が低かった ページ設計も遅…
JavaScriptは「便利な技術」ではなく「問題児」だった時代がある 理由1：ブラウザごとに動きが違った 同じコードが別の結果になる Internet Explorer問題 理由2：セキュリティの不安 勝手に何かが起きる印象 情報を盗まれるのではという恐怖 理由3：とにかく…
「更新したのに変わらない」はキャッシュとJavaScriptが原因 キャッシュとは何か なぜHTMLは更新されるのに壊れるのか JavaScriptは「操作の手順書」 スマホだけ壊れる理由 スーパーリロードで直る理由 なぜ更新のたびに起きるのか 実際の対策：ファイル名を…
Cookieは「あなたの情報」ではなく「サイトのメモ」 そもそもWebページは記憶ができない Cookieは「番号付きの付箋」 なぜログイン状態が維持されるのか ショッピングカートが残る理由 トラッキングに使われる理由 Cookieを削除すると何が起きるか 危険なも…
結局「Webサイト」と「アプリ」は何が違うのか かつてのWebサイト：ページを移動するもの アプリの特徴：画面を書き換える 技術的な違い：通信の使い方 なぜ境界が曖昧になったのか 実際に起きる問題 注意点：SEOやリンクの扱い 結局どこが境界線か 結局「We…
「実行される」は“動き出す”ではない プログラムはただの文字列 CPUがしていること ブラウザの場合 なぜ「止まる」ことがあるのか 実行は1つずつしかできない 実際に起きるトラブル 注意点：コードは常に動いているわけではない 「実行」の正体 「実行される…
ブラウザは「表示ソフト」ではない ブラウザの最初の仕事：通信 解析：HTMLを理解する 見た目の計算：CSSエンジン 実行：JavaScriptエンジン 描画：レンダリング よくある誤解：サーバが画面を送っている 実際に起きるトラブル セキュリティの役割 結局ブラ…
JavaScriptはサーバで動いていない ブラウザに入っている“実行装置” 実際の例：ボタンのクリック サーバが担当する処理 よくある誤解：通信がある＝サーバ処理 実際に起きるトラブル 注意点：セキュリティの意味 なぜこの仕組みなのか 結局どこで動いている…
ページは「一瞬で表示」されていない まず起きるのは名前解決（DNS） サーバへリクエストが送られる HTML解析：DOMの構築 CSS解析：見た目の計算 JavaScript実行：処理の追加 画像や追加ファイルの取得 レンダリング：画面に描く 実際に起きるトラブル 注意…
ボタンを押した瞬間、実は4つの処理が起きている クリックは「信号」として扱われる JavaScriptは“待っている” DOMとは「画面の設計図」 さらに裏では通信が走ることもある よくある勘違い：ボタンが処理しているわけではない 実際に起きるトラブル リスクと…
Webサイトが動く本当の理由 最初に起きるのは通信 HTMLを解析すると画面の骨組みができる CSSで見た目が決まる JavaScriptが「動き」を生む さらに裏で通信が行われることもある よくある誤解：サーバが画面を動かしているわけではない 実際に起きる問題 リ…
まずイメージをつかむ：JavaScriptの役割 JavaScriptが担当する「反応」 なぜHTMLとCSSだけでは動かないのか ブラウザの中で起きている処理 実際にやるとこうなる：よくある失敗 JavaScriptの注意点とリスク JavaScriptをどう捉えればいいか まずイメージを…
