Web21 件の記事

Web の記事

URL エンコード入門 - パーセントエンコーディングの仕組みと、+ と %20・encodeURIComponent の落とし穴

URL エンコード入門 - パーセントエンコーディングの仕組みと、+ と %20・encodeURIComponent の落とし穴

約26分

URL に日本語や記号を載せるためのパーセントエンコーディングを、ブラウザで動くデモ付きで説明します。UTF-8 のバイト列を %XX にする手順、RFC 3986 の予約文字と非予約文字、WHATWG URL Standard で場所ごとに変わるエンコード対象、空白が + になる application/x-www-form-urlencoded の由来、encodeURI・encodeURIComponent・URLSearchParams の違い、Python・PHP・Go の関数比較、ドメイン名の Punycode、二重エンコードや + の化けといった実務のトラブルまでまとめます。

WordPress セキュリティ対策の基本と実践 - 公式ハンドブックと脆弱性統計から優先順位を決める

WordPress セキュリティ対策の基本と実践 - 公式ハンドブックと脆弱性統計から優先順位を決める

約33分

WordPress サイトを守るための対策を、公式の Advanced Administration Handbook と Patchstack・Wordfence の脆弱性統計をもとに優先順位をつけて整理します。2025年に見つかった脆弱性の91%はプラグイン、悪用までの中央値は5時間という現実から、更新と自動更新の設定、プラグインの選び方と減らし方、2要素認証とレート制限によるログイン保護、wp-config.php の定数とファイル権限、WP-CLI のチェックサム検証による改ざん検知、バックアップと改ざんされたときの手順、そして効果が限定的な対策まで、設定例とチェックリスト付きでまとめます。

Base64 の仕組み入門 - 3バイトを4文字にする変換と、base64url・btoa の落とし穴

Base64 の仕組み入門 - 3バイトを4文字にする変換と、base64url・btoa の落とし穴

約27分

バイナリをテキストに載せる符号化 Base64 の仕組みを、ブラウザで動くデモ付きで説明します。3バイトを24ビットにまとめて6ビットずつ4文字に置き換える手順、パディング = の規則、サイズが約4/3になる計算、MIME の76文字改行、RFC 4648 の base64url・base32・base16、data URI・HTTP Basic 認証・JWT での使われ方、btoa が日本語で InvalidCharacterError になる理由と ES2026 の Uint8Array.prototype.toBase64、Node.js の Buffer、macOS と GNU の base64 コマンドの違いまでまとめます。

Google Preferred Sources 実践入門 - 埋め込みボタンの実装とAI検索時代の指名流入

Google Preferred Sources 実践入門 - 埋め込みボタンの実装とAI検索時代の指名流入

約25分

Googleが2026年8月20日、パブリッシャーが自サイトに埋め込める「Preferred Sources」ボタンを公開しました。優先ソースの仕組みと日本語対応の経緯、標準JS/カスタムJS/ディープリンクの3実装、Next.js App Routerへの組み込み例、publisher.jsが内部で何をしているか、そして効果測定の限界までを公式ドキュメントを出典に整理します。

TLS 1.3 と HTTPS ハンドシェイクの仕組み - 1-RTT・前方秘匿性・0-RTTを一次ソースで理解する

TLS 1.3 と HTTPS ハンドシェイクの仕組み - 1-RTT・前方秘匿性・0-RTTを一次ソースで理解する

約17分

HTTPS の土台である TLS 1.3 のハンドシェイクを、一次ソースの RFC 8446 を軸に整理します。ClientHello から Finished までのメッセージの役割、ECDHE による鍵共有と前方秘匿性、TLS 1.2(RFC 5246)との違い(2-RTT から 1-RTT へ、静的 RSA 鍵交換の廃止、暗号スイートの簡素化)、0-RTT / early data の再送リスク、PSK によるセッション再開、そして OpenSSL や curl での確認方法まで、Web 開発者・インフラ担当者向けにまとめます。

TCP と UDP の基本 - 3ウェイハンドシェイクと信頼性の仕組みを理解する

TCP と UDP の基本 - 3ウェイハンドシェイクと信頼性の仕組みを理解する

約18分

トランスポート層の二大プロトコルである TCP と UDP を、一次ソースの RFC 9293(TCP、2022年に RFC 793 を置き換えた統合仕様)と RFC 768(UDP)を軸に整理します。3ウェイハンドシェイク(SYN / SYN-ACK / ACK)、コネクション状態遷移、FIN による終了と TIME-WAIT、シーケンス番号と確認応答、ウィンドウによるフロー制御、輻輳制御の概要、TCP と UDP の使い分け、そして UDP 上で信頼性を実現する QUIC(RFC 9000)まで、Web 開発者・インフラ担当者向けにまとめます。

HTTP/3 と QUIC 入門 - なぜ HTTP は TCP を捨てて UDP に移ったのか

HTTP/3 と QUIC 入門 - なぜ HTTP は TCP を捨てて UDP に移ったのか

約20分

HTTP/3 と、その土台となる新トランスポート QUIC を、一次ソースの RFC を軸に入門解説します。HTTP/2 が抱える TCP 上の Head-of-Line ブロッキング問題から出発し、QUIC が UDP の上でストリーム多重化・TLS 1.3 統合・0-RTT/1-RTT ハンドシェイク・Connection ID によるコネクションマイグレーションをどう実現するのかを直感的に整理。RFC 9000/9001/9002/9114/9204 の対応や、ブラウザ・サーバー・CDN の対応状況、curl や DevTools での確認方法、注意点とトレードオフまで Web 開発者向けにまとめます。

DNS の仕組み入門 - 名前解決・レコード種別・TTL とキャッシュを理解する

DNS の仕組み入門 - 名前解決・レコード種別・TTL とキャッシュを理解する

約23分

DNS(ドメインネームシステム)の名前解決の仕組みを、一次ソースである RFC を軸に整理します。ルート・TLD・権威サーバーの階層、再帰リゾルバとスタブリゾルバ、A/AAAA/CNAME/MX/NS/SOA/TXT/CAA/SRV/PTR などのレコード種別、再帰と反復の解決の流れ、TTL とキャッシュ、ネガティブキャッシュ(RFC 2308)、ポート53と UDP/TCP・EDNS0(RFC 6891)、DNSSEC(RFC 4033)、DoH(RFC 8484)/DoT(RFC 7858)まで、Web 開発者・インフラ担当者向けにまとめます。

Astro 7 リリース - コンパイラもMarkdownもRust化、Vite 8でビルドが最大61%速く

Astro 7 リリース - コンパイラもMarkdownもRust化、Vite 8でビルドが最大61%速く

約7分

Astro 7 が2026年6月22日にリリースされました。.astro コンパイラを Go から Rust へ書き換え、Markdown/MDX 処理系に Rust 製の Sätteri を採用(デフォルト化)、バンドラは Vite 8(Rust 製 Rolldown)。ビルドは公式報告で15〜61%高速化。Queued Rendering の安定化、src/fetch.ts による高度ルーティング、Route Caching、AI エージェント検出付きのバックグラウンド開発サーバーなどの新機能と、HTML 厳格化や Sätteri デフォルト化(remark/rehype は明示オプトイン)といった6→7の破壊的変更を、Astro 公式を一次ソースに整理します。

Webhook 受信側のベストプラクティス - 署名検証・リトライ・冪等性・順序

Webhook 受信側のベストプラクティス - 署名検証・リトライ・冪等性・順序

約9分

Webhook を安全・堅牢に受け取るための設計を実務目線で整理します。HMAC-SHA256 による署名検証とリプレイ攻撃対策(タイムスタンプ)、生のボディで検証する理由、定数時間比較、at-least-once 配信を前提にした冪等な処理、保証されない配信順序への備え、まず素早く 2xx を返して非同期処理する受信パターン、未知イベントの扱い、シークレットのローテーションや CSRF 除外まで、Stripe・GitHub・Standard Webhooks を一次ソースにまとめます。

タイムゾーンと日付の正しい扱い方 - UTC・ISO 8601・夏時間の罠と JavaScript Date

タイムゾーンと日付の正しい扱い方 - UTC・ISO 8601・夏時間の罠と JavaScript Date

約9分

日付とタイムゾーンの扱いを実務目線で整理します。UTC とオフセットとIANAタイムゾーン(Asia/Tokyo)の違い、ISO 8601 / RFC 3339 の推奨フォーマット、Unixエポック、JavaScript の Date のハマりどころ(月が0始まり・日付のみ文字列はUTC解釈・getTimezoneOffsetの符号)、夏時間(DST)で生じる「存在しない時刻」と「重複する時刻」、そして「保存はUTC・表示時に変換・IANA識別子で扱う」などのベストプラクティスを、MDN・RFC 3339・IANA を一次ソースにまとめます。

REST API設計の基礎と冪等性 - HTTPメソッドの意味と Idempotency-Key

REST API設計の基礎と冪等性 - HTTPメソッドの意味と Idempotency-Key

約10分

REST API設計の基礎を、HTTPメソッドの意味(safe / idempotent)から整理します。リソース指向のURL設計、GET/POST/PUT/PATCH/DELETE の使い分けと冪等性の早見表、なぜ冪等性がリトライや二重課金防止に重要か、POST を安全にリトライする Idempotency-Key の仕組み、ステータスコードの使い分け、RFC 9457 のエラー形式まで、RFC 9110・MDN・Stripe を一次ソースにまとめます。

WebSocket・SSE・ポーリングの使い分け - リアルタイム通信の選び方

WebSocket・SSE・ポーリングの使い分け - リアルタイム通信の選び方

約11分

Webでリアルタイムにデータを届ける3つの方法 — ポーリング(short / long polling)、Server-Sent Events(SSE / EventSource)、WebSocket を実務目線で比較します。通信方向・プロトコル・自動再接続・バイナリ対応の違い、コード例、SSE の HTTP/1.1 接続数上限やプロキシのバッファリング、WebSocket のスケールと認証(カスタムヘッダが使えない)といった落とし穴、そして用途別の選び方まで、MDN・RFC 6455 / 6202 を一次ソースにまとめます。

Astro 6 の新機能 - 開発と本番の差を埋める新 astro dev、Fonts API、移行の注意点

Astro 6 の新機能 - 開発と本番の差を埋める新 astro dev、Fonts API、移行の注意点

約9分

Astro 6 の新機能と移行ポイントを公式リリースノートをもとに整理します。Vite の Environment API を使い本番ランタイムを開発時に走らせる新しい astro dev、組み込み Fonts API、Live Content Collections と CSP の安定化、実験的な Rust コンパイラ。さらに 6.1 の変更と、Node 22.12 必須・Vite 7・レガシー Content Collections 廃止・ViewTransitions から ClientRouter への置き換えといった 5.x からの破壊的変更まで、Astro 6.0/6.1 を一次ソースでまとめます。

CloudflareがVoidZeroを買収 - Vite / Vitest / Rolldown / Oxc エコシステムの今後とVite+

CloudflareがVoidZeroを買収 - Vite / Vitest / Rolldown / Oxc エコシステムの今後とVite+

約11分

2026年6月4日、CloudflareがVite・Vitest・Rolldown・Oxcを擁するVoidZeroを買収しました。VoidZeroとは何か、Evan Youが統一を進めてきたツールチェーン、当初有償から完全MITオープンソースへ転換したVite+、買収の狙い(AI-nativeなWebとCloudflareへの統合)、そして「ベンダー中立性は保たれるのか」という開発者の懸念まで、Cloudflare・VoidZero・Viteの公式発表を一次ソースに整理します。

Cookie・セッション・SameSite の基礎 - Secure / HttpOnly と CSRF・CORS の関係

Cookie・セッション・SameSite の基礎 - Secure / HttpOnly と CSRF・CORS の関係

約11分

Web認証の土台となる Cookie・セッション・SameSite を実務目線で整理します。Set-Cookie の属性(Expires/Max-Age・Domain/Path)、Secure と HttpOnly が防ぐ脅威、SameSite の Strict/Lax/None の違いと None に Secure が要る理由、サーバー側セッションとログイン後の ID 再生成、SameSite だけで CSRF を防ぎきれない理由、クロスオリジンで Cookie を送る CORS の条件、__Host-/__Secure- プレフィックスまで、MDN・RFC 6265bis・OWASP を一次ソースにまとめます。

CORS の仕組みとハマりどころ - プリフライト・credentials・Allow-Origin を理解する

CORS の仕組みとハマりどころ - プリフライト・credentials・Allow-Origin を理解する

約10分

CORS(オリジン間リソース共有)を実務目線で整理します。同一オリジンポリシーとの関係、単純リクエストとプリフライト(OPTIONS)の条件、Access-Control-Allow-Origin などの各ヘッダ、credentials 付きで * が使えない理由、Vary: Origin とキャッシュ、そして「No Access-Control-Allow-Origin header」エラーの意味と対処まで、MDN と WHATWG Fetch Standard を一次ソースにまとめます。CORS はブラウザの仕組みであって認可ではない、という勘所も。

文字コードと UTF-8 / Unicode の基礎 - 文字化けの原因と、length が合わない理由

文字コードと UTF-8 / Unicode の基礎 - 文字化けの原因と、length が合わない理由

約11分

文字コードを実務目線で整理します。Unicode(文字集合・コードポイント)と UTF-8/UTF-16(符号化方式)の違い、UTF-8 の可変長バイト構造、JavaScript の文字列が UTF-16 ベースゆえに String.length が見た目の文字数と合わない理由、結合文字・絵文字・正規化(NFC/NFD)、そして文字化けの典型原因(エンコーディング不一致・MySQL の utf8 と utf8mb4・BOM・meta charset)と対策まで、Unicode 公式・RFC 3629・WHATWG を一次ソースにまとめます。

JWT(JSON Web Token)の仕組みと正しい使い方 - 署名・検証とセキュリティの落とし穴

JWT(JSON Web Token)の仕組みと正しい使い方 - 署名・検証とセキュリティの落とし穴

約12分

JWT(JSON Web Token)を実務目線で整理します。header.payload.signature の3部構造と Base64URL、iss/sub/aud/exp などのクレーム、HS256 と RS256/ES256 の使い分け、検証の流れ、そして alg:none 攻撃・アルゴリズム混同・「JWT は暗号化ではないので中身は誰でも読める」という誤解・失効の難しさといった落とし穴まで、RFC 7519/7515/7518/8725 と OWASP を一次ソースにまとめます。

HTTP ステータスコードの実践的な使い分け - 401 と 403、3xx の違いをちゃんと選ぶ

HTTP ステータスコードの実践的な使い分け - 401 と 403、3xx の違いをちゃんと選ぶ

約9分

HTTP ステータスコードを、API 設計で迷いやすいポイントを中心に整理します。2xx/3xx/4xx/5xx の意味と使い分け、401 と 403 の違い、301/302/307/308 のメソッド保持、200 でエラーを返すアンチパターン、404 と 410、429 と Retry-After、422 の位置づけまで、RFC 9110 や MDN といった一次ソースをもとにまとめます。