Web Dev Digest: 2026‑05‑15

Top 20

Gemini Live Agent Challenge: Announcing the winners and highlights（Gemini Live Agent Challenge: 受賞者とハイライト発表）

Source: Google Cloud Blog | Published: 2026-05-15 23:00 JST

• Google Cloud の Gemini Live Agent Challenge は 151カ国から 11,878名が参加し 1,536件のプロジェクトが応募されたコンテストで、Gemini Live API + Agent Development Kit (ADK) を使ったマルチモーダル AI エージェント構築を競った。
• グランプリは音声で外科手術を補助するボイスダイレクト型コパイロット「ORION」。
• カテゴリ別では Live Agent 部門「drone-copilot」、Creative Storyteller 部門「Sankofa」、UI Navigator 部門「Moonwalk」、マルチモーダル統合「Wand」、技術実装「JohnKeats.AI」、Innovation 部門「Rayan Memory」が受賞。
• 名誉言及には NagarDrishti、Ekaette、VibeCat、Call My Parts、Relay などが含まれる。
• Web 開発文脈としては Gemini Live API と ADK を組み合わせた実装パターンが大量に集まり、レファレンス事例として参照可能になった点が要点。

Next.js + Vercel KV + Google Places APIで作るB2B営業リストSaaSのアーキテクチャ全公開

Source: Zenn | Published: 2026-05-15 12:47 JST

• B2B 営業リスト SaaS「bacotto」（業種 × 地域で3分で100件取得）の構成を全公開。Next.js 15 App Router + TypeScript + Vercel Hobby（無料枠）+ Vercel KV (Upstash Redis) + NextAuth.js v5 + Stripe Checkout + Sentry + Resend、データ源は Google Places API + 自前 HTML クローラ、月額コストは合計 約 ¥1,500（API費用 ¥1,000–3,000 + ドメイン ¥150）。
• 検索→エンリッチの2段パイプラインで16並列の同時リクエスト処理。直列処理に比べ大幅にスループットを稼ぐ設計。
• キャッシュ層は抽象化されており KV 不在時は in-memory にフォールバック、API コストを当初見積もりの 1/4 に抑える「ネガティブキャッシュ + 階層 TTL」（Places結果14日 / 連絡先30日 / 不在データ14日）。
• SEO は 7,321 通りの組合せから「Tier × 人口ゲート」で 4,400 プログラマティックページに絞り、Vercel Cron で IndexNow を日次 ping する設計。
• 課金 Webhook はメール送信を fire-and-forget にし失敗を Stripe には伝播させず Sentry に記録、月次更新は通知メールを意図的に送らずチャーン抑制という運用判断もセットで公開。

【BigQuery Graph】BigQueryでグラフ分析ができるようになったよ

Source: Zenn | Published: 2026-05-15 18:36 JST

• BigQuery にグラフ分析機能 BigQuery Graph が追加され、ISO 標準の GQL (Graph Query Language) でノード・エッジを直接クエリ可能になった（2026年5月時点 Preview、料金は GA で変動する可能性あり）。
• データモデルは CREATE PROPERTY GRAPH でノードテーブル群とエッジテーブル群を束ね、MATCH p = (node)-[:EdgeLabel]->{1,10}(target) のようなパスマッチ構文で多対多関係を SQL JOIN より簡潔に表現できる。
• パスから要素を取り出す EDGES(p) NODES(p) 関数、可視化用に TO_JSON() でパスを JSON 化する関数が提供される。
• 制約として「ACYCLIC 指定」「無制限ホップ指定」は未サポート、Edition ベースの容量課金が必要で標準オンデマンド課金では使えない可能性がある点が Preview 段階の注意点として明示されている。
• 想定ユースケースはサプライチェーン最適化、輸送ルーティング、不正検知、顧客プロファイル分析など、従来は外部グラフ DB に出していたワークロード。

【TypeScript】値・型・名前空間の「三重定義」でReactコンポーネントをより柔軟に設計する

Source: Zenn | Published: 2026-05-15 18:39 JST

• TypeScript の Declaration Merging を活用し、同名で interface（型）・const（値）・namespace（名前空間）を共存させる「三重定義」パターンを React コンポーネント設計に応用する手法。
• 具体例: interface Item extends React.HTMLAttributes<HTMLLIElement>、namespace Item { export interface Props extends Item, React.PropsWithChildren }、const Item: React.FC<Item.Props> を同名で並べる構造で、List.Item がデータ用の型と JSX 用のコンポーネントを両立できる。
• 実装上の制約は「namespace には型のみを置く」「同名宣言は隣接させる（ファイル内で離すとコンパイルエラー）」「import * as 経由ではマージできない」の3点。
• 解決される問題はデータ駆動 API と JSX カスタマイズ API が同じ名前で提供できる点、命名の文脈切替（Item vs ItemProps）が不要になる点。
• 実プロダクトでは Yamada UI ライブラリが PR #5328 で本パターンを採用済み、と参照リンク付きで提示。

Next.js App RouterでSSRとSSGの違いが分かりにくい問題

Source: Zenn | Published: 2026-05-15 19:30 JST

• Next.js App Router はレンダリング方式を Pages Router の getServerSideProps / getStaticProps のような明示宣言ではなく、コードの実装内容から自動判定する設計に変わったため SSR/SSG の区別が見えづらくなっている、というのが本記事の論点。
• SSR（動的レンダリング）が選ばれる条件として cookies() / headers() の使用、props で searchParams を受ける、fetch(..., { cache: "no-store" })、export const dynamic = "force-dynamic" のいずれかを挙げ、これら4条件のどれか1つでも満たすと SSR 扱いになる、と一覧化。
• 逆に上記条件をどれも踏まない場合のみ SSG として静的化される。
• 制御 API としては dynamic: "force-static" で強制 SSG、export const revalidate = N で ISR、generateStaticParams でビルド時静的生成という3つを使い分ける、というマトリクスを提示。
• 結論は「迷ったら next build の出力で各ルートのレンダリング方式インジケータを実物確認して検証せよ」という運用フローを推奨。

Vite + React + Tailwind CSS v4 + shadcn/ui の環境構築手順

Source: Zenn | Published: 2026-05-15 19:28 JST

• Node v24.15.0 / pnpm 11.1.1 の組合せで Vite + React + Tailwind CSS v4 + shadcn/ui を実際に動かした検証ログ。公式ドキュメント手順は途中で詰まる箇所が複数あると指摘。
• 最大の落とし穴は shadcn/ui の pnpm dlx shadcn@latest init 実行時に pnpm のセキュリティ機能が MSW のビルドスクリプトをブロックすること。pnpm approve-builds で MSW を許可してから再実行する必要がある。
• パスエイリアスは tsconfig.json / tsconfig.app.json / vite.config.ts の3か所に重複定義する公式手順を避け、vite-tsconfig-paths プラグインで1か所に集約する手順を採用。
• --preset 付きの shadcn init を使うとプロジェクト名のネストディレクトリ（my-app/my-app）が生成される、pnpm-workspace.yaml の位置を pnpm がワークスペースルートと解釈してしまうため node_modules と lockfile が親ディレクトリに作られるなど、手作業ディレクトリ整理が必要な落とし穴も列挙。
• 動作確認はコマンド 4 ステップ（pnpm create vite@latest my-app --template react-ts → pnpm add tailwindcss @tailwindcss/vite → pnpm add -D vite-tsconfig-paths → pnpm dlx shadcn@latest init Radix + Nova 選択）で完走し、Button コンポーネントが localhost:5173 で正しく表示されることを確認。

OpenAI、サプライチェーン攻撃で従業員2人の端末が侵害

Source: ITmedia News | Published: 2026-05-15 10:56 JST

• OpenAI が 2026年5月14日に開示したサプライチェーン攻撃の被害は従業員2人の端末で、影響は npm 170 パッケージ超 + PyPI 2 パッケージに及ぶ。
• 攻撃は「Mini Shai-Hulud」サプライチェーンキャンペーン（攻撃者 TeamPCP）の一環として TanStack 関連パッケージ経由で侵入。
• 被害範囲は macOS / Windows / iOS / Android 上の OpenAI 製ソフトウェア、開発用リポジトリのクレデンシャル一部が漏えいしたが、ユーザーデータ・決済システム・自律システムは影響なしと OpenAI が確認。
• 対応として影響アカウントのリセット、セッション破棄、ブラウザキャッシュクリア、デプロイトークンの一時凍結、リポジトリ間の認証情報レビューを実施。
• macOS ユーザーは6月12日までに OpenAI デスクトップアプリ署名証明書ローテーション対応のためアプリ更新（6.12 以降）が必要と案内。

What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More（CSSの最新動向 #11: 3Dボクセル、フライングフォーカス、CSS構文ほか）

Source: CSS-Tricks | Published: 2026-05-15 22:16 JST

• Heerich.js は SVG として 3D ボクセルシーンをレンダリングし CSS でスタイルできる軽量エンジン。CSS 文化圏から 3D を扱うアプローチとして注目株。
• Polypane に「snippet store」が追加され、コンポーネント HTML スニペットをコピー可能。「1-Click De-crapulator」など実用スニペットが含まれる。
• CSS 構文では div:nth-child(2 of .intro) のような of <selector> 構文（Well-supported）、メディア/コンテナクエリの範囲構文（>, <, >=, <=）、スクロール駆動アニメーション、View Transitions による focus アニメーション、anchor positioning を使った「flying focus」テクニックを取り上げる。
• Chrome 148 で name-only コンテナクエリ（Baseline 入り）、revert-rule キーワード、at-rule() 機能クエリ、<video>/<audio> の loading 属性が追加。
• Safari 26.5 では :open 擬似クラス（Baseline）と random() 関数の更新が入ったと紹介し、Web プラットフォームの実装進度を一覧化。

Ten Data-Backed Truths Of User Experience ROI（UX ROIに関する10のデータ裏付け事実）

Source: Smashing Magazine | Published: 2026-05-15 19:00 JST

• 主張は「UX 改善は具体的に収益・継続率・成長と数値で結びつく」。1ドルの UX 投資は約100ドルのリターン、最適化された UX はコンバージョン率を最大400%改善する、と冒頭で結論。
• パフォーマンス: 1秒の遅延でコンバージョン -20%・満足度 -16%、1秒 → 3秒の遅延でバウンス率 +32%。
• 第一印象: ユーザーは約 50ミリ秒でビジュアル評価を確定し、第一印象の 94% はデザイン要因。
• フォーム/メニュー: Hick の法則。選択肢を増やすと意思決定時間が伸び、トップサイトは簡素化で 11%超のコンバージョン率。プロセス進捗の事前充填表示（例：15%）はオンボーディング完走率を 40%以上改善。
• 設計フェーズで修正するバグは公開後修正の 1/100 のコスト（IBM Systems Institute）、ユーザビリティテストは5人で問題の 約85% を発見できる（追加テストは収穫逓減）。

GitHub、デスクトップ用のCopilotアプリをテクニカルプレビューとして公開

Source: gihyo.jp | Published: 2026-05-15 18:13 JST

• GitHub が Copilot のデスクトップアプリをテクニカルプレビューで公開。GitHub Issue / PR / プロンプト / 過去セッションを起点に、コード変更からレビュー、検証、PR 作成までを1つのデスクトップアプリ内で完結できる。
• 実行モードは Interactive（ステップごと確認）、Plan（計画を先に作る）、Autopilot（停止なし実行）の3段階。Inbox ビューでセッションを All / Active / Review requests / Done に分類管理。
• エージェント機能としてリベース、レビューコメントへの返信、CI 失敗の修正、agent-merge スキルによるマージ自動化まで対応。customize-cloud-agent でクラウドエージェント環境をカスタマイズ可能。
• 既定モデルは Claude Opus 4.6、選択肢として Claude Opus 4.7、Claude Sonnet 4.6、GPT-5.3〜5.5 系統まで切替可能。
• アプリ自体は Tauri + Bun で構築、UI は Tailwind CSS + Base UI + Primer デザイントークン + TanStack。プレビュー利用は Copilot Pro/Pro+ は waitlist 経由、Business/Enterprise はアプリ配布リポジトリから直接ダウンロード。

gBizINFO API（法人情報API）の使い方と仕様

Source: Qiita | Published: 2026-05-15 16:55 JST

• gBizINFO は経済産業省が運営する法人情報 API で、13桁の法人番号で基本情報・財務・認証・許認可・受賞・特許情報を取得できる。完全無料・API キー不要で https://info.gbiz.go.jp で利用可能。
• TypeScript 実装ではベース URL https://info.gbiz.go.jp/hojin/v1 を fetch、13桁を regex 検証、同時実行数（デフォルト5）制御、タイムアウト10秒、404 検出、ページネーション対応のキーワード検索を実装。
• 主要エンドポイントは GET /hojin/{corporateNumber}、GET /hojin（検索）、/hojin/{corporateNumber}/finance、/certification など領域別。
• 国税庁の適格請求書発行事業者公表サイト API と組み合わせると登録番号の確認が可能。Promise.allSettled() でバッチ実行する実装パターンが紹介されている。
• 記事は Claude 向け pay-per-call-mcp 経由で gBizINFO を呼ぶ統合方法も示し、npm と Glama サービスから利用できると案内している。

JavaScriptのPromise.race()はタイムアウトに使えるが「裏で動き続ける」問題

Source: Qiita | Published: 2026-05-15 20:12 JST

• Promise.race([originalPromise, timeoutPromise]) は最速の Promise を返すだけで他の Promise をキャンセルしない。タイムアウト後も DNS / HTTP / ソケットなどの I/O はバックエンドで動き続け、リゾルバ枠・ファイルディスクリプタ・キューの圧迫を招くと指摘。
• fetch のキャンセルは AbortController を作って signal を渡し、finally で clearTimeout する正攻法を提示。実際の中断ができるため Promise.race とは性質が違う。
• DNS のキャンセルは dns/promises の Resolver インスタンスを使い resolver.cancel() を呼ぶ。エラーコード ECANCELLED でタイムアウト vs 実失敗を区別する。
• 一般化パターンとして withDeadline() ラッパーを提案し、呼び出し側が AbortSignal を必ず受け渡し、内部で signal.aborted を確認する設計を推奨。
• 結論: 数ミリ秒で完了する純粋メモリ処理や fire-and-forget なら Promise.race で十分だが、外部 I/O や高並列ワークロード、CPU バウンド処理（Worker Threads 推奨）では AbortSignal ベースに切替えるべき、と用途別の境界を明示。

番外編：開発技術のパラダイムシフト⑤（React・Vue・SPAの台頭）

Source: Qiita | Published: 2026-05-15 19:10 JST

• パラダイムシフトシリーズ第5回。2013年の React 登場と 2014年の Vue.js 登場を「jQuery 時代の終焉」と「SPA 時代の確定」の節目として整理。
• 仮想 DOM の動作原理（差分計算 → 実 DOM の必要箇所のみ更新）を解説し、手動 DOM 操作の限界がフレームワーク移行の原動力だったと結論。
• jQuery が直接 DOM 操作で複雑化した「スパゲッティコード」を生み、動的更新が増えるとメンテナンスできなくなった点を「歴史的役割の終了」と表現。
• SPA は「初回ロード後は API 経由でデータのみ取得」「ページリロード白画面の解消」を実現し、モバイルアプリ的な体感を Web に持ち込んだ転換点とまとめる。
• フロントエンドとバックエンドの分離（責務の独立した層への分解）が、現代のフロントエンドエンジニアという職能を成立させた、という総括で締める。

MacでAstroを導入する [個人サイト開設を目指して]

Source: Qiita | Published: 2026-05-15 19:06 JST

• Mac で Astro 導入する具体手順。前提として Homebrew が必要、node -v / npm -v で Node の状態を確認する。
• Astro が要求する Node は v22 以上。v20.12.2 は “out-of-date and unsupported” と警告されるため nvm でのバージョン管理が前提になる、と明示。
• nvm は brew install nvm 後に mkdir ~/.nvm し、.zshrc を編集（Apple Silicon と Intel でパスが異なる）、nvm install 22 && nvm use 22 && nvm alias default 22 で固定する手順。
• プロジェクト作成は npm create astro@latest で対話プロンプトに従い、cd my-site && npm run dev で http://localhost:4321/ に起動。
• 次の展開として Vercel デプロイを予定、と明記しており、個人サイト立上げ手順としては「nvm でランタイム揃え → Astro 起動 → Vercel デプロイ」というシンプル経路を提示。

[node][pnpm]node_modulesにいる”お前誰だよ”を調査する

Source: Qiita | Published: 2026-05-15 18:12 JST

• node_modules に「package.json に直接書いていないのに存在する」依存を pnpm why <pkg> でトレースする手法を解説。例：pnpm why lodash で「project → packageA → lodash」のように依存チェーンを表示できる。
• 例示として left-pad のように原因不明で混入するライブラリ、minimist のようにセキュリティ監査で引っかかるパッケージを取り上げ、依存削除を試みても他から要求されていれば残り続ける挙動を解説。
• pnpm why は npm why より出力が読みやすく、特にモノレポで複数ワークスペースを束ねている場合に有効、と利点を提示。
• 用途として「セキュリティ脆弱性評価」「パッケージ整理」「モノレポ保守」の3シナリオに当てはまる、と結論。
• 実運用上の注意として、削除しても再生成される場合は別ワークスペース側で要求している可能性が高いため、依存元を pnpm why で先に特定するワークフローを推奨。

NGINXに18年前から潜むリモートコード実行の脆弱性（CVE-2026-42945）

Source: GIGAZINE | Published: 2026-05-15 11:26 JST

• CVE-2026-42945 は NGINX Open Source 0.6.27〜1.30.0 および NGINX Plus R32〜R36 に影響するヒープバッファオーバーフロー型 RCE。修正版は OSS 1.30.1 / 1.31.0、Plus は R36 P4・R35 P2・R32 P6。
• 脆弱性は 2008 年に導入されており、約 18 年間潜伏していた。発見はセキュリティ企業 DepthFirst の自動コード解析システムが NGINX ソースコードを解析した結果で、複数のメモリ破壊を検出した一環。
• トリガ条件は「rewrite ディレクティブの後に rewrite/if/set 系のディレクティブを連ねる構成」「PCRE 無名キャプチャ（$1, $2）を疑問符付きで置換文字列に使う」設定パターン。
• 根本原因はメモリ割り当てサイズ計算と実際の文字列コピー処理の不一致で、文字エスケープによる文字列拡張を割当計算側が見落としており、ヒープ境界を越えて書き込まれる。
• 攻撃は未認証の HTTP リクエストで成立し、ASLR 無効環境では任意コード実行に直結。DepthFirst は PoC を公開済みで、運用者はパッチ適用必須。

Spotify、Appleの「HLS」対応で動画ポッドキャストのクロスプラットフォーム配信を実現へ

Source: ITmedia News | Published: 2026-05-15 11:36 JST

• Apple Podcasts が HTTP Live Streaming (HLS) をサポートし、Spotify も「Spotify Distribution API」を公開、ホスティングプラットフォーム経由で Spotify と Apple Podcasts に同時配信できる体制が整った。
• 初期対応する5つのホスティングサービスは Libsyn / Podigee / Audioboom / Audiomeans / Podspace。クリエイターはホスティング変更なしで両プラットフォームに動画ポッドキャストを配信できる。
• HLS によりリアルタイム配信、オフライン再生、ネットワーク状況に応じた適応的ビットレート切替が可能になり、動画と音声のシームレス切替を実装できる。
• Apple 側のクライアント実装は iOS 26.4 ベータからロールアウト開始、Spotify Distribution API は2026年6月からロールアウトという段階的展開。
• Web 開発文脈では Spotify が外部ホスティング向け配信 API を公開した点（プラットフォームロックインの一部後退）と、HLS が DRM/権利管理のないクロスプラットフォーム再生プロトコルとして podcast 領域に拡張された点が要点。

All Articles

Zenn

Qiita

gihyo.jp / Publickey / ITmedia / GIGAZINE

（Top 20 採用済みのため All Articles 掲載なし）