TODAY’S ISSUE 2026年6月25日 · 木曜日 WEB FRONTLINE

Web Dev Digest: 2026‑06‑25

2026年6月25日

Top 20

AI SDK 7

Source: Vercel | Published: 2026-06-25 09:00 JST

VercelがAI SDK 7をリリースし、エージェント開発に必要なreasoning制御・tool context・ファイルアップロード・MCP Apps対応を一括で揃えた構成にした
本番運用向け機能としてdurability（durable execution）・人手承認（approvals）・包括的なobservabilityを標準搭載し、長時間ジョブの中断再開を前提化
Node.js 22以上とESM importを必須化する破壊的変更を伴い、既存プロジェクトは公式のマイグレーションガイドに沿った書き換えが必要
harness統合とobservability upgradesにより、エージェント実行のステップトレース・コスト・失敗箇所をダッシュボードで追跡可能
ChangelogでもNode 22+/ESMの要件と互換性ノートが明示されており、Pages Functions/Fluid compute上での運用パターンも合わせて提示

AI SDK 7 is now available

Source: Vercel | Published: 2026-06-25 09:00 JST

AI SDK 7のChangelog本体で、Node.js 22+とESM importを最低要件として明文化し、CommonJS環境からの直接アップグレードを禁じた
エージェント開発向けにreasoning制御API・tool context受け渡し・MCP App接続・file uploadプリミティブが追加され、SDK単体でマルチステップ実行が完結
本番特性としてdurable run・approval gate・retry/resume・OpenTelemetryベースのobservabilityをデフォルトで有効化
既存v6プロジェクト向けにcodemodと差分パターン集を公開し、tool定義・streaming APIの破壊的変更箇所を具体的に列挙
Vercel Harness（Vercel Workflows含む）との統合により、Fluid compute上でのエージェント実行コストとレイテンシをトレース可能に

AWS Lambda MicroVMs登場。サーバレスの手軽さでステートフルかつ隔離された実行環境を提供

Source: Publickey | Published: 2026-06-25 00:40 JST

AWSがLambda MicroVMsを発表し、従来Lambdaにはなかった「一時的なステートフル実行環境」を強い分離境界（MicroVM）の中で提供する新形態とした
Firecracker系のMicroVM上にユーザーコードを置くことで、コードだけでなくファイルシステム・プロセス状態を1回のリクエスト内で保持しつつ、関数のスケール特性は維持
AIエージェントやコードインタプリタなど「一時的に状態を持つ隔離サンドボックス」を必要とするワークロードを公式パターン化する狙い
同時に従来Lambdaのコールドスタート/サンドボックス制約に縛られていた重い言語ランタイム・大きな依存関係も載せやすくなる
料金体系・対応リージョン・GA時期は段階的開示で、AWS Summit/re:Invent方向への布石として位置付け

How we built saga rollbacks for Cloudflare Workflows

Source: Cloudflare Blog | Published: 2026-06-25 22:00 JST

Cloudflare Workflowsにsagaパターンのrollbackが追加され、マルチステップの分散ワークフローで失敗時に逆順の補償処理を自動実行できるようになった
各stepに compensate ハンドラを宣言する方式を採用し、ステップ成功時に補償をスタックへ積み、失敗時にスタックを巻き戻すRuntime挙動として実装
Durable Object上のステート機械として動かしているため、補償処理自体もリトライ・冪等・durable execution保証を継承
既存のWorkflow APIに後方互換で乗せた追加プリミティブで、既存ワークフローも compensate を足すだけで段階導入可能
DBトランザクションでまとめられない外部API呼び出し（決済・在庫・サードパーティ）を持つユースケース向けに公式パターンとして提示

Gemini を Claude の「サブエージェント」に —— 大規模開発でコストを実測

Source: Zenn | Published: 2026-06-25 13:03 JST

Google Cloud Japanの著者がClaude Codeを指揮役、Geminiを実作業役にするハイブリッド構成を「Antigravity for Claude Code」プラグインとして実装しコストを実測
Cloud Run上のゲートウェイ経由でモデルを切り替える設計にし、コード変更の見立てやレビューはClaude、長文生成・大量ファイル処理はGeminiに割り振った
大規模リポジトリでの実コスト比較を行い、Claude単独構成より総トークン課金が下がる条件をプラグイン利用ログから特定
Claude Code Pluginとして配布することで、既存Claude Codeユーザーが設定変更だけでサブエージェント化を有効化できる
Geminiの長コンテキストとClaudeの指示追従性を「役割で分ける」前提のアーキテクチャで、シングルモデルでの長コンテキスト課金回避が主な節約源

ts-node不要！Node.jsでTypeScriptを直接実行する実践ガイド

Source: Zenn | Published: 2026-06-25 18:50 JST

Node.js 23.6以降に組み込まれたType Stripping機能で、ts-node・tsx・swcといった外部トランスパイラを介さずに .ts ファイルを直接実行できるようになった
著者は --experimental-strip-types から --experimental-transform-types への移行手順、.mts 拡張の取り扱い、ESM/CJS境界での注意点を実コードで提示
型情報の剥がしのみで型チェックは行わないため、CIに tsc --noEmit を別工程として残すべきという運用上の注意を明示
起動オーバーヘッドがts-nodeより小さく、CLIスクリプトや小規模Lambdaでの実行時間短縮事例を計測値付きで提示
Decoratorsや一部の enum 構文には現時点で未対応のものがあり、ライブラリ依存のコード移行は完全互換ではない点を警告

エージェントの実行を隔離環境に追い出すOpenAIのSandbox Agents

Source: Zenn | Published: 2026-06-25 13:48 JST

OpenAI Agents SDKにSandbox Agentsが追加され、エージェントが生成・実行するコードを呼び出し元プロセスから切り離された隔離環境で動かす運用が公式パターン化された
TypeScript/JavaScriptホストプロセスからWebAssembly/コンテナ系のsandboxへタスクをoffloadし、ファイルシステム・ネットワーク権限をsandbox側で細かくpermissioningできる
これまで自前でDockerやFirecrackerでラップしていた「LLMが書いたコードを安全に走らせる」用途をSDK標準APIで吸収
sandbox内のstdout/stderr/結果オブジェクトはSDK経由でホストにストリームバックされるため、既存のAgentトレースAPIとそのまま接続可能
既存OpenAI Agents SDKの tool 抽象との互換が維持され、sandbox: true 相当のフラグ追加だけで既存agentを切り替え可能

Zustand入門 — シンプルなReact状態管理をReduxやContextと比べて理解する

Source: Qiita | Published: 2026-06-25 21:10 JST

Reactのアプリ全体共有state（ログイン情報・テーマ・モーダル制御など）を題材に、Zustand・Redux Toolkit・Context APIをコード比較した
ZustandはStore宣言が create((set) => ...) だけで完結し、Providerラッピング不要・selector経由で再レンダリング範囲を絞れる点を実装例で示した
Reduxと違いaction/reducerを明示せず関数で直接書けるため、ボイラープレートが大幅に減るが、devtools連携は別途middlewareが必要
Context APIは「値が変わると配下が全部再レンダリング」の問題で大規模化に弱く、Zustandのselectorパターンで回避できると結論
Persist middlewareでlocalStorageへのスナップショット保存も数行で書け、フォーム下書きや認証情報の保持で実用的

自分のサーバで動く「覚えてるAI」をTiDBで作る

Source: Zenn | Published: 2026-06-25 21:29 JST

個人サーバ上でMarkdown形式の長期記憶を持つAIアシスタントを構築し、ベクトル類似検索ストアとしてTiDB Cloudを採用した実装記録
TiDBの組み込みベクトルカラムにembeddingを格納することで、Postgres+pgvectorのような構成より運用コンポーネントを削減
Markdownのチャンク戦略を「見出し単位」「段落単位」で比較し、リコール精度と検索速度のトレードオフを実測
TiDBのHTAP特性を活用し、原文の構造化メタデータと埋め込み類似検索を1クエリでJOINできた点をメリットとして強調
ローカルLLMをホストする場合のメモリ要件と、TiDB Cloudのfree tier制約による埋め込み次元の制限が実運用上のボトルネックと指摘

Next.js パフォーマンス改善の実践ガイド【2026年版・Core Web Vitals対応】

Source: Qiita | Published: 2026-06-25 22:54 JST

2026年時点のCore Web Vitals（LCP・INP・CLS）目標値と、Next.js App Routerにおける具体的な改善レシピをまとめた実践ガイド
LCP対策として next/image の priority 指定・preloadヘッダ・font subsetting、INP対策にServer Components優先と useTransition を提示
App RouterのRoute Segment Configで dynamic = 'force-static' / revalidate を使い分け、初期HTMLの応答時間とCDNキャッシュ率を両立
Suspense境界をユーザー入力の近くに置くことで、INPで計測される入力遅延の分母を意図的に切り分ける設計手法を提案
著者注記でAI（Claude）支援による執筆と明示し、コードサンプルは独自検証推奨と明記

Next.js standalone build で ENOENT 500 — outputFileTracingIncludes を忘れた罠と回避策

Source: Qiita | Published: 2026-06-25 21:12 JST

Next.js output: 'standalone' ビルドで本番のみ500 ENOENTが発生し、原因は next.config.js の outputFileTracingIncludes で必要ファイルを宣言していなかったことだったと特定
File traceは依存関係グラフからしか参照ファイルを推測しないため、動的 fs.readFile や path.join(__dirname, ...) 経由で読むテンプレ・スキーマファイルが standalone ディレクトリに含まれなくなる
解決として experimental.outputFileTracingIncludes = { '/api/route': ['./prompts/**/*.md'] } のようにルート別に明示する設定例を提示
Docker multi-stage buildで node_modules を絞っている場合に再現しやすく、ローカル next start では再現しないため本番デプロイで初めて発覚するワークフロー的な落とし穴
副次的にPrismaやSharpのバイナリ取り込みでも同じパターンが発生し、それぞれ専用キーで包含指定すべきと注意

Next.js でCSVを保存しない明細チェックツールを作ったときの実装メモ

Source: Qiita | Published: 2026-06-25 23:16 JST

freee会計向けにアップロード前のクレジット明細CSVを「サーバに保存しないまま」検証するNext.jsアプリを公開し、その実装ノートをまとめた
クライアント側でCSVをパースし、検証ロジックはWeb Worker内で実行するため、サーバへのアップロードもログ残存も発生しない設計
大容量CSVに対する papaparse のstreamingモードの使い方と、Workerメッセージ往復のオーバーヘッドを抑える行バッファ実装を共有
Validationスキーマは zod で記述し、列名揺れ吸収・通貨フォーマット正規化・freee API側の必須項目チェックをすべてフロント完結で実行
データを送らない方針上、Vercelには静的ビルドのみデプロイし、API Routesはゼロという構成

NestJS + Prismaで一意制約エラーを409 Conflictとして返す

Source: Qiita | Published: 2026-06-25 20:59 JST

NestJSアプリでPrismaの一意制約違反（P2002）が500 Internal Server Errorになっていた問題を、HTTP 409 Conflictへ正しくマッピングする実装手順を提示
グローバルExceptionFilterを Prisma.PrismaClientKnownRequestError だけ拾うようにし、code === 'P2002' 時に ConflictException をthrowする方式
error.meta.target を使ってどの一意制約に違反したか（メールアドレス重複かユーザー名重複か）をレスポンスに含め、フロント側でフィールド単位のエラー表示を可能に
既存のValidationPipeによる400 Bad Requestの責務（入力形式エラー）と、409（既存リソース衝突）の責務分離が明確化される
同パターンは外部キー違反（P2003）にも応用でき、UnprocessableEntityException(422)としてサンプル化

インフラ初心者がEventBridgeとLambdaで「汎用ジョブ実行基盤」を作ってみた

Source: Zenn | Published: 2026-06-25 18:38 JST

物流SaaS開発企業のインフラ初心者エンジニアが、EventBridge Schedulerと汎用Lambdaを組み合わせた「ジョブ名＋パラメータで何でも動かす」基盤を構築した経験を公開
EventBridge Schedulerの Target を1つの汎用Lambdaに固定し、scheduleごとに渡す Input JSONで実行ジョブ種別を切り替える設計
ジョブ実装はLambda内のジョブ名→ハンドラのマップで配線し、新ジョブ追加はコード追加のみでIaC変更が不要
失敗時の再送はDLQ（SQS）→ 再投入Lambdaに任せ、リトライ回数を EventBridge.RetryPolicy ではなくSQS側で管理することで観測しやすくした
当初検討したStep FunctionsはYAML化されたワークフロー定義がジョブごとに必要で運用コストが高いと判断し棄却

translateZ()

Source: CSS-Tricks | Published: 2026-06-25 22:18 JST

CSS-Tricks Almanacに translateZ() の解説が新規追加され、transform: translateZ() が要素を視点に対し前後（Z軸）に動かす関数であることを基準化された記法で整理
効果が現れるのは祖先要素に transform-style: preserve-3d と perspective が設定されている場合のみで、これがないと視覚的に何も起こらないと明示
translateZ(0) を「GPU合成レイヤ昇格」のハックとして使う旧来の習慣に対し、現在は will-change: transform 推奨と注意書き
ブラウザ互換は主要ブラウザ全対応で、長さ単位（px、em、vh）は受け付けるが % は受け付けないという仕様差を例示
perspective(...) との連携で奥行きを与えるシンプルなデモコードを掲載

translateY()

Source: CSS-Tricks | Published: 2026-06-25 22:17 JST

translateY() ページが新規公開され、要素を垂直方向にずらすだけのシンプルな関数だが、top/margin-top と比較してレイアウトを発生させない（compositor-only）点を強調
値は <length> と <percentage> を受け付け、% は要素自身の高さに対する比率である挙動を例示
transition や @keyframes で transform: translateY(...) をアニメーションさせるとGPU合成され、jankが起きにくい
旧式ブラウザ互換のため -webkit- prefix が必要だった時代の名残について簡潔に整理
同等の機能をもつ translate プロパティ（個別軸版）との使い分けの指針を提示

translateX()

Source: CSS-Tricks | Published: 2026-06-25 22:16 JST

水平方向に要素を移動させる translateX() の正式ページが追加され、<length>/<percentage> の両方を受けることや % が自身の幅基準で評価される点を整理
カルーセル・ドロワー・スライドメニューなど横スライドUIの実装基盤として位置付け、left 変更による再レイアウトを避けられると強調
transition: transform .3s ease と組み合わせる定番パターンの最小コードと、will-change: transform の正しい使い方を併記
RTLレイアウトでも translateX() は方向反転しないため、logical property ベースの代替（translate プロパティで block/inline 軸を使う）を案内
transform プロパティ全体に他関数（rotate, scale）と並べて書く際の評価順についても触れる

translate()

Source: CSS-Tricks | Published: 2026-06-25 22:15 JST

2次元平面でX/Yを同時にずらす translate(x, y) のページが新規公開され、2引数目省略時はYが0として扱われる仕様を明示
transform: translate(...) と新しいCSS translate プロパティの違い（複数 transform 関数の合成可否・アニメーションの個別操作可否）を比較
<length> と <percentage> の混在を許す入力仕様や、% がそれぞれ自要素の幅・高さ基準で評価される挙動を例示
ScrollリアクションUIで translate(0, calc(...)) を requestAnimationFrame なしで滑らかに動かせる根拠を解説
純CSSの view-timeline ・スクロール駆動アニメーションでも本関数が主要なアウトプットになると展望

All Articles

Zenn

#	Title	Summary	Author	Published
1	チーム開発記録21：データ取得の並列化とリリース準備	コミュニティポータルサイト開発で `Promise.all` による並列データ取得導入と10/5リリースに向けたスコープ調整・レビュアー体制整備の進捗メモ	@シンラボ	23:27
2	10年間、気ままに開発を続けていたデータ管理サーバーをそろそろ供養してやろうと思う	「設定ファイルでテーブル定義すれば一覧・登録・更新・削除画面が自動生成されるノーコードDB管理ツール」を年1ヶ月ペースで10年続けた結果としての構成変遷と引退判断	@しょるい工房	19:16
3	AWS Summit Japan 2026 1日目参加レポート	海浜幕張駅から幕張メッセまでの動線・混雑状況や初参加者向け実用情報を中心に、現地で聞けたAWSアップデート速報を整理	@おり	21:26
4	コーダーからフロントエンドエンジニアへ #0-1｜序章：これは「アプリ開発者になるまでのストーリー」	HTML/CSSは書けるが動的UIで詰まる「コーダー」がReact/Next.jsを経てフロントエンドエンジニアに移行するための連載序章	@Hiro｜AI x Frontend Engineer	21:58
5	週刊Cloudflare - 2026/06/21週	6/14-6/20分のCloudflareアップデートで、Wrangler 4.101.0で `autoconfig` がexperimentalからstableに昇格した点が最大トピック	@あさひ	17:01
6	「関心の分離」で極限までシンプルにするポートフォリオ設計論	Todoとメモアプリを題材に、UI・state・ビジネスロジックを物理的に分けてポートフォリオを読み解きやすくする設計の最小公倍数	@＆U	17:38
7	技術ブログ・ポートフォリオ向け設計アーキテクチャ	ポートフォリオ系アプリ向けに「画面・状態・ドメイン」を3層で分割し、変更頻度の違いに合わせてフォルダ構成を割るパターン集	@synaprise	13:16
8	自然言語入力でスキルナレッジベースを作る: TiDB Cloudで人材プロフィール登録・検索基盤を作った	入力フォームを廃しチャット対話で人材プロフィールを登録、TiDB Cloudのベクトル検索で「Reactできる人を探して」のような自然文検索を実現するPoC	@como	10:00

Qiita

#	Title	Summary	Author	Published
1	「‘TodoType’ is a type and must be imported using a type-only import when ‘verbatimModuleSyntax’ is enabled.」のエラーが出た	`verbatimModuleSyntax: true` 環境で型を値importしてしまった際のエラー再現と、`import type` への書き換えで解消する手順	@hiroshi_buildup	23:25
2	AIにテスト書かせて満足してない？カバレッジを「測る」だけで、抜けが全部見える	AI生成テストの「網羅率錯覚」を、Vitest/Jestの行・分岐カバレッジを実測することで可視化する診断アプローチ	@Iro_Botter	22:19
3	Node.jsでGSC自動化	Google Search Console REST APIをNode.jsから直接叩き、サイトマップ送信・URL検査のWeb UI作業を完全に置き換える運用スクリプト	@equaliA	22:43
4	[Vue] コンポーネントスロット	propsでは渡しにくい「テンプレート断片」をslot/named slot/scoped slotで親→子に渡すパターンを最小コードで比較	@sasuke_sss	19:11
5	Googleスライドで「流れる矢印」を作る方法【無料ツールを作った】	Googleスライドに不足する「流れる矢印」アニメをブラウザ完結で生成する透過GIF作成ツールを著者が公開	@yuAbe	18:44
6	Shadcn Forms for Better Accessibility and UX（Shadcn UIで作るアクセシブルでUX重視のフォーム）	shadcn/uiの `Form` 周辺コンポーネントを使い、aria属性・エラー導線・キーボード操作を欠かさず実装するための手順	@wrappixel	16:31
7	次世代WordPressはAstro製CMS？CloudflareのEmDashとは	Cloudflareが進める「Astroベースの新しいCMS基盤」EmDashを取り上げ、ヘッドレスCMSとAstro Content Layerとの位置関係を整理	@kinopy513	11:00
8	第二章　自律型AIエージェントの「思考・行動ループ（Agentic Loop）」	自律エージェントを駆動するObserve→Reason→Act→Reviewループの最小実装と、各ステップの責務切り分け	@0903osa	21:47
9	Tauri + Three.jsで3D地形ビューアを作る⑩：完成コードとまとめ	TauriデスクトップアプリにVue+TypeScript+Three.jsで3D地形ビューアを実装した連載最終回。視点リセットUIを追加	@t_tanno	10:51
10	WebRTC Signaling Server最適化（Node.js + SQLite）	リアルタイム通話プラットフォーム用のSignalingサーバを、Node.js+SQLite構成でレイテンシを下げる実装ノート	@chattv	17:47
11	Firebase CLI ログインがNode.jsバージョン依存で詰む	`firebase login` と `gcloud auth` がNode.jsのバージョン要件で衝突するときの切り分けと再ログイン手順	@ShuMASUI	13:14
12	Supabaseの Deno Edge Function で Apple App Attest を検証しようとして壁にぶつかった話（そして Firebase App Check に逃げた）	Supabase Edge Functions(Deno)で Apple App Attest の証明書チェーン検証に必要なCrypto APIが揃わず、最終的にFirebase App Checkへ切り替えた経緯	@christhemart	09:51
13	AIChatAgent は会話ブランチの後付け実装と相性が悪い	`@cloudflare/ai-chat 0.8.6` のAIChatAgentに会話ブランチ（履歴分岐）を後付けすると、Stateの直列前提と衝突して破綻するパターンを共有	@pikum99	21:20
14	kintone上でwebformを作ってcloudflareで公開するシステムをOSSにしました	kintoneアプリ定義から外部公開フォームを生成しCloudflare Pages/Workersで配信するOSSを公開	@pons-info	17:38
15	CloudflareフルスタックでChatGPTクローンを作ったらここで詰まった――認証とWebSocket認証の現実	Cloudflare Pages+Workers+Durable ObjectsでChatGPTクローンを作る際、WebSocketアップグレード前の認証をどう保証するかの実装パターン	@pikum99	14:38
16	Zero-PII Architecture 実装の現実 — 個人情報を持たない LLM ゲートウェイで「誰がいくら使ったか」をどう答えるか	Cloudflare Workers上のLLMゲートウェイで個人情報を保持せず、社員別利用量をハッシュ化IDで集計する設計の妥協点と監査対応	@BEKI	13:02
17	Reactで音声解析値を毎フレーム扱うならstateよりrefが向いていた話	`setState` を毎フレーム呼ぶと再レンダリングコストが支配的になるため、Web Audioの解析値は `useRef` でcanvasに直接書き出す設計に倒した実装記	@7g3	09:20
18	CSS 詳細度の計算機を作る — (a,b,c) の数え方と、多くの自作実装が間違える :is() / :where()	CSS Specificityの (a,b,c) 算出を `:is()` `:where()` `:has()` の特殊ルールまで含めて正しく行う計算機を実装。多くのOSS実装が間違うエッジケースを列挙	@sen-ltd	08:14

Publickey

対象日の該当記事はすべて Top 20 に掲載されています。

gihyo.jp

2026-06-25 付の記事はありませんでした。

GIGAZINE

2026-06-25 付の記事はありませんでした。

ITmedia News

2026-06-25 付の記事はありませんでした。

TypeScript Blog

2026-06-25 付の記事はありませんでした。

Node.js Blog

2026-06-25 付の記事はありませんでした。

Astro Blog

2026-06-25 付の記事はありませんでした。

Cloudflare Blog

対象日の該当記事はすべて Top 20 に掲載されています。

Vercel Changelog

対象日の該当記事はすべて Top 20 に掲載されています。

AWS What’s New

2026-06-25 付の記事はありませんでした。

Google Cloud Blog

2026-06-25 付の記事はありませんでした。

Supabase Blog

2026-06-25 付の記事はありませんでした。

web.dev

2026-06-25 付の記事はありませんでした。

Mozilla Hacks

2026-06-25 付の記事はありませんでした。

CSS-Tricks

対象日の該当記事はすべて Top 20 に掲載されています。

Smashing Magazine

2026-06-25 付の記事はありませんでした。

Hacker News

2026-06-25 付の記事はありませんでした。