Web基礎

🚀 はじめに この記事でわかること クロスオリジン（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のログイン状態 個人データ を 勝手に読み取れる 「別のタブで開いた怪しいサイトから、情報が盗まれる」 👉 インターネットが無法地帯になります。 ...

🚀 はじめに この記事でわかること 「脆弱性（ぜいじゃくせい）」とは何なのか なぜニュースで「脆弱性が発見されました！」と騒がれるのか 自分には関係なさそうに見えて、実は身近にある理由 ✅ 概要解説 脆弱性とは何か 脆弱性（ぜいじゃくせい） とは、 👉 システムやアプリにある“弱点”や“すき”のことです。 たとえば… 家の鍵が壊れていて、誰でも開けられる状態 金庫の暗証番号が「0000」になっている こうした「危ない状態」を、ITの世界では脆弱性と呼びます。 何のために重要なのか 脆弱性があると、次のような問題につながる可能性があります。 個人情報が盗まれる 勝手にログインされる サイトが改ざんされる サービスが止まる つまり脆弱性は、 👉 悪い人にとっての“入り口” です。 🧠 ハッカーは「すごい技」で攻撃するというより、 一番弱いところを探して入ってくることが多いです。 脆弱性がないとどうなるのか？ もし脆弱性が一切なければ… 不正アクセスはほぼ不可能 情報漏えいも起きにくい 安心してサービスを使える ただし現実には、 👉 完璧に安全なシステムは存在しません。 だからこそ、 見つける 直す 定期的に確認する この3つが大切になります。 どんな場面で関係してくるの？ 実は脆弱性は、特別な人だけの話ではありません。 スマホのアプリ パソコンのOS（Windows / macOS など） Webサイト ゲーム機 家庭用ルーター これらすべてに、脆弱性が見つかることがあります。 📱「アップデートしてください」という通知 👉 多くの場合、脆弱性を直すためです。 💡 小話・豆知識・逸話 🕳️ ハッカーは“穴探し名人” 映画では、ハッカーは黒い画面に高速で文字を打つイメージがありますよね。 でも実際は、 有名な脆弱性の一覧を見る アップデートされていないシステムを探す という「穴探し」の方が多いです。 🔍 例えるなら 「最新の防犯システム」より 「鍵をかけ忘れている家」を探す感じです。 ...

🚀 はじめに この記事でわかること 「帯域幅（たいいきはば） って何？」がやさしく理解できる ネットの速い／遅いの正体 どうすると速度が上がるのか、どういう時に遅くなるのか ネット動画の“くるくる”やゲームのラグとのつながり ✅ 概要解説 帯域幅とは何か？ 帯域幅（Bandwidth）＝データを通す“道の広さ”のこと。 インターネットは「データが流れる道路」のようなものです。 この道路の “広さ”が帯域幅。 広ければ たくさんのデータが一度に通れる → 速く感じる。 狭いと データが渋滞 → 遅く感じる。 ポイント：帯域幅＝通信速度ではないが、“速さを決める要素” 高速道路は車が速いとは限らないけど、混みにくい分「快適に速く進める」イメージです。 何のためにあるのか？ 帯域幅は、インターネットで快適に通信するための器です。 動画を止まらず再生する オンラインゲームをスムーズにプレイする リモート会議で音・映像を遅延なく送る 複数人が同時にWi‑Fiを使っても快適に通信できる どれも、十分な帯域幅があるからこそ実現します。 帯域幅がないとどうなるのか？ 帯域幅が足りない＝道路が狭い状態。 次のような“困った現象”が起きます。 動画がカクカクする Zoom/Teamsの声が途切れる ゲームのラグが増える 家族が同時に使うと、全体が遅くなる 大きいファイルのダウンロードがとにかく遅い よくある誤解： 「スマホが古いから遅い」→ 実は回線の帯域幅不足だった というケースは本当に多いです。 どんな場面で使えるのか？ 帯域幅を知っておくと、次の場面で役立ちます。 Wi‑Fiルーター選び（bps/Gbpsの意味が理解できる） 光回線の比較（1Gbpsと10Gbpsの違い） 会社や学校のネット回線の設計 ファイル転送やクラウド利用の高速化 同時接続数を考える（家族が多い場合など） つまり、日常でも仕事でも役立つ超基本知識なのです。 💡 小話・豆知識・逸話 1) “最大○Gbps”はあくまで理論値 回線広告で「最大1Gbps！」と書いてあっても、 実際にはその速度が出ることはほぼありません。 理由は… みんなが使っていると道路が混む 家の配線・ルーター性能にも左右される サービス側（動画サイトなど）の速度も影響する 道路は広いのに、行き先の駐車場が小さいと結局詰まる そんなイメージです。 2) インターネットは“みんなでシェアする水道” 帯域幅の仕組みは「水道の蛇口」にも似ています。 太い水道管 → たくさんの水が出る（＝帯域幅が広い） 細い水道管 → ちょろちょろしか出ない（＝帯域幅が狭い） さらに、同時に複数の蛇口を使うと水圧が下がるように、 家族が同時に通信するとネットが遅くなるのも同じ原理です。 ...

🚀 はじめに この記事でわかること HTTPステータスコードとは？（200/301/404/500…数字の意味と全体像） なぜ必要？（ブラウザとサーバーが“通じ合う”合図としての役割） よく出るコードの読み方（404/500/301/302/429/503 などを“怖くない言葉”で） 実用ヒント（ブラウザの開発者ツール／curl での確認、リダイレクトとSEOの基礎） こんな人向け 中学生〜大人まで、IT知識がほとんどない人 「404 とか 500 って何のエラー？」をやさしく知りたい人 API学習の最初の一歩として、応答の意味をつかみたい人 初心者でも安心な理由 信号・郵便・お店の張り紙のような身近なたとえで解説 このページだけで完結（最後に公式ドキュメントや学びの道しるべも） PaperMod向けに読みやすい構成（目次・図版の想定つき） ✅ 概要解説 HTTPステータスコードとは何か Webの“合図” です。 ブラウザ（見る側）とサーバー（届ける側）が「どうなったか」を数字で伝えます。 1xx（情報）：まだ作業中／進行中のお知らせ 2xx（成功）：うまくいきました（例：200 OK） 3xx（リダイレクト）：住所が変わりました。こっちへどうぞ（例：301/302/307/308） 4xx（クライアントエラー）：送り方が悪い／欲しいものがない（例：404 Not Found、400 Bad Request） 5xx（サーバーエラー）：お店側の事情で提供できません（例：500 Internal Server Error、503 Service Unavailable） たとえ： 2xx＝OK（注文が通って料理が出た） 3xx＝転送（別の店舗に案内） 4xx＝注文ミス（メニューにない／記入漏れ） 5xx＝厨房トラブル（機器故障・混雑） 何のためにあるのか 状況を正確に共有するため：成功／失敗／転送／制限などを機械にも人にも分かる形で伝える 自動処理の判断に使うため：アプリやAPIクライアントが次の動き（再試行・別URLへ移動・入力の見直し） を決めやすい 検索エンジンやキャッシュの制御：301/308 は恒久移転として扱われ、SEO・キャッシュに影響 ステータスコードがないとどうなる？ ブラウザは “うまくいったのか、ダメなのか”が分からない 検索エンジンやアプリは自動で正しい対応ができない ユーザー体験が悪化（エラーなのに成功扱い、あるいはその逆…） どんな場面で使える？ Web閲覧のトラブル原因の当たりをつける（404/500/503/504 など） API開発・テストで“期待どおりの応答か”をチェック サイト移転（リダイレクト）とSEOの基本ルール理解 レート制限（429）／メンテ表示（503） など、混雑・保守の設計 📊 ひと目でわかる“代表コード”チートシート 番号 名前 ざっくり意味 よくある場面 ひとことで覚える 200 OK 成功 ページ表示、API成功レスポンス うまくいった 201 Created 作成完了 APIで新規データを作った 新規作成完了 204 No Content 中身なし成功 削除成功など返すものがない 成功、でも返すものナシ 301 Moved Permanently 永続的な引っ越し ドメイン統合、恒久的URL変更 恒久転送（SEO向け） 302 Found 一時的な移動（※） 一時的に別URLへ 仮住まい（※後述） 303 See Other 別の場所を見て フォーム送信後などにGETへ誘導 結果を別URLで 307 Temporary Redirect メソッド保持で一時転送 POSTのまま転送したい 一時転送（メソッド保持） 308 Permanent Redirect メソッド保持で恒久転送 恒久的な移転 恒久転送＋メソッド保持 304 Not Modified 変更なし キャッシュが有効 ダウンロード不要 400 Bad Request リクエスト不正 パラメータ・形式ミス 入力がおかしい 401 Unauthorized 認証が必要 ログイン/トークン不足 認証してね 403 Forbidden 禁止 権限不足／アクセス拒否 入ってはだめ 404 Not Found 見つからない URLまちがい／削除済み ないよ 405 Method Not Allowed メソッド禁止 POST禁止のURLでPOST その方法は× 408 Request Timeout 送るのが遅すぎ 通信途切れ・遅延 間に合わない 409 Conflict 競合 同時更新の衝突 ぶつかった 410 Gone 恒久的に消えた コンテンツ終了 もう撤去済み 429 Too Many Requests アクセス過多 連打・レート制限 落ち着いて 500 Internal Server Error サーバー内エラー バグ・例外 サーバーで事故 502 Bad Gateway 中継サーバーの不調 CDN/プロキシの背後が× 中継でNG 503 Service Unavailable 一時停止・混雑 メンテ／過負荷 いまお休み 504 Gateway Timeout 中継先が返事なし バックエンド遅延 待ちきれずタイムアウト ※302は歴史的経緯でPOST→GETに変わる実装が多く、“一時的転送+メソッド保持”は 307 を使うのが安全。 恒久転送は 301（古典）か 308（メソッド保持）。SEOでは 301/308 が基本。 ...