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

Web Dev Digest: 2026‑06‑15

2026年6月15日

Top 20

Vercel Functions can now run up to 30 minutes

Source: Vercel Changelog | Published: 2026-06-15 23:00 JST

Node.js / Python ランタイムで Vercel Functions の最大実行時間が 800 秒から 30 分（1800 秒）に拡張され、Pro / Enterprise 向けに提供開始
想定ユースケースは長尺 LLM 推論とツール呼び出し、ドキュメント処理、OCR、Web スクレイピング、複雑なワークフロー
Fluid Compute が前提で、I/O 待機中は CPU を一時停止して課金対象から外すことでコスト効率を維持
設定は Next.js のルートファイルで maxDuration を指定、他フレームワークは vercel.json で指定する
800 秒超の Duration は現時点ではベータ扱いで、Fluid Compute の有効化が必須

Auth0 joins the Vercel Marketplace

Source: Vercel Changelog | Published: 2026-06-15 13:00 JST

Auth0 がネイティブ統合として Vercel Marketplace に追加され、数クリックで本番運用可能な認証を Vercel アプリに組み込めるようになった
Vercel プロジェクトに Auth0 アプリケーションが自動プロビジョニングされ、Next.js SDK が即座に利用可能
ホスティング型ダッシュボード、セッション管理、ロールベースアクセス制御をパッケージで提供
設定値は Development / Preview / Production 環境変数として自動同期され、手動コピーが不要
Marketplace から Auth0 用 Next.js スターターテンプレートを直接展開して即着手できる

Growing the Cloudflare AI team with talent from Ensemble AI

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

2023 年サンフランシスコ設立の Ensemble AI のキーメンバーが Cloudflare に合流し Workers AI 強化に充たる
Ensemble は大規模 AI モデルを「品質を落とさずに高速・小型・低コストに提供する」課題に特化したスタートアップ
代表的な貢献である NdLinear は Transformer の標準 Linear 層のドロップイン代替で多次元データを扱いつつ計算量を削減する
合流後の Cloudflare Workers AI ではモデル圧縮と効率推論技術の実装にフォーカスする
GPU 利用率改善とグローバルインフラ上での LLM サービングコスト圧縮が当面のゴールとして掲げられている

React × Tailwind CSS 実践 #12｜カルーセル／スライダーを実装する

Source: Zenn | Published: 2026-06-15 19:25 JST

外部ライブラリ非依存で React + TypeScript + Tailwind だけでアクセシブルなカルーセルを構築する実装記事
現在表示中のスライド番号を useState で持ち、画像を横並びにして translateX で見せる構造に分解する
useState / useEffect / useRef の役割分担を明示し、useRef は clearInterval 用に interval ID を保持
自動再生は 4 秒間隔で、mouseEnter と onFocus で停止し、ループは (index + total) % total で実装
role="region"、aria-roledescription、aria-current、focus-visible:ring-2 でキーボード／SR 対応を担保する

個人開発のAIツールにStripe決済フローを実装してみた（コードより『日本でカード決済を受ける手続き』が大変だった）

Source: Zenn | Published: 2026-06-15 21:45 JST

結論として「コードを書く時間より日本でカード決済を受ける手続きの方が圧倒的に長かった」と総括している
読書メモを SNS 投稿に変換するツールで Claude Haiku 4.5 利用、1 回約 1 円（in 900tok / out 1000tok）、月 500 円プランは月 500 回でブレークイーブン
検証は Stripe API で payment_status === "paid" を確認、HMAC 署名 Cookie で改ざんを防止、AI コードレビューが OR/AND の論理ミスを検出して無料突破バグを未然に防止
日本でカード決済を扱うには「セキュリティ対策措置状況申告書」の提出が必要で、Dependabot を導入して申告と実態を一致させた
構成は Next.js + Stripe Payment Links + 最小限の認証、DB なしで Pro ステータスは端末 Cookie 紐づけと割り切ったMVP設計

AIエージェント（Claude Code）に家計簿アプリを1日でアップデートさせた記録

Source: Zenn | Published: 2026-06-15 21:57 JST

Claude Code で複式簿記家計簿アプリの実装・Playwright 検証・スクショ取得まで自律実行し 1 日で本番アップデートを完了
プリセット機能はテスト時に動いて見えたが本番でログインユーザの DynamoDB API 経由データに反映されず、「データ経路の人間チェック」が不可欠と結論
本番デプロイ前に grep -rl "DEV_API_ID" dist/assets で本番 API キーが埋め込まれ開発キーが入っていない事を機械的検証
Windows では Bash と PowerShell で ~/.aws トークンキャッシュが分離する罠があり、CLI 実行と同じシェルで認証する必要がある
メール送信失敗の原因は Amazon SES のサンドボックス解除申請が却下されたインフラ側で、アプリ実装は無実だった

【Laravel→TS移行】ESMとCJS／tsxとtsc／ECMAScript 〜混乱しやすい単語を整理する〜

Source: Zenn | Published: 2026-06-15 09:50 JST

tsx は esbuild ベースで型を完全無視して高速実行、tsc は型検査専用で PHPStan に近い役割と整理
CommonJS は Node.js が 2009 年に導入した同期 require 方式、ESM は 2015 年標準化で import を使い静的解析とツリーシェイキングに対応する
ECMAScript は Ecma International が管理する仕様で JavaScript はその実装、Oracle の商標所有が呼称分離の要因
ESM では TS で書いていても import 文に ./greet.js のように .js 拡張子を明示する必要がある
ECMAScript には console / fs などは含まれず、Node.js API を使うには @types/node 導入と tsconfig 設定が必要

Next.js セキュリティ徹底ガイド — 初心者がフロントエンドで押さえるべき10の境界

Source: Qiita | Published: 2026-06-15 20:28 JST

Next.js のセキュリティは「データが文脈をまたぐ境界（trust boundary）」を 10 個列挙して整理する設計指針を提案
NEXT_PUBLIC_ プレフィックス変数はビルド時にブラウザ JS に埋め込まれ「漏洩」ではなく「公開」になる点に注意
Server → Client の Props は HTML/JS 経由で送信されるため Zod スキーマで内部 ID やロール情報の混入を防ぐ
Next.js 14+ の Server Actions は Same-Site Cookie と Origin ヘッダ検証による CSRF 防御が自動適用される
認証トークンは HttpOnly Cookie に格納し localStorage は避ける、dangerouslySetInnerHTML は DOMPurify 必須

「コードは1行も書かない」と決めた4ヶ月 — 完全AI駆動で300ページをNext.jsに移植した話

Source: Qiita | Published: 2026-06-15 20:27 JST

約 300 ページの Laravel+Vue / Nuxt2 アプリを 4 ヶ月弱で Next.js に移植、2〜4 名のチームが手書きコードゼロで運用
移植先に Next.js を選定した理由は AI の学習データ量が他フレームワークより圧倒的に多く再現率に直結する点
初回再現率 30%、ビジュアル検証導入で 50%、QA 仕様生成導入でほぼ同等まで到達するという段階的精度向上を経験
メインツールは Claude Code + Chrome DevTools (MCP)、トークン制約時は Codex を補助し 5 種のレビューエージェントを並列実行
個別ページでエラーハンドリング実装パターンが分散し最終フェーズで大規模リファクタが必要になったのが最大の落とし穴

【2026年5月】node-ipc がまた乗っ取られた ─ `npm install` した瞬間に認証情報を抜かれる手口と対策

Source: Qiita | Published: 2026-06-15 13:37 JST

週 70 万 DL・400 以上の OSS が直接依存する node-ipc が乗っ取られ、npm install 時点で認証情報が窃取される事案
攻撃手口は休眠メンテナのドメイン期限切れを取得し npm の通常パスワード再設定で公開権限を取得（インフラ侵入なし）
悪性バージョンは 9.1.6 / 9.2.3 / 12.0.1 の 3 つで、CJS エントリに約 80KB のマルウェアを注入（37KB→117KB）
窃取対象は AWS / Azure / GCP 認証情報、SSH 秘密鍵、Kubernetes・Docker・Terraform 資格情報で、DNS TXT クエリ（8.8.8.8 宛）で送出し HTTP 監視を回避
対策はロックファイル固定、即時シークレットローテーション、DNS egress 監視、新バージョン採用の遅延、継続的 SCA スキャン

What’s !important #13: @function, alpha(), CSS Wordle, and More

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

CSS 周辺ニュースまとめ第 13 回として @function、alpha()、Grid Lanes、dialog の知られざる挙動、CSS Wordle を一挙紹介
新 alpha() 関数は色変数を扱う際に色宣言全体を作り直さずに不透明度だけを変更できるようになる
WebKit の Field Guide to Grid Lanes の解説と dialog 要素の QoL 改善（バックドロップ制御等）も取り上げ
CSS Day 2026 のハイライトと Chrome 149 で着地予定の Web Platform 機能まで包括
Chrome 149 では gap decorations と shape 関連プロパティが Baseline 到達と報じている

AWS WAFのマネージドルールを「いきなりBlock」しないーCountモード×ラベルマッチで段階移行する

Source: Zenn | Published: 2026-06-15 19:20 JST

結論は「マネージドルールをいきなり Block にせず Count モードで観測しつつ Label Match で例外を組んで段階移行せよ」
Count モードでも検知時にラベル（例: awswaf:managed:aws:core-rule-set:CrossSiteScripting_Body）は付与されるためカスタムルールで条件付き Block 可能
パターン A は本番向けに Count スタート、パターン B はリリース前環境で Block スタートし問題ルールだけ Count に降格する
ルール名は CrossSiteScripting_BODY のようにサフィックスが大文字、ラベル名は MixedCase のため文字列タイプミスがサイレント失敗する罠
段階移行は CloudWatch Logs Insights で誤検知を分析し、パス／IP 条件で除外を確認してから Block へ昇格させる

【フロント最適化】Debounceって何？〜サーバーへの負荷を減らす技術〜

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

Debounce は連続イベント発火を制限し、最後の操作から一定時間経過した後にだけコールバックを実行するパターン
ユースケースは検索フォーム入力、ボタン連打防止、ウィンドウリサイズ、スクロールイベントで、不要なサーバ送信を抑止
実装はクロージャでタイマー状態を関数インスタンス毎に独立して保持し、複数 debounce 関数の干渉を防ぐ
コアロジックは毎回の発火で clearTimeout() を呼んでタイマーをリセットし、遅延後に最終アクションだけ通す
TypeScript 実装は Generics と ReturnType<typeof setTimeout> で型安全に書け、Lodash でなく自前実装に焦点

Playwright を本番運用してわかった落とし穴と解決策

Source: Qiita | Published: 2026-06-15 20:27 JST

DOM には存在するがハイドレーション未完了の「ゴースト要素」クリック問題は Locator API で待機し成功率 72%→99.5%
ローカルで通って CI で落ちる原因は TZ／フォント／リソース差で、TZ を Asia/Tokyo 固定、スクショ閾値 0.2、ワーカ数 2 で安定化
ログインを伴う 68 ケースで 3 分以上を浪費していたが Storage State + Global Setup で実行時間 12m34s → 8m12s（-35%）に短縮
Flaky の主要因はアニメ完了 42% / API 待機不足 28% / 要素順序 18% / 日時依存 8% で CSS アニメ無効化と API モックで解消
移行後実績は実行時間 38% 短縮（7m48s）、Flaky 率 8%→1.2%（-85%）、Cypress で詰まっていた Safari 含む多ブラウザ対応も実現

検索エンジンに「AIによる概要」が表示される状況で自社のウェブサイトを見てもらいやすくする方法とは？

Source: GIGAZINE | Published: 2026-06-15 07:00 JST

Automattic が AI による要約／回答が表示される検索環境下で自社サイトの露出を高める 4 戦略を解説した
要点は (1) 構造化データ（Schema.org / JSON-LD）でコンテンツを機械可読化すること
(2) llms.txt 等の AI 向け案内ファイルでクローラに明示することの 2 点目を強調
(3) AI が引用しやすい Q&A 形式のサマリーや明確な見出し階層を整備すること
(4) WordPress などの CMS では公式プラグインで「AI 検索向け最適化」を有効化する選択肢が提示されている

AIエージェントがネットワーク全体をスキャンしようとしてAWSから100万円以上の請求、運用していた人物が寄付を募る事態に

Source: GIGAZINE | Published: 2026-06-15 19:00 JST

実験的ネットワーク DN42 を AI エージェントが 24 時間内に全スキャンしようとして AWS 料金 6,531.30 ドル（約 100 万円）が発生した事故
運用者は AWS の意図せぬデータ転送課金が主因と説明し寄付を募る事態に発展
AI エージェントに能動的な探査やスキャン権限を与える際は、ネットワーク I/O コストの上限を明示すべきと教訓化
IPv6 を含むネットワーク広域スキャンでクラウドの egress / リクエスト課金が短時間で爆発しうる実例
クラウド利用エージェントには予算アラートと支出停止スイッチの組み込みが事実上必須になる

All Articles

Zenn

#	Title	Summary	Author	Published
1	サイゼリヤの間違い探しを、半自動的に解いて楽しめるツールを作った話	サイゼ間違い探しを半自動で解いて家族で見られる動画を生成するツールを公開、難易度上昇への自己ツッコミ付き	kako-jun	19:26
2	kintone Documentation MCPサーバー（β）をdeepseek-v4-proで使ってみた。	VSCode/Cline + DeepSeek V4 Pro で kintone 公式ドキュメント MCP を呼ぶ手順とコピペ参照置換の効果を検証	松村稔@プロ牛乳石鹸	23:30
3	Ubuntu上のPostgreSQL 16にpgvectorをインストールする	Ubuntu 24.04 LTS + PostgreSQL 16 への pgvector 導入を依存パッケージ・開発ヘッダ込みで RAG 用途を想定して解説	中島滋	11:00
4	個人開発で外部APIキーを不正請求から守る — この多層防御、合ってますか?【ゆる募】	外気予報×子供お出かけアプリで API キー流出による高額請求を防ぐ多層防御策（鍵分離・Edge 中継・しきい値）を募集	こなつ	15:28
5	k8s CronJob + SNS + Lambdaで作る疎結合な監視バッチ構成	ディスク監視は CronJob で定期実行、結果を SNS→Lambda 経由で Slack に流す疎結合構成と判断ポイントを解説	tonbiattack	20:59
6	ランサムウェアからバックアップを守るawsのWORMという機能を知ったので覚書	AWS Backup の WORM (保持期間中の削除・上書き禁止) でランサム耐性を確保する仕組みと内部脅威への適用範囲をまとめ	secula	20:37
7	モノレポでTerraform/アプリのCI/CDを複数プロジェクト共通化する実践パターン	Vertex AI Gemini マルチリージョンと PSC 構成を想定し、Terraform とアプリ CI/CD を 1 リポで共通化するパターン集	TK	20:19
8	WebGPUとWASMを混同していた話 — Webの高速化を支える2つの役割を整理する	WebGPU と WASM はそもそも比較対象でないと整理し、ブラウザ ML 推論で GPU 計算と CPU 実行を担う役割分担を明確化	Jnch	11:29

Qiita

#	Title	Summary	Author	Published
1	iPhoneのPWAで通知バッジが付かないと思ったら付いていた話	町内会サイトの PWA でバッジ未表示と思い込んでいたが iPhone でも正常動作していたという検証顛末	flip-flop	23:31
2	SlickGridを使ったときに、追加で奇数偶数の縞模様を別の列に付けようと思ったら付けれなかった話	SlickGrid の内部 odd/even クラスと自前 jQuery セレクタが衝突しレイアウト破壊、レガシー UI ライブラリの相性問題事例	tonbi_attack	20:57
3	LaravelエンジニアがNext.js+SupabaseのDB関数でつまずいた話	Supabase マイグレーションで `CREATE OR REPLACE FUNCTION` を扱った際の Laravel 経験者向け落とし穴を共有	riiiii	20:56
4	Vueのv-modelは便利だがReactのvalueとonChangeはなぜ分かりやすいのか	v-model の暗黙更新と React の value/onChange の明示更新を対比し、双方向データフロー可視化の利点を論じる	tonbi_attack	21:49
5	Fluent UI 2 の Popover を理解する — Fluent UI Blazor 5 との比較と Tooltip / Dialog の使い分け	Fluent UI 2 の Popover を Dialog/Tooltip と比較し、フォーカス制御と用途別の使い分け基準を整理	tomokusaba	20:52
6	【React Server Components】公式ドキュメント `'use client'` を初学者と一緒に読み解く	RSC 公式ドキュメントの `'use client'` ディレクティブを初学者と一文ずつ読み下し、境界判定の感覚を伝える	Shibainu_hanako	19:53
7	Claude Codeで本番サイトの404を退治する：Astro静的サイト × Apacheの「.htaccessリダイレクト前方一致トラップ」	Astro 静的サイト + Apache で旧 URL の一部が 404、`.htaccess` 前方一致リダイレクトの罠を Claude Code で特定	WeedMashroom	10:23
8	miseをWindowsに導入する	新 PC で anyenv から mise へ移行する Windows 環境特有の引っ掛かりとセットアップ手順を記録	Akiko_Miyamoto	16:54
9	PostgreSQL だけで RAG が完結する時代へ — Azure HorizonDB を日本語データで検証してみた	2026 年 6 月公開の Azure HorizonDB を使い PostgreSQL 内で日本語 RAG が完結するかを実データで検証	aki_kawa	00:41
10	Cloudflare Accessで保護されたアプリを「IdP認証スキップ＋デバイス証明書認証」する	Cloudflare Access で IdP/OTP 画面をスキップしデバイス証明書のみでアクセス許可する構成手順	wk_shiho	16:42
11	SASE エンジニアが押さえるべき SSL/TLS 証明書と認証局のキホン	SASE 文脈で必要な証明書チェーン・認証局・TLS 復号の基礎を HTTPS 環境前提でまとめた入門	wk_shiho	16:42
12	AI駆動開発でデザインからコーディングまで一気通貫してみた	Claude Design で UI を生成し Claude Code で実装まで繋ぐ AI 駆動開発の一気通貫フロー実演	t0hara	10:08
13	1週間でサービスを本番リリースできた話 — バイブコーディング × MCP × superpowers	バイブコーディング + MCP + superpowers の組合せで個人サービスを 1 週間で本番リリースした工程記録	kimuchi-system	18:39
14	【Cursor効率化】ブラウザを開くの禁止！？画面を動かさずにすべてを完結させる小ワザ	Cursor だけで完結する作業術として画面分割でエラーとコードを同時表示するなどの効率化テクを紹介	EkanTw	18:42
15	WebGLで屈折ガラスUI効果を実装する：フラグメントシェーダの基本テクニック	CSS `backdrop-filter` では実現できない屈折ガラス UI を WebGL フラグメントシェーダで実装する基本パターン	masakazuimai	18:15

Publickey

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

gihyo.jp

2026-06-15 付の Web 開発関連記事はありませんでした。

GIGAZINE

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

ITmedia News

2026-06-15 付の Web 開発関連記事はありませんでした。

TypeScript Blog

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

Node.js Blog

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

Astro Blog

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

Cloudflare Blog

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

Vercel Changelog

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

AWS What’s New

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

Google Cloud Blog

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

Supabase Blog

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

web.dev

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

Mozilla Hacks

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

CSS-Tricks

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

Smashing Magazine

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

Hacker News

2026-06-15 付の Web 開発関連記事はありませんでした。