Query Speed Insights from the Vercel CLIほか — Web Dev Digest: 2026‑06‑29

Top 20

Realtime voice, speech, and transcription now supported on AI Gateway

Source: Vercel Changelog | Published: 2026-06-29 09:00 JST

• Vercel AI Gatewayに音声系3機能（リアルタイム音声・TTS・STT）が正式追加され、テキストモデルと同じルーティング／可観測性制御で扱えるβリリース。
• Realtime voice agentsは低遅延の双方向音声を1コネクションで処理し、AI SDK 7との組み合わせでマルチプロバイダ間の切替が可能。
• Text-to-speechはGoogle・Inworld・xAI・OpenAIなど複数ベンダのモデルを横断的に呼び出せ、プロバイダ毎の課金とレート制御もGateway側で実施。
• Speech-to-textはOpenAIに加えxAIのgrok-sttに対応し、文字起こし結果のレスポンス整形までGatewayが代行する設計。
• 既存テキストAPIと同じspendコントロール・ログ集約・キーフェイルオーバーが流用でき、音声利用の支出ガードもダッシュボードから一元設定可能と説明。

xAI Grok audio models now available on Vercel AI Gateway

Source: Vercel Changelog | Published: 2026-06-29 09:00 JST

• xAIの音声モデル grok-voice-think-fast-1.0 grok-tts grok-stt がVercel AI Gatewayから直接呼べるようになり、テキストモデルと同じrouterと課金統制で扱える。
• grok-voice-think-fast-1.0はリアルタイム会話用低遅延モデルで、Gatewayがプロバイダ間のフェイルオーバとレート制御を担う。
• TTS／STTはSTTがx-ai/grok-sttとして組み込まれ、AI SDKやAPIから既存テキストモデルと同じ呼び出し方で利用可。
• 既存のGrokテキスト系モデル料金体系と統合され、音声トラフィック分も同じspend cap・組織別レポートに集計される。
• AI SDK 7のreal-time voice agent機能の有力候補プロバイダとして位置付けられ、OpenAI Realtimeと並列で検証できる選択肢になる。

Query Speed Insights from the Vercel CLI

Source: Vercel Changelog | Published: 2026-06-29 17:00 JST

• vercel metricsコマンドが追加され、Web VitalsをCLI／エージェントから直接クエリ可能になりダッシュボードを開かず分析できる。
• 「直近24時間でINPが悪化したページは？」「モバイルとデスクトップでCLSは？」のような自然文相当の問い合わせをAIエージェントから自動化できる前提で設計。
• LCP / INP / CLSをルート別・国別・デバイス別に絞り込めるオプションが用意され、リグレッション特定に直結する切り口を提供。
• 出力はJSONフォーマットでCIやSlack通知に直接組み込め、Web Vitalsアラートの内製化に使えると説明。
• 既存の vercel metrics web-analytics と同じく権限はチームメンバーに紐づき、追加課金なくProjectのSpeed Insightsを購読していれば利用可能。

Build realtime voice agents on AI Gateway

Source: Vercel Blog | Published: 2026-06-29 16:00 JST

• AI Gatewayがrealtime音声をネイティブサポートし、AI SDK 7の experimental_RealtimeVoiceAgent で双方向ストリーミングを最小コードで実装可能に。
• OpenAI Realtime APIとxAIのgrok-voiceを同じインターフェースで切替でき、片方のレート制限時に自動フェイルオーバする例示コードが公開。
• 単一WebSocket接続で音声入出力＋ツール呼び出し＋スピーカー識別を扱い、ブラウザからEdge Functionまで一気通貫の経路を提示。
• TTS / STTは個別エンドポイントとして残り、長時間バッチや非対話用途では従来のチャンク方式を使い分ける構成を推奨。
• 音声のspend制御・プロバイダ別ログ・エラー再送はGatewayが集中管理し、本番投入時の運用コストを引き下げる前提と説明。

Cloudflare Flagshipを試す

Source: Zenn | Published: 2026-06-29 12:00 JST

• Cloudflareの新フィーチャーフラグサービス「Flagship」のOpen β版をGrowthBookと比較しながら試用したレポート。
• 設定画面からKVベースでフラグを定義し、Workers／Pages／外部アプリ問わずREST or SDK経由で評価できる仕組みを確認。
• ロールアウト率・属性ベースのターゲティング・A/Bテスト用バリアントが標準機能として提供され、GrowthBookと同等の機能性。
• ストレージ層がKVなのでエッジでの取得は数msオーダーで、自前GrowthBook運用で問題になりがちなSDK経由のラグが小さい点を評価。
• 現状は管理UIや監査ログ機能がGrowthBook比で薄く、本番採用には監査要件をクリアできるか要確認と結論。

Astro + Cloudflare WorkersでPictureコンポーネントを使うと522/404になる問題

Source: Zenn | Published: 2026-06-29 23:19 JST

• Astro 7 / Cloudflare WorkersでPictureコンポーネント＋ prerender = true を使うと本番で522または404が出るバグの調査記録。
• 原因は _image エンドポイントがprerender時に静的化されず、Workers側で実行時に呼び出された際にルートが解決されない構造的な不整合。
• 暫定対策として該当ページのみ prerender = false にして動的レンダリングへ寄せる、もしくは astro:assets の getImage を直接呼び出して静的化する2案を提示。
• 開発時は問題が出ず本番のみで再現するため、wrangler dev --remote での事前検証を推奨。
• Astro公式リポジトリに既知Issueがあり、修正PRはレビュー中。回避策が必要な期間は長くないと著者は予想。

状態を持てるWorkers。Cloudflare Durable Objectsを基礎から理解する

Source: Zenn | Published: 2026-06-29 10:33 JST

• Cloudflare Durable Objects（DO）の必要性を「通常のWorkersはステートレスでリージョン間で値を共有できない」前提から整理した入門記事。
• 1個のオブジェクトインスタンスが特定のWorkerリージョンに固定され、内蔵SQLite or KV的Storageで状態を持てる構造を図解。
• WebSocket・チャットルーム・カウンタなど「単一ノードで強い整合が必要なワークロード」が代表例で、Workersだけでは困難なユースケースを補完すると説明。
• idFromNameで名前ベース一意ID、getでstubを取得しRPCで呼び出すという呼び出し経路を最小コードで提示。
• 課金は呼び出しリクエスト＋durationで、alarm() APIによる定期実行も可能。Workflow／Queueとの使い分けの目安を表で示す。

Claude Code で『遅いLP』を Astro で作り直して Lighthouse 44→99 にした実装記録

Source: Zenn | Published: 2026-06-29 20:16 JST

• 既存LPをClaude Code支援でAstroに移行し、LighthouseスコアをモバイルPerformance 44→99に引き上げた実装記録。
• 旧サイトの主因はサードパーティJSの読み込み量と画像最適化欠落で、合計約350KBのJSを削減することがボトルネック解消の鍵。
• Astroの「デフォルトでJSゼロ」設計と <Image /> のWebP/AVIF出力により、LCP 4.2s → 1.1s、TBT 1300ms → 0msまで改善。
• 解析タグはPartytown化、ヘッダーアニメーションは clientLoad ではなく clientVisible で遅延ハイドレーション。
• Claude Codeには「CWVを99以上に保つこと」を制約として与え、PRごとにLighthouse CIで自動チェックさせる開発フローを採用。

Next.js App Router + Drizzle ORM + Tursoでフルスタックアプリを作った

Source: Zenn | Published: 2026-06-29 15:28 JST

• 少年サッカー指導者向けWebアプリ「ClubManager」をNext.js 16 App Router + Drizzle + Tursoで構築した個人開発記録。
• 試合中に交代・出場時間を1タップ操作する性質上、レスポンス最優先でTurso（libsql）のリージョン分散を選んだと選定理由を整理。
• DrizzleはスキーマをTypeScriptで完結させ、drizzle-kit push:sqlite をGitHub ActionsからCD連動させて運用。
• AIフィードバック生成はOpenAIに試合データを渡しSummary返却、Route Handlerでストリーミング表示してUX劣化を防止。
• Server Actions＋Drizzleの組み合わせは型安全に書ける反面、use server ブロック内でクライアント参照不能なヘルパーを誤って呼ぶ事故が起きやすく要注意と注意点を共有。

The Shifting Line Between CSS States and JavaScript Events

Source: CSS-Tricks | Published: 2026-06-29 22:03 JST

• CSSの擬似クラス・カスタム状態が拡張され、これまでJSイベントで管理していたUI状態の一部をCSSのみで制御可能になった現状を整理。
• :has() や :state()（カスタムステート）、@starting-style、interpolate-size などの組合せでスクリプト無しの状態遷移パターンが現実的になったと指摘。
• 「クリックでメニュー開閉」のようなクラシックなインタラクションでも、<details> ＋ ::details-content ＋ View Transitionで宣言的に書ける例を提示。
• これによりJS側は「状態変更の起点（ユーザー入力）」と「外部システムとの同期」に役割を絞れる一方、設計上アクセシビリティ確保のためARIA状態同期は依然必要と注意。
• ブラウザ実装状況の差で本番投入には機能検出が必須で、@supports selector(:state(active)) のような書き方を提示。

Amazon S3 server access logs now deliver to Amazon CloudWatch Logs and Amazon S3 Tables

Source: AWS What’s New | Published: 2026-06-29 13:00 JST

• S3サーバアクセスログがAmazon CloudWatch LogsおよびApache Iceberg形式のS3 Tablesへ直接配信できるようになり、即時クエリやアラーム設定が可能に。
• CloudWatch Logsへの配信はクロスアカウント／クロスリージョン集約とKMS暗号化に対応し、エラーレートや異常アクセスをアラートで検出できる。
• S3 TablesへのミラーはIceberg形式で追加ストレージコストなしで保存され、Athena・Redshiftなど互換エンジンから標準SQLで監査可能。
• 既存の「S3汎用バケットへの無料配信」と併存し、運用要件に応じて配信先を選択可能。多経路化により監視粒度を上げやすくなる。
• 提供範囲は中国／GovCloud（US）リージョンを除く全AWSリージョンで、追加サブスクリプション不要で利用開始できると説明。

Zod入門 — TypeScriptで型とバリデーションを一致させるスキーマ検証

Source: Qiita | Published: 2026-06-29 22:20 JST

• TypeScriptの型はコンパイル時で消えるため、フォーム入力やAPIレスポンスなど実行時データはバリデーション必須という前提から始める入門。
• Zodのスキーマ1つで「型推論」「実行時検証」「エラーメッセージ生成」の3つを同時に賄える点を中心に整理。
• z.object({ ... }).safeParse(data) の返り値ユニオン型による分岐パターン、z.infer<typeof Schema> でのstaticな型抽出を実例で提示。
• z.string().email() z.number().int().min(0) などのrefinementをチェイン記述でき、API境界での「契約による設計」に近い書き方になると整理。
• 二重管理（型定義とバリデーションスキーマ）の解消で型ドリフトを防げる効果が大きく、フロントエンドのフォーム実装で特に効くと結論。

マルチテナントSaaSのテナント分離を「迷ったら拒否」で組む

Source: Qiita | Published: 2026-06-29 13:26 JST

• マルチテナントSaaSで最も致命的な「テナントAがテナントBデータを見る事故」を防ぐ設計指針を「迷ったら拒否」型で整理。
• 全クエリにtenant_idを必須化し、ORM層のミドルウェアで自動付与・付与漏れは例外送出するパターンを推奨。
• PostgreSQL Row Level Security（RLS）でDB側にも二重ガードを掛け、アプリ層のバグで漏れても拒否できる多層構造を提示。
• 認可判定で参照テナントがリクエスト元と一致しない場合は問答無用で403／404を返す方針で、UI側でも「テナント切替」時の状態リセットを必須化。
• 監査ログでtenant_idクロスアクセスの試行を可視化し、想定外パターン検出時はリリース停止・全権限再点検に直結させる運用フローを推奨。

Cloudflareの個人アカウントを作成して、最初に確認したアカウント設定まわり

Source: Qiita | Published: 2026-06-29 20:18 JST

• Cloudflareの個人アカウント作成直後に確認すべき設定項目を「最初に詰まりがちな順」で整理。
• Account Membersはひとり開発でもAdmin単独運用は避け、サブアカウント or 2要素強制ロールを別途用意することを推奨。
• 2FAはTOTPアプリ＋WebAuthn物理キーの併用が安全で、リカバリコードはオフライン保管必須。
• Usage Notification（請求アラート）はWorkers／R2／D1などサービス別に閾値を設定し、想定外請求を早期検知できる構成を提示。
• API Token は最小スコープで発行する原則を強調し、Account global APIキーは避けるべきと結論。

個人開発 SaaS の AWS / Azure / GCP 移行計画 — Netlify + Supabase からのポータブル設計

Source: Qiita | Published: 2026-06-29 22:58 JST

• Netlify + Supabaseで運用する個人開発SaaSを将来AWS／Azure／GCPに移植可能な「ポータブル設計」に変える検討記録。
• アプリ層はNext.jsの標準API構成に寄せ、Netlify固有機能（Edge Functions、Form Handling）への依存を最小化する方針。
• DBはSupabase（PostgreSQL）の独自RPC／Realtimeを避け、純粋なSQL＋認証ライブラリ抽象化レイヤを通すことで移行容易性を確保。
• 認証はAuth.js / Lucia等の中立ライブラリへ寄せ、Supabase Authを直接Componentから呼ばない設計に変更すると述べる。
• ストレージはS3互換APIだけを使う前提でR2・GCS・Azure Blob間を切替可能とし、ベンダー固有のSDK呼び出しを避けると整理。

GoやJavaはライブラリの中まで読めるのに、VueやReactはなぜ型定義に飛びがちなのか

Source: Qiita | Published: 2026-06-29 23:15 JST

• VS Codeの「定義へ移動」で、GoやJavaはライブラリ実装まで辿れるのに、VueやReactは .d.ts で止まる現象の理由を解説。
• TypeScript／JavaScriptの公開パッケージは多くがpre-bundled JS＋型定義（.d.ts）のみを同梱し、ソースは含まれないのが原因と説明。
• 一方Goは標準で全ソース同梱、Javaは sources.jar 追加でフル参照可能になる仕様の差を比較。
• 解決策として @types/... パッケージのソースを別途cloneする、もしくはコード補完で Go to Type Definition を活用する手順を提示。
• VS Codeの拡張機能「Source Code Navigator for JS/TS」のような実験的拡張で改善する道もあると言及。

All Articles

Zenn

Qiita

Publickey / gihyo.jp / GIGAZINE / ITmedia News

TypeScript Blog, Node.js Blog, Astro Blog, Cloudflare Blog, Vercel Changelog, AWS What’s New, Google Cloud Blog, Supabase Blog, web.dev, Mozilla Hacks, CSS-Tricks, Smashing Magazine, Hacker News