Webの仕組み

🚀 はじめに この記事でわかること 「DNSキャッシュって何？」を一言で説明できるようになる 昨日まで見られたサイトが、急に開かない理由がわかる 「何か壊れた？」と焦ったときに、落ち着いて原因を想像できるようになる ✅ 概要解説 DNSキャッシュとは何か DNSキャッシュとは、 👉 「この住所（URL）は、ここですよ」という答えを“一時的にメモしておく仕組み” です。 インターネットでは、 人間：example.com のような名前を使う コンピューター：93.184.216.34 のような数字（IPアドレス） を使う この「名前 → 数字」を調べる役が DNS です。 そして DNSキャッシュは、こう考えるとイメージしやすいです。 📒 よく行くお店の住所を、毎回ネットで調べるのは面倒なので、手帳にメモしておく この「手帳のメモ」が DNSキャッシュです。 何のためにあるのか DNSキャッシュの目的は、とてもシンプルです。 ✅ 表示を速くする ✅ 無駄な問い合わせを減らす ✅ インターネット全体の混雑を防ぐ もし毎回 DNS に聞きに行ったら、 インターネットは「道を聞く人」で大渋滞してしまいます。 DNSキャッシュは、便利さとスピードを守るための“省エネ機能” です。 DNSキャッシュがないとどうなるのか もし DNSキャッシュがなかったら… サイトを開くたびに 「このURLどこ？」→「あっち」→「ありがとう」を毎回やる ページ表示がワンテンポ遅く感じる DNSサーバーが問い合わせ地獄になる つまり、 👉 今のサクサクしたネット体験は成り立ちません どんな場面で“問題”になるのか DNSキャッシュは便利ですが、唯一の弱点があります。 👉 情報が古くなることがある たとえば… サイトの引っ越し（サーバー移転）をした Cloudflare やサーバー設定を変更した ドメインの向き先を変えた でも、あなたのパソコンやスマホはこう言います。 「いや、昨日のメモでは“こっち”だったよ？」 これが、 「管理者側では直っているのに、自分だけ見られない」現象の正体です。 💡 小話・豆知識・逸話 🕒 DNSキャッシュには“賞味期限”がある DNSキャッシュは永遠に保存されるわけではありません。 「TTL（生存時間）」という有効期限があります。 ...

🚀 はじめに この記事でわかること 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サイトがあなたのログイン状態を覚えてくれる仕組み Cookie（クッキー）とセッションの違い どんな場面で使われているのか、初心者でもイメージできるように解説 ✅ 概要解説 Cookie（クッキー）とは何か あなたのブラウザに置かれる“小さなメモ” のようなものです。 Webサイトは、あなたが誰なのかを毎回覚えていません。 そこで、サイト側は「この人は○○さんだよ」というメモ（Cookie） を、あなたのブラウザに渡します。 ブラウザに保存される 小さな文字データ サイトにアクセスするたび自動で送られる セッションとは何か サーバー側に置かれる“あなた専用のロッカー” のようなものです。 ログインした瞬間、サーバーはあなた専用の「ロッカー（セッション）」を作り、 そこに「ユーザーID」「ログイン状態」などをしまっておきます。 サーバー側に保存される ログイン中の情報を管理する セッションIDという“鍵”で識別する Cookie とセッションの関係 実はこの2つはセットで使われることが多いです。 ログインすると、サーバーがセッション（ロッカー） を作る そのロッカーの“鍵”である セッションID を Cookie に入れてブラウザへ渡す 次回アクセス時、ブラウザは Cookie を送る サーバーは「この鍵は○○さんのロッカーだ」と判断し、ログイン状態を復元する つまり、Cookieは“鍵”、セッションは“ロッカー” という関係です。 Cookieやセッションがないとどうなる？ 毎回ログインが必要 カートの中身が毎回リセット 設定（テーマ・言語）が保存されない サイト側が「誰が誰か」判断できない Webは本来「1回1回の通信が独立」しているため、 “前回のあなた”を覚える仕組みが必要なのです。 どんな場面で使われる？ ログイン状態の維持（SNS、ECサイト、会員サイト） ショッピングカートの中身の保持 テーマ設定・言語設定の保存 アクセス解析（Google Analytics など） 広告の最適化（リターゲティング広告） 💡 小話・豆知識・逸話 🍪 Cookie の名前の由来は「フォーチュンクッキー」 実は Cookie の名前は、アメリカのフォーチュンクッキー（おみくじ入りクッキー） が由来と言われています。 「小さなメモが入っている」というイメージがぴったりだったためです。 🔑 セッションIDは“絶対に漏れてはいけない鍵” セッションIDは、あなたのロッカーを開ける鍵そのもの。 もし悪意ある人に盗まれると、あなたになりすましてログインできてしまいます。 ...