API

🚀 はじめに この記事でわかること WebSocket（ウェブソケット）が 何をする技術なのか なぜ「チャットが即届く」「通知がリアルタイム」なのか 普通のWeb（HTTP）と 何がどう違うのか ✅ 概要解説 WebSocketとは何か WebSocketとは、ブラウザとサーバーが“ずっとつながったまま”で会話できる通信方式です。 普通のWebページでは「必要なときだけ話す」通信が行われていますが、 WebSocketは 電話のようにつながりっぱなし なのが大きな特徴です。 何のためにあるのか WebSocketの目的は、とてもシンプルです。 情報をすぐに届けたい 毎回聞きに行かず、向こうから知らせてほしい たとえば… チャットで相手が送った瞬間にメッセージが届く 株価やゲームのスコアが自動で更新される 新着通知がリロードなしでポンっと出る これらはすべて、リアルタイム通信が必要です。 そのためにWebSocketが使われます。 WebSocketがないとどうなるのか WebSocketがなかった時代（今も一部で使われています）では、こんな方法がありました。 ページを何度も更新する 数秒ごとに「変化ある？」とサーバーに聞きに行く これは、友達の家に行って 「何か連絡来た？」 「まだ？」 「今は？」 と、何度もインターホンを押すようなものです。 結果として、 無駄な通信が増える 遅れて情報が届く サーバーも疲れる という問題がありました。 どんな場面で使えるのか WebSocketは、こんな場面で大活躍します。 💬 チャットアプリ（LINE風のWebチャット） 🔔 通知システム（新着コメント・お知らせ） 🎮 オンラインゲーム（位置情報・スコア更新） 📈 リアルタイム表示（株価、為替、アクセス数） 🧑‍🤝‍🧑 共同編集アプリ（同時に編集内容が反映） 「ページを開きっぱなしで、常に最新情報が動く」 そんなWeb体験の裏側に、WebSocketがあります。 💡 小話・豆知識・逸話 1️⃣ WebSocketは“裏口入学”から始まる？ WebSocketの通信は、最初は普通のHTTP通信から始まります。 「最初は礼儀正しく挨拶して、OKなら専用回線に切り替える」 この切り替えを ハンドシェイク（握手） と呼びます。 名前の通り「お互いに確認してから始める」仕組みです。 2️⃣ スマホの“既読がすぐ付く”理由 チャットアプリで「送信 → 数秒以内に既読が反映」されるのは、 WebSocketのような常時接続が使われているからです。 ...

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

🚀 はじめに この記事でわかること 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 が基本。 ...