TODAY’S ISSUE 2026年5月18日 · 月曜日 WEB FRONTLINE

Web Dev Digest: 2026‑05‑18

2026年5月18日

Top 20

AWS、Oracle Cloudと閉域網で直結する「AWS Interconnect-multicloud」新機能をプレビュー　Google Cloudとの接続に続き

Source: ITmedia News | Published: 2026-05-18 10:34 JST

AWS が Oracle Cloud と閉域網で直結する「AWS Interconnect-multicloud」をプレビュー公開し、AWS 起点のマルチクラウド閉域接続先が Google Cloud に続き Oracle Cloud に拡大した
既存の Direct Connect/Interconnect 系と異なり、AWS コンソール操作のみで Oracle Cloud Infrastructure (OCI) との直結を構成できる点が要点
想定ユースケースは Oracle Database 系ワークロードと AWS 上のアプリ層をプライベート低レイテンシで連携させる構成
Google Cloud との接続機能が先行リリース済みで、今回が同シリーズ第 2 弾に位置付けられる
一般提供時期・対応リージョン・価格はプレビュー時点では明示されていない

Project Glasswing: what Mythos showed us

Source: Cloudflare Blog | Published: 2026-05-18 15:00 JST

Cloudflare が Anthropic の脆弱性研究特化 LLM “Mythos Preview” を自社 50 超のリポジトリ（ランタイム・エッジ・プロトコル・コントロールプレーン・OSS 依存）に投入した結果、複数プリミティブを組み合わせて PoC まで自走させる挙動を確認したと報告
ガードレールの一貫性が低く、同一タスクでも文脈の与え方次第で許可・拒否が揺れる「文脈依存の Refusal ばらつき」が大きな課題として挙げられた
C/C++ 系コードベースではメモリ安全言語に比べて誤検知率が高く、“possibly/potentially” 付きのヘッジ表現が多発してトリアージ負荷が増大
単一エージェントによる網羅探索は文脈窓を食い潰して既存知見を捨てるため、Recon → Hunt(50 並列) → Validate → Gapfill → Dedupe → Trace → Feedback → Report の 8 段パイプラインに分割する設計に至った
検出された個別脆弱性の詳細は本記事では非公開で、Cloudflare の正式な脆弱性管理プロセスでトリアージ・修正済みとのみ記載

Dify/LangGraphの直列フローが破綻する理由。TypeScriptで実装する「State駆動」な自律型ReActループの極意

Source: Zenn | Published: 2026-05-18 20:00 JST

Dify / LangGraph のような直列ワークフローはエラーハンドリング分岐で経路が指数的に増え、step 2 以降に推論精度が急落する「step 2 cliff」が発生する、と著者が結論付ける
原因は (1) 各ターンで意図とゴールを LLM が確率的に再計算してしまうこと、(2) ツールの生 JSON/HTML がコンテキストに蓄積して事実が埋もれることの 2 点と分析
解として TypeScript 製の @synapse-agent/framework を提案し、enableState: true で構造化 State を別管理、initialToolName: "fetch_ticket" で初手ツール呼び出しを固定する設計を取る
会話履歴と State を明確に分離し、State には抽出済み事実とタスクのみを残すことで raw log によるコンテキスト汚染を回避する
ツール定義に evaluation コントラクトを持たせ、結果が要件を満たすかを構造化判定することでエージェントの早期終了を防ぐ実装パターンを示す

Cross-Document View Transitions: The Gotchas Nobody Mentions

Source: CSS-Tricks | Published: 2026-05-18 22:47 JST

クロスドキュメント View Transitions は Chrome 111 で出た <meta name="view-transition"> がすでに非推奨化されており、現在は CSS の @view-transition { navigation: auto; } でオプトインする必要があると指摘
新ページが 4 秒以内にレンダリング可能にならないとトランジションが警告なしで無音停止する「4 秒タイムアウト」を主要な落とし穴として挙げる
<link rel="expect" href="#hero" blocking="render"> でクリティカルコンテンツのレンダリングを保証することで、ネットワーク + TTFB を含む 4 秒制約に対する緩和策が機能する
ブラウザがラスタースナップショットを取って補間する仕組みのため画像が歪み、::view-transition-old/new に object-fit: cover; overflow: hidden; を当てるのが既知の対処法
pageswap は退出側ページで event.viewTransition / event.activation を提供し遷移先 URL を参照可能、pagereveal は入場側で常に発火するため if (!event.viewTransition) return でガードする必要がある

Cloudflare Workersの10ms CPU time制限で動かす──暗号文転送Workerを平均3.8msに保った3つの判断

Source: Zenn | Published: 2026-05-18 14:16 JST

Cloudflare Workers Free Plan の 10ms CPU 制限内で暗号文転送 Worker を運用するため、3 つの設計判断で平均 3.8ms（p99 7.2ms、超過率 0.008% / 21,400 リクエスト）に収めたと報告
(1) リクエストを JSON ではなく [2-byte length][email][12-byte nonce][ciphertext] のバイナリ固定レイアウトに変更し、req.json() の 1.9ms を 0.4ms に削減
(2) Resend API への body を JSON.stringify で組み立てず、"text":"${b64nonce}\n${b64ciphertext}" のテンプレ文字列で直書きすることで 1.4ms 短縮（Base64 が引用符・改行を含まない性質に依存）
(3) Resend のレスポンスを待たず 202 Accepted を即返し、ctx.waitUntil() で配信検証を後段に逃すことで 0.6ms 削減、失敗検知はバックグラウンドログ側に倒す
I/O 待ちは CPU 時間に課金されないが JSON パースや UTF-8 変換は直接消費されるため、「CPU を使うのはバイト→文字列変換」という制約理解が設計の起点になった

Supabase RLSで本番のチケット経済が壊れた話

Source: Zenn | Published: 2026-05-18 14:24 JST

開発者間フィードバック交換サービス “The First Touch”（88 ユーザ・49 アプリ・85 フィードバック）で、Supabase RLS の副作用により「チケット経済」のステータス遷移が壊れた事例を報告
バグの本質は、RLS により各レビュワーが自分の応募行しか見えず、「応募 2 件以上で募集終了」の集計が常に 1 件と判定され、プロジェクトが永久に “recruiting” に留まる現象
著者は “DB 上には 2 件あるのに、アプリのコードからは 1 件に見えてしまった” と原因を要約し、RLS によるロウ透過性とビジネスロジックの集計が衝突したと整理
修正方針はステータス遷移ロジックを PostgreSQL の SECURITY DEFINER 関数に閉じ込め、RLS をバイパスして DB 側で全件集計する形に変更した
RLS は「ユーザー視点の閲覧制御」には適するが「ロジック視点の整合集計」には不向き、と運用知見を結論として提示

東京の終電検索サービスを作りました — RAPTORアルゴリズム + ODPT API

Source: Qiita | Published: 2026-05-18 22:52 JST

著者が東京駅基準で「最終電車で帰れる最遅出発時刻」を返す Web サービスを TypeScript で個人開発したと報告
経路探索に RAPTOR (Round-bAsed Public Transit Optimized Router) アルゴリズムを採用し、ODPT (Open Data Platform for Transportation) API を時刻表データソースに利用
動機は Google Maps が「今出発した場合の経路」しか返さず、「終電に間に合う最遅出発時刻」を逆算する用途には不向きという点
TypeScript 実装でフロント側に組み込み、ユーザーが現在駅と帰宅駅を選ぶと「ここまでなら飲んでいられる」リミット時刻を表示する UX を提供
公共交通オープンデータと古典的経路探索アルゴリズムを組み合わせた個人開発として、データソースと探索手法の選定理由を記事内で説明

14年のSEO専門家が図書館情報学の知見で挑む、グローバル経緯度データから「真太陽時」を1分単位で自動計算する算法とNext.js実装

Source: Qiita | Published: 2026-05-18 18:52 JST

SEO 14 年のキャリアを持つ著者が、地球上の緯度経度から「真太陽時」を 1 分粒度で算出するアルゴリズムを Next.js アプリとして実装・公開したと報告
真太陽時は均時差（地球公転軌道楕円性 + 自転軸傾き）を補正した実太陽位置基準の時刻で、標準時とは年間で約±16 分のずれが発生する
入力は緯度経度と日付、出力は分単位の真太陽時で、ユーザーは任意地点・任意日のシエスタや農作業基準時刻に変換できる
図書館情報学の整理術を応用し、計算ロジックと UI を Next.js のフロントエンド側で完結させ、外部 API なしで動作させる構成を採用
SEO 観点からは「経緯度入力で具体的な数値を返す」専門ニッチコンテンツとして検索流入を見込む実用記事の側面も持つ

1つのenv varで3つのマッチングアプリを量産した話

Source: Qiita | Published: 2026-05-18 14:02 JST

Next.js + Supabase 構成の単一コードベースから、環境変数 1 つを切り替えるだけで 3 つの別マッチングアプリを並行運用する量産パターンを著者が紹介
マルチテナント設計の要点は、Supabase プロジェクト ID とアプリ識別子を env var で外出しし、UI テーマ・コピー・DB スキーマを env 経由で差し替える点
Vercel への 3 デプロイは同じ Git リポジトリから fork せず、環境変数だけを切替えることでメンテナンス分岐を避けるアプローチ
ロジックの本体は共通化し、テナント固有の差異（カテゴリ、マッチング条件、UI 文言）を設定ファイルで吸収する設計
個人開発で複数バーティカルへ素早く展開する手段として、Supabase のスキーマ分離と Vercel の env-per-project 機能の組合せを推奨

Reactが「何をやっているのか」、ゼロから全部説明する

Source: Zenn | Published: 2026-05-18 22:00 JST

React の本質は「Gmail のような動的更新を仮想 DOM と差分検出で必要箇所だけ書き換えること」に尽きると、MPA/SPA の対比からゼロベースで結論付ける初学者向け解説
ブラウザ視点での MPA（毎回 HTML 受信）と SPA（JS が DOM 操作）の違いを動作レベルで対比し、両者でユーザー体感がなぜ変わるかをページ更新の挙動から説明
React のコアは仮想 DOM ツリーの diff であり、実 DOM への反映は「差分が出たノードのみ」に限定される最低限の更新であると要点を提示
想定読者は「プログラミング未経験〜初級」で、useState / useEffect などの hooks API には踏み込まず、ライブラリの存在意義の輪郭に集中
説明モデルは「なぜリロードなしで Gmail のメール一覧が更新されるか」を起点に組まれ、React 採用の根拠を体感的に提示する構成

Github Copilotでバイブコーディングしてみた1

Source: Zenn | Published: 2026-05-18 22:19 JST

Copilot にテスト → 実装の順で書かせる TDD スタイルで Todo アプリを実装する連載 1 回目を開始し、フロント React 19 + TanStack Query + Jotai、バック Hono のフルスタック構成を採用したと宣言
技術選定の具体は、フロント React 19 / TypeScript / Vite / TailwindCSS v4、状態 TanStack Query + Jotai、バック Hono + Node.js、テスト Vitest という現代的な組み合わせ
TDD で進めるため、Copilot に先にテストコードを書かせ、その後実装を埋めさせる「テスト → 実装」往復スタイルを採用
TailwindCSS v4 系の最新構成を採用しており、PostCSS 不要のゼロ設定スタイルに踏み込んでいる点が構成上の特徴
状態管理を TanStack Query（サーバ状態）と Jotai（クライアント状態）で分離する構成を採り、Copilot にどこまで仕様を渡せば期待した出力が得られるかをこの連載で検証していく方針

Cloudflare Workers + Hono でAPIゲートウェイを実装する実践パターン

Source: Qiita | Published: 2026-05-18 10:09 JST

Cloudflare Workers と Hono を組み合わせて、ルーティング・認証・レートリミット・CORS をエッジで完結させた API ゲートウェイを Hono のミドルウェアチェーンで実装する具体パターンを提示
バックエンドサービスへの転送・JWT 認証・トークンバケット型レートリミット・プリフライト対応 CORS を、それぞれ Hono のミドルウェアとして積層する構成を採用
TypeScript ベースのサーバーレス実行環境（Workers）を本番 API ゲートウェイとして使う前提で、観測性（ログ・メトリクス）と障害時のフォールバック経路を運用観点として取り上げる
Workers の制約（CPU 時間 10ms、サブリクエスト数上限、リクエストサイズ上限）に当たらないようルート分割と上流選択を行う設計指針を提示
API ゲートウェイ専用ミドルウェア（Kong, AWS API Gateway 等）に対する軽量な代替案として Workers + Hono を位置付け、エッジ実行と TypeScript 一貫性で優位と整理

チーム用WikiをCloudflare Tunnel + Cloudflare Accessで公開した

Source: Qiita | Published: 2026-05-18 03:43 JST

著者が社内チーム向けに Wiki.js を Docker で動かし、Cloudflare Tunnel と Cloudflare Access を組み合わせて「ポート開放・固定 IP・有料サービスなし」で外部公開する構成を実装した
Cloudflare Tunnel が cloudflared デーモン経由でアウトバウンド接続のみで外部公開を確立するため、自宅・社内 LAN の NAT 越えやファイアウォール設定が不要
認証層は Cloudflare Access のメール OTP / SSO で被せ、社内メンバーのみアクセス可能な状態を実現
Wiki.js の動作要件（PostgreSQL + Node.js）は Docker Compose で固め、本体露出は Tunnel 側に閉じる構成
セルフホスト Wiki を最低コストで安全に共有する具体的なレシピとして、Tunnel + Access の組み合わせを実例ベースで紹介

All Articles

Zenn

#	Title	Summary	Author	Published
1	Dify/LangGraphの直列フローが破綻する理由。TypeScriptで実装する「State駆動」な自律型ReActループの極意	(Top 20 参照)	@太田政樹@synapse-agent/framework	20:00
2	Cloudflare Workersの10ms CPU time制限で動かす──暗号文転送Workerを平均3.8msに保った3つの判断	(Top 20 参照)	@Captio式シンプルメモ	14:16
3	Supabase RLSで本番のチケット経済が壊れた話	(Top 20 参照)	@いけちゃん	14:24
4	Reactが「何をやっているのか」、ゼロから全部説明する	(Top 20 参照)	@ゆう	22:00
5	Github Copilotでバイブコーディングしてみた1	(Top 20 参照)	@kishimin	22:19
6	Pencil vs Figma — 設計と実装の往復をなくした	Gakken LEAP のフロントエンドが Pencil AI を Figma 代替として現場検証、設計と実装を同じ環境で完結できるか試した実地レポート	@hjpotter1	09:25
7	Next.js + Supabase + Gemini APIで「学習伴走AI」を個人開発したら、Stripe決済とドメイン設定で無	学習タイマー + AI 採点を組み合わせた “Gakuru-AI” 個人開発で、Stripe 決済とドメイン設定の本番化に詰まった具体パターンを共有	@しがない開発者	22:51
8	Next.js + TypeScript + Tailwind CSSでエンジニア用ポートフォリオを作る【まずは雛形作成】	フリーランスエンジニアが Vercel デプロイ前提で Next.js 雛形を作る連載第 1 回、TS と Tailwind の初期セットアップ手順を記録	@はうつりー	19:02
9	基本情報技術者試験をRPGで攻略する無料Webアプリを個人開発した話	過去問を RPG バトル化した個人開発 Web アプリ、正解＝モンスター被弾・不正解＝プレイヤー被弾のゲーミフィケーション設計	@すがいも製作所	22:54
10	Claude Code の statusLine を 3 行カスタム表示にする bash スクリプト	Claude Code のセッション課金（円表記）・コンテキスト消費率・モデル・cwd を 3 行で出す bash スクリプトを実装した記録	@カイ	14:06
11	一時承認用 Permission Set の作り方	AWS IAM Identity Center で時間制限・監査証跡付きの一時昇格 Permission Set を設計し、本番運用の特権付与を統制する手順	@boxman_tools	22:33
12	AWS LambdaでClaude Code Agent SDK利用時のタイムアウト解決方法	Lambda での Claude Code Agent SDK タイムアウトを `HOME=/tmp` 環境変数の付与で解決、AWS 上の Claude Platform 展開にも同じ手が効く知見	@metalmental	23:18
13	AWSの利用料を週次でSlackに自動通知する	Lambda + EventBridge Scheduler + Slack Webhook で月曜朝に AWS サービス別料金を Slack へ自動投稿する構成を実装	@Tomet	22:29
14	Cloud Run × Firestore × Flask：AI時代の開発で気づいたこと	Flask + Firestore を Cloud Run に載せた個人開発記、SDK 差分・本番固有エラー・ローカル環境差分で踏んだ落とし穴を列挙	@Pyanoki	13:49
15	BigQuery Data Clean Rooms：セキュアな企業間データ連携と活用	生データを露出させずに集計値だけを企業間で交換する BigQuery Data Clean Rooms の構築要件と適用ユースケースを整理	@菊地	13:34
16	Writeup for curl as a service 2	Daily AlpacaHack 2026/05/17 の Flask 問題 writeup、subprocess 経由のコマンドインジェクションを突くアプローチを解析	@Taa	12:50

Qiita

#	Title	Summary	Author	Published
1	東京の終電検索サービスを作りました — RAPTORアルゴリズム + ODPT API	(Top 20 参照)	@jyc	22:52
2	14年のSEO専門家が図書館情報学の知見で挑む、グローバル経緯度データから「真太陽時」を1分単位で自動計算する算法とNext.js実装	(Top 20 参照)	@JigenQiita	18:52
3	1つのenv varで3つのマッチングアプリを量産した話	(Top 20 参照)	@Cosoado	14:02
4	Cloudflare Workers + Hono でAPIゲートウェイを実装する実践パターン	(Top 20 参照)	@luck2515	10:09
5	チーム用WikiをCloudflare Tunnel + Cloudflare Accessで公開した	(Top 20 参照)	@wassy310	03:43
6	Web Locks API + BroadcastChannel で同一オリジン複数ウィンドウを制御する	業務アプリで複数タブ起動を抑止するため Web Locks API + BroadcastChannel を組み合わせ、同一オリジン内のリーダー選出を実装した記録	@shinkai_	17:17
7	Map.prototype.getOrInsert() in JavaScript/Node.js	ES の `Map.prototype.getOrInsert()` を用いて、集計・グループ化で頻出する「存在チェック→初期化→更新」の 3 行を 1 行に潰すパターン	@shinkai_	02:55
8	PostgreSQL Citus 分散環境で踏んだ Distributed Deadlock の調査	XD.GROWTH 基盤の水平分散 PostgreSQL（Citus）でバッチ処理時に発生した分散デッドロックの再現条件と切り分け手順を共有	@k-hata-tb	14:37
9	Django + PostgreSQL でフォトアルバム Web アプリを構築する	フォルダベース管理に挫折した著者が Django + PostgreSQL で写真をタグ・検索可能にする Web アプリを構築した個人開発記	@ChatNoir0413	23:20
10	Best SaaS Admin Dashboard Templates for Modern Products（モダン SaaS 向け管理ダッシュボードテンプレート集）	SaaS 評価軸を「オンボーディング速度・レポート明瞭性・リアルタイム可視性」と置き、Next.js 系含む管理画面テンプレを比較紹介	@wrappixel	23:43
11	Server Actions で表示名変更を安全に実装する	Next.js Server Actions と Supabase 側のポリシーを組み合わせ、プロフィール表示名変更を CSRF / 権限的に安全に行う実装手順	@EkanTw	18:49
12	TerraformでVPC+EC2の環境を構築 ~~整形編~~	前回書いた Terraform コードを bastion + Web の VPC 構成に合わせて整形し、Terraform 文法学習と平行して構造化した記録	@dragonnn	22:49
13	家でねてるRaspberry PiでAWS IoTCoreで実装する第2回	Pi 3B+ から AWS IoT Core にデータが到達した状態を出発点に、IoT Core Rules エンジンで外部連携を動かす第 2 回	@plustick	20:37
14	基本情報技術者試験をRPGで攻略する無料Webアプリを個人開発した話	過去問を RPG バトル化した Web アプリ個人開発、連続正解コンボとダンジョンボスを組み合わせた継続学習設計	@rubasu	22:48
15	非エンジニア向けの継続的なウェブサービス開発手法のまとめ	非エンジニアが AI を併用して低トラフィック向け Web サービスを継続運用するための、ソース公開・コスト最適化の指針整理	@atsuto	17:59
16	Frontend Performance Part 19 — RUM でユーザー体感の遅さを可視化する	ラボ計測の限界に触れ、web-vitals ライブラリで RUM を組み LCP/INP/CLS を実ユーザー分布として集計する具体実装を示す	@tuanphan	17:59
17	モックAPIとは？開発者向けガイド	フロント側が UI・型を確定済みで API 未完成時に開発を止めない手段としてモック API を位置付け、運用パターンを整理	@mockapihub	17:58
18	Appleのような極上のスクロール体験を！GSAP ScrollSmootherの導入から実践まで	GSAP ScrollSmoother のセットアップから慣性スクロール調整までを、Apple 風の到達点を意識して数値パラメータ込みで解説	@nhatcaofedev	17:00
19	Frontend Performance Part 18 — Core Web Vitals 完全攻略：LCP・INP・CLS の実践的改善	Lighthouse 満点でも実ユーザーが遅く感じる理由を分析し、LCP・INP・CLS それぞれに対する具体的な改善打ち手をまとめる	@tuanphan	16:23
20	[手順解説] 生成AIでWebサイトを高速作成して無料公開するまで	Claude Code 等の生成 AI で Web サイトを最短で組み、無料インフラに載せて公開するまでの手順を順序立てて解説	@alpha123	23:38

ITmedia News

#	Title	Summary	Published
1	AWS、Oracle Cloudと閉域網で直結する「AWS Interconnect-multicloud」新機能をプレビュー　Google Cloudとの接続に続き	(Top 20 参照)	10:34

Cloudflare Blog

#	Title	Summary	Published
1	Project Glasswing: what Mythos showed us（Project Glasswing：Mythos Preview から見えたもの）	(Top 20 参照)	15:00

CSS-Tricks

#	Title	Summary	Published
1	Cross-Document View Transitions: The Gotchas Nobody Mentions（クロスドキュメント View Transitions の語られない落とし穴）	(Top 20 参照)	22:47