ブラウザ

🚀 はじめに この記事でわかること クロスオリジン（CORS）とは 何者なのか なぜブラウザが「ブロックしました」と言ってくるのか よくあるエラー文の意味と、怖くない正体 ✅ 概要解説 クロスオリジン（CORS）とは何か CORS（Cross-Origin Resource Sharing） とは、 「このWebサイトは、よその住所（オリジン）と通信していいですか？」 を、ブラウザがチェックするルール のことです。 まず「オリジン」って何？ オリジンとは、次の 3点セット のことです。 通信方法（https など） ドメイン名（example.com） ポート番号（:443 など） この3つが 全部同じなら「同じオリジン」、 どれか1つでも違えば「別のオリジン（クロスオリジン）」です。 例： https://example.com https://api.example.com ← ❌ ドメインが違う http://example.com ← ❌ http / https が違う 何のためにあるのか CORSの目的は たった1つ。 ✅ 悪いサイトが、あなたの情報を勝手に盗まないようにする たとえ話：家のポスト あなたの家（ブラウザ）に、 親（同じオリジン） 知らない人（別オリジン） が来たとします。 ✅ 親なら普通に話す ❌ 知らない人なら「誰？」と確認する CORSは、この 「確認作業」 を自動でやっています。 CORSがないとどうなるのか もしCORSがなかったら… 悪意あるサイトが 銀行サイトの情報 SNSのログイン状態 個人データ を 勝手に読み取れる 「別のタブで開いた怪しいサイトから、情報が盗まれる」 👉 インターネットが無法地帯になります。 ...

🚀 はじめに この記事でわかること ChromeなどのWebブラウザの中で何が起きているか ページが表示されるまでの流れ（レンダリング） JavaScript・HTML・CSSがどんな役割をしているか 「ブラウザって結局なに？」が具体的なイメージで理解できる ✅ 概要解説 ブラウザとは何か？ 一言でいうと、インターネットの情報を“見える形”に変えてくれるアプリです。 Chrome、Safari、Edge、Firefoxなどが有名ですね。 ブラウザは、Webサイトのデータ（HTML・CSS・JavaScript）を受け取り、 人間が読めるページに変換する“翻訳者”のような存在です。 何のためにあるのか？ ブラウザは、次のような役割を持っています。 Webページを表示する（レンダリング） 画像や動画を読み込む JavaScriptを実行して動きをつける 安全に通信する（HTTPS） タブごとに処理を分けて安定させる もしブラウザがなかったら、私たちはWebサイトのデータを ただの文字列の塊としてしか見られません。 ブラウザがないとどうなる？ Webページが文字の羅列にしか見えない ボタンやフォームが動かない 画像や動画が表示されない セキュリティが弱く、危険な通信になりやすい つまり、ブラウザはインターネットを使うための必須アプリなんです。 Chromeの中で何が起きている？（ざっくり流れ） Webページを開くと、Chromeの中では次のような処理が行われます。 URLを入力 → 「どこのサーバーにアクセスする？」をDNSで調べる サーバーからHTMLを受け取る → ページの“設計図”が届く HTMLを読みながらCSSを読み込む → 見た目の情報（色・配置・フォントなど）を取得 JavaScriptを実行 → ボタンの動きやアニメーションなどを処理 画面に描画（レンダリング） → 設計図＋見た目＋動きを組み合わせて表示 たとえるなら、 HTML＝骨組み、CSS＝服や装飾、JavaScript＝動きや仕掛け これらをブラウザが組み立てて、私たちの画面に表示してくれます。 💡 小話・豆知識・逸話 1) Chromeは「タブごとに別の部屋」で動いている Chromeはタブごとにプロセス（部屋）を分ける設計です。 これにより、1つのタブが固まっても他のタブに影響しにくい仕組みになっています。 2) ブラウザは“絵を描く職人”でもある ページを表示する「レンダリング」は、 画家がキャンバスに絵を描くような作業です。 しかも、スクロールするたびに高速で描き直しているという職人芸。 3) JavaScriptエンジン「V8」は超高速 Chromeの中には「V8」というJavaScriptエンジンが入っています。 これは自動車のV8エンジンのように速いという意味で名付けられました。 4) ブラウザは“安全の番人”でもある 怪しいサイトにアクセスすると警告が出ますよね。 これはブラウザが危険な通信や証明書の異常を検知してくれているからです。 5) ブラウザは毎日アップデートされている Chromeは数週間ごとに新バージョンが出ています。 セキュリティ強化や高速化のため、裏側では常に改善が続いています。 ...

🚀 はじめに この記事でわかること 「キャッシュって何？」がやさしく理解できる キャッシュがあるとなぜWebが速くなるのか ブラウザ・サーバー・CDNなど、どこにキャッシュがあるのかのイメージ キャッシュがないとどうなるのか ✅ 概要解説 キャッシュとは何か？ 一言でいうと、「よく使うデータを手元に置いておく仕組み」 です。 たとえば、毎朝読む教科書。 毎回学校の倉庫まで取りに行くより、自分の机に置いておいたほうが速いですよね。 Webの世界でも同じで、 画像 CSS（デザインのルール） JavaScript（動きをつける仕組み） など、よく使うデータを近くに置いておくことで、読み込みが爆速になります。 何のためにあるのか？ キャッシュの目的はシンプルで、 速くする（表示速度アップ） サーバーの負荷を減らす（混雑に強くなる） この2つです。 特にスマホでサイトを見るとき、 キャッシュがあるだけで体感速度が大きく変わることがあります。 キャッシュがないとどうなる？ キャッシュがないと、毎回こんな流れになります： ブラウザ「画像ください！」 サーバー「はいどうぞ！」 ブラウザ「CSSください！」 サーバー「はいどうぞ！」 ブラウザ「JavaScriptください！」 サーバー「はいどうぞ！」 …これを毎回やるので、 距離が遠いほど遅くなるし、 アクセスが増えるとサーバーが混雑します。 キャッシュがあると、 「昨日もらった画像、まだ使えるよね？」 「CSSは変わってないから保存しておこう」 と、手元のコピーを使うので速いのです。 どんな場面で使われている？ キャッシュはWebのあらゆる場所で使われています。 場所 役割 例 ブラウザ（Chrome / Safari） 手元に保存して高速化 画像・CSS・JS CDN（Cloudflareなど） 世界中の近くの拠点にコピー 画像・HTML サーバー側キャッシュ 計算結果を保存 WordPressのページ生成結果 OS / CPU よく使うデータを高速メモリに保存 CPUキャッシュ 特にWebでは、 ブラウザキャッシュとCDNキャッシュが大活躍します。 💡 小話・豆知識・逸話 1) キャッシュは「ズル」ではなく「効率化」 キャッシュという言葉を聞くと、 「なんか裏技っぽい…」と思う人もいますが、 実はインターネットの世界では当たり前の仕組みです。 ...