Web Dev Digest: 2026‑06‑10
Top 20
Route public traffic to private applications with Cloudflare
Source: Cloudflare Blog | Published: 2026-06-10 22:00 JST
- パブリック FQDN を「公開 IP を持たない社内 origin」へそのまま流せる Application Services for Private Origins がクローズドベータで提供開始され、Cloudflare の公開エッジ機能群を私設 origin にもそのまま適用できるようになった
- 既存の IPsec / GRE / CNI / Cloudflare Mesh トンネルをそのまま origin への経路として再利用でき、connector ソフトの追加配布や別経路の再構築は不要
- WAF・DDoS 防御・Bot Management・Workers・キャッシュなど Cloudflare の公開エッジ機能を、社内 IP しか持たないアプリにそのまま被せる構成を 1 つの origin DNS 設定で組める
- 公開 IP の払い出し・NAT・追加の Cloudflare Tunnel daemon 配布を伴わずに外部公開できる点が運用上の差分で、SaaS ベンダ的に「閉域内のアプリだけを切り出してパブリック公開」する用途が想定されている
- 現状はクローズドベータで、SE が利用可能リージョン・サポート対象トポロジを審査するゲート付き提供。GA 時点で全 Tunnel タイプにフルサポートを掲げる
Threshold billing is now enabled for Pro teams
Source: Vercel Changelog | Published: 2026-06-10 09:00 JST
- Vercel Pro チーム向けに「使用量が閾値を超えた時点で部分請求書を発行する」threshold billing が標準化され、月末まとめ請求で発生していた予測不能な大型請求を分割化できるようになった
- これまで Enterprise 限定だった分割課金フローを Pro まで開放した形で、Pro チームは追加設定なしに自動でしきい値ベースの中間請求が発行される
- 主な対象は AI Gateway 利用やビルド時間の予期せぬ急増で、CI 暴走・LLM ループ・トラフィックスパイクが原因の月末請求ショックの抑止が狙い
- 中間請求の支払いに失敗すると以後のデプロイが停止されるため、決済リトライ運用と Slack 通知の整備が運用側のタスクとして発生する
- 上限額自体を制限する機能ではなく「請求の分割」であって、コスト保護そのものは別途 Vercel の spend limit / AI Gateway budgets と組み合わせる必要があると明記
June 17, 2026 Security Releases
Source: Node.js Blog | Published: 2026-06-10 07:00 JST
- Node.js 公式が「6 月 17 日に Current / LTS 全系列をまたぐセキュリティ修正リリースを行う」とプレアナウンスし、26.x・24.x(Active LTS)・22.x(Maintenance LTS)全てが対象
- 事前公開は脆弱性詳細を伏せたうえで「複数 CVE を含む」と明示しており、ハイインパクト警告に分類されているため、CI 上の Node バージョンピン留めや Docker base image の更新窓を 6/17 週に確保するよう運用側に促している
- 対象範囲には End-of-Life 直前の 22.x も含まれており、22.x ユーザは LTS 終了を見越して 24.x / 26.x への移行スケジュールを立てるタイミングとも記載
- 修正適用は npm のリリースとは独立しているため、
node:24-alpineなどのタグを再 pull したうえでアプリの再デプロイが必要、というデプロイチェックリスト目線の注意あり - 過去の同形式リリースでは公開直後 24-48 時間で PoC が出回ったため、「6/17 リリース直後にアップグレード」を推奨ラインとして公式が指定
Cloudflare、従業員やアプリごとにAIの利用上限額を設定できるCloudflare AI Gatewayの新機能を発表
Source: Publickey | Published: 2026-06-10 00:55 JST
- Cloudflare AI Gateway が「従業員別・アプリ別の月次 AI 利用上限」を設定できる新機能を公開し、全社で 1 つの API キーを共有していても個別予算で按分制御できる構成になった
- 上限到達時の挙動として「リクエスト遮断」だけでなく「より安価なモデルへの自動フォールバック」が選択でき、AI 予算超過を運用ポリシーで吸収する設計
- 対応プロバイダは OpenAI・Anthropic・Google が明示されており、これまでアカウント単位の総額しか見えなかった状態から職位別・チーム別の予算管理に切り替わる
- Cloudflare Access と連携した identity-based budgets が同時にクローズドベータで提供開始されており、IdP のクレームを AI 利用上限に直接紐付ける構成が示されている
- これにより「シニア $2000/月、コントリビュータ $500/月」のような階層ポリシーをカスタム属性で表現でき、AI コスト最適化を Cloudflare 側で完結させる構図
npm v12でnpm installのデフォルト動作を変更へ
Source: gihyo.jp | Published: 2026-06-10 12:00 JST
- npm v12 で
npm installのデフォルト動作が「セキュリティ重視寄り」へ転換され、対話的承認なしでは特定の操作が走らない opt-in モデルになる方針が示された - pnpm v11 と同様の「依存パッケージの postinstall などビルドスクリプトをデフォルトで実行しない」方針が npm 側でも検討されており、サプライチェーン攻撃に対する自衛策を CLI 既定値で強制する流れ
- 既存プロジェクトでは初回 install 時に対話的に許可リストを作るフローが入る想定で、CI では
--allow-scriptsを明示する必要が出てくる - npm 公式は「v11 系で警告」「v12 系で挙動変更」のステージング型リリースを計画しており、Renovate / Dependabot の挙動も合わせて変わる可能性が指摘されている
- pnpm が先行して「Build scripts that are not executed」警告を導入した経緯が下敷きにあり、エコシステム全体で「postinstall 黙認」が許されない時代へ移行する旨を gihyo が解説
AWS FinOps Agent is now available in preview
Source: AWS What’s New | Published: 2026-06-10 00:28 JST
- AWS が FinOps 専用 AI エージェントの preview を発表し、コスト異常検知・原因調査・最適化提案を会話 UI とチケット連携で自動化する立て付け
- Cost Explorer / Compute Optimizer / Savings Plans Analyzer などの既存 FinOps プロダクトを横断的に呼び出し、コスト急増を CloudTrail のイベント・リソースメタデータと相関させて根本原因を返す
- ServiceNow・Jira などのチケッティングシステムへの連携が標準でサポートされ、検知 → 担当者アサインまでをエージェントが orchestration する設計
- preview 時点の制約として、推奨アクション(リサイズや idle 削除)は人手承認を必須とする gated apply モードのみ、自動実行モードは GA 後の検討と明言
- 同日発表の Cost and Usage Report 2.0 設定更新サポート・Cost Explorer の Amazon Q 連携と組み合わさり、AWS のコスト面ツール群が「エージェント前提」で整理し直された
AWS Cost and Usage Report 2.0 now supports table configurations update
Source: AWS What’s New | Published: 2026-06-10 22:33 JST
- CUR 2.0 の export 設定を「いったん削除して作り直す」ことなく、列追加・粒度変更などの table configuration をその場で更新可能になった
- 既存の CUR 2.0 export 利用者は新しい列(タグ列・割引列など)を追加する場合でも、過去エクスポート資産との連続性を維持できるようになり、データレイク側の Athena テーブル定義の壊し直しが不要
- 更新は API / CLI / コンソールから可能で、変更は次回 export サイクルから即時反映される。既存 S3 prefix の上書きではなく、新しいスキーマで上書き対象の新規プレフィックスを書き出す方式
- Cost Categories / SavingsPlans / Reserved Instance 関連列の追加が同時にサポートされ、組織横断ダッシュボードを CUR 2.0 ベースで作っているチームの再構築コストを抑える
- CUR Classic(1.x)からの移行を促す流れの一環として、CUR 2.0 を「組み替え可能な日次データソース」として完成度を上げた位置づけ
Storage Insights datasets: Enabling org-wide operational discovery with activity insights
Source: Google Cloud Blog | Published: 2026-06-10 01:00 JST
- Google Cloud Storage の Storage Insights データセットに「activity insights」が追加され、メタデータ静的インベントリだけでなく「いま誰がどのバケットに何を書き込んでいるか」がほぼ準リアルタイムで可視化される
- 新たに BigQuery views として「オブジェクト単位アクティビティ」「バケット集計」「リージョン間トラフィック」「プロジェクト単位操作」の 4 種が提供され、アクティビティ発生から 4 時間以内にデータ反映
- 監査ログを使わずに「組織全体での読み書きトレンド」「アクセスのないコールドデータ」「想定外のリージョン跨ぎ通信」を SQL 1 本で抽出できる構成
- Storage Insights は従来 inventory のみだったため、棚卸し用途で導入したものの運用判断には繋がらないという声を直接拾い、「inventory + activity」両方持ちのオペレーショナル DB に再定義した
- BigQuery 課金が発生するため、対象を絞った scheduled query への移行と、
gcs_audit_logs併用との使い分けが推奨されている
Report: GKE Inference Gateway delivers up to 92% faster AI responses
Source: Google Cloud Blog | Published: 2026-06-10 01:00 JST
- GKE Inference Gateway を Llama 3.1 8B ワークロードに同一ハード構成で適用したベンチマークで、サードパーティ製マネージド K8s と比較し「スループット +15.7%・wait time -92.8%・トークン間レイテンシ -62.6%」を達成
- 効果の主因は prefix caching とモデル aware ルーティングで、同じシステムプロンプトを共有する request 群に対しキャッシュ済み KV を再利用してパイプライン待ちを大幅短縮
- 比較対象は「他社の GKE 相当マネージド Kubernetes 上で OSS LLM を直接サービングした構成」で、Cloud Run on GKE / Vertex AI ではなく GKE 同士の差分として測定
- GKE Inference Gateway は llm router・queue management・request batching を kgateway 上のエクステンションとして提供しており、Service Mesh 抜きでも導入可能
- 計測は固定 QPS でのテイル指標を主に提示しており、「P99 wait time が 1 秒 → 70ms」など具体的な数値根拠が出ているのが特徴
How to unlock true ROI in software development – a deep dive into the latest DORA research
Source: Google Cloud Blog | Published: 2026-06-10 01:00 JST
- 最新 DORA 調査をベースに、AI アシスト開発の ROI は「J カーブ」を経て初めて上昇するという結論を提示。導入直後は生産性が一度下がる
- 一時的なディップの主因は「学習コスト」「AI 生成物の検証作業」「既存 CI/CD パイプラインの再設計」の 3 つで、これを 6-9 ヶ月かけて吸収して初めて純増フェーズに入る
- 評価指標は単純な PR 数や lines-of-code ではなく、DORA の Four Keys(リードタイム・デプロイ頻度・障害復旧時間・変更失敗率)に「コード品質スコア」と「人手レビュー時間」を加えた 6 指標を提唱
- AI 利用率を KPI にすると「使えば偉い」インセンティブで品質が落ちるため、AI 利用は計測のみで KPI 化しないという推奨が明示
- 組織がディップを乗り越えるための条件として「PR レビュー文化・自動テストカバレッジ・観測基盤」を必須要件として挙げており、土台が無い組織では ROI が負のまま回らないと警告
AV1の次世代コーデック「AV2」の仕様が発表される
Source: GIGAZINE | Published: 2026-06-10 12:17 JST
- Alliance for Open Media が次世代ビデオコーデック AV2 の仕様を正式発表し、ロイヤリティフリーかつ AV1 比で大幅な圧縮率改善を狙う Web 向け次世代エンコードが固まった
- AV1 比でビットレートを同品質で約 30% 削減することを目標値として明示しており、4K/8K ストリーミングと Web 配信の帯域節約が主用途
- 仕様策定には Google・Netflix・Amazon・Meta・Mozilla・Cisco・Apple・Microsoft などが参加し、ブラウザ実装ロードマップが各社で並行進行する見通し
- AV1 と同様にロイヤリティフリーである点が確定しており、HEVC で問題化したライセンスフィー回避のために Web ストリーミング各社が積極採用する余地が明示された
- ハードウェアデコーダ対応が普及前提条件で、AV1 と同じく「ソフトウェアデコードで先行 → 数年後にハードウェア化」というロードマップが想定されている
Next.js 16 + OpenNext + Cloudflare Workers + D1 で17万ページを1人運用する構成
Source: Zenn | Published: 2026-06-10 08:02 JST
- Steam ゲーム情報サイトを「Next.js 16 + OpenNext + Cloudflare Workers + D1」で構成し、約 17 万ページ規模のコンテンツを 1 人で運用する構成事例
- ホスティングコストは 0 円帯に抑えており、Vercel ではなく OpenNext を Cloudflare Workers に乗せることで Vercel 課金制限(同時実行・ファンクション起動)を回避
- ページデータは D1 に正規化保存し、ISR は使わず「リクエスト毎に SSR + edge cache」に倒すことで、17 万ページのデプロイ時間問題を回避している
- ボトルネックは D1 のクエリ性能ではなく Workers の同時 DB 接続数で、ページ生成側に Cache API を挟み込んで D1 直撃を減らす設計
- 個人運用前提のため「
wrangler tail+ Sentry」で運用観測を完結させ、PaaS ベンダロックインに頼らずに 0 円大規模配信を成立させている実例
個人でAI APIを公開して破産しないための多層防御
Source: Zenn | Published: 2026-06-10 23:55 JST
- 個人開発で AI を叩く外部 API を公開する際、Cloudflare WAF・Worker レート制限・サーバ側トークン上限・課金 webhook の 4 段で防御を組まないと請求書事故が起きる、という前提整理
- レート制限はクライアント IP ではなく「IP + UA + Cookie ハッシュ」「未認証は厳しめ・認証済は緩め」と多次元に切る前提でないと簡単に突破されると指摘
- AI API 側のキー漏洩対策として「フロントから絶対に呼ばない」「Worker でモデル名と max_tokens を strict にバリデーションし不明値は 400」を最低ラインに置く
- 課金監視は「OpenAI / Anthropic の usage API を 5 分毎に poll し閾値超で自動鍵 rotate」「Stripe Connect 経由なら usage record で課金停止」の 2 系統を提示
- ユーザ単位 daily quota を D1 に保存し、Sliding window で課金不可ユーザの request は 429 で確実に切る運用、を最低ラインとして明文化
LINEログイン×Stripe課金×Supabase連携、毎回土日を溶かすのが嫌すぎてNext.js 15テンプレにまとめた
Source: Zenn | Published: 2026-06-10 21:12 JST
- LINE ログイン・Stripe 課金・Supabase の三点セットを Next.js 15 ベースで毎回作り直す手間に耐えかねた著者が、AI コーディング前提の生 OSS テンプレートを公開
- LINE OAuth 後に Supabase Auth ユーザにマージし
usersテーブルにline_user_idで紐付ける流れを Server Actions ベースで整理 - Stripe は Customer Portal + Webhook で「サブスク状態を Supabase の
subscriptionsテーブルにミラーリングする」設計を採用し、フロントから直接 Stripe を見ない構成 - AI コーディング前提でディレクトリ規約を細かく定義しており、
/lib/stripe・/lib/line・/lib/supabaseの責務をコメントで Claude / Cursor 向けに明示 - 個人開発でハマりがちな「Stripe テスト鍵 / 本番鍵の env 切替」と「LINE Login の redirect URI 設定」を README に手順化済み
Next.jsでHydration Errorに遭遇したので原因と対策をまとめる
Source: Qiita | Published: 2026-06-10 07:51 JST
- 筋トレ記録アプリ(React + Next.js + Prisma)開発中の Hydration Error の発生条件を整理し、「Server で取った日時を Client で
toLocaleStringした結果が一致しない」が真因だと特定した実例 Date.now()/new Date()をコンポーネント初期描画で使うと SSR と CSR で値がズレ、Next.js が hydration mismatch として React 警告を出す- 解決は「サーバ側で文字列に整形してから渡す」「
useEffect後に Client 側でだけ time を描画する」の 2 パターン。著者は前者で対応 Math.random()やcrypto.randomUUID()も同様にズレるので、SSR で生成して Client に渡し切る oruseIdを使う、という代替が紹介されている- App Router の
'use client'境界が SSR HTML を返す点を踏まえ、「Client Component だから安全」は誤解で、初回描画は SSR 通過することを明示
Amazon EC2 P6-B200 instances are now available in the AWS GovCloud (US-East) Region
Source: AWS What’s New | Published: 2026-06-10 23:32 JST
- NVIDIA Blackwell GPU 搭載の EC2 P6-B200 が GovCloud (US-East) に追加され、政府系ワークロードでも Blackwell 世代の AI 学習・推論が利用可能に
- P5en 比で「最大 2 倍の性能」をベンダ提示しており、AI 学習を GovCloud 内で完結させたい政府機関のニーズに対応した
- GovCloud では FedRAMP High / DoD IL5 を満たした閉域での GPU 提供となるため、機密データセットを商用リージョンに出さずに Blackwell が使える点が差分
- 既存 P5/P5en 利用機関向けには「GovCloud 内での移植」「データレジデンシ維持」が同時に達成可能、と FAQ で明示
- 同日発表の EC2 M9g/M9gd(Graviton5 汎用)や metal-48xl/96xl(カスタム Intel)と組み合わさり、AWS の Blackwell + ARM 世代 + ベアメタルが「汎用 EC2 ラインナップ」として一気に揃った
Amazon FSx for OpenZFS Intelligent-Tiering storage class is now available in 8 additional AWS Regions
Source: AWS What’s New | Published: 2026-06-10 05:52 JST
- FSx for OpenZFS の Intelligent-Tiering ストレージクラスが 8 リージョン追加で利用可能になり、自動階層化対象リージョンが大きく拡張された
- FSx SSD ストレージクラス比で「最大 85% のコスト削減」をベンダ提示しており、アクセス頻度に応じた自動移動を NFS 共有のままで適用できる構成
- 階層は「Frequent」「Infrequent」「Archive Instant」の 3 段で、ファイルアクセスパターンに基づいてバックグラウンドで自動移動。アプリ側の改修は不要
- 対応リージョンの追加は東京を含まず、東京採用予定企業はまだ待ち状態と読める(一覧は AWS 公式記事側参照)
- 同シリーズの S3 Intelligent-Tiering を NFS ベースのファイルシステムに転写した設計で、データレイク前段のホットファイルキャッシュとしての採用が想定される
Announcing metal-48xl and metal-96xl for Amazon EC2 network/EBS instances
Source: AWS What’s New | Published: 2026-06-10 00:00 JST
- EC2 ベアメタルラインに metal-48xl / metal-96xl が追加され、カスタム Intel プロセッサ搭載の超大型ベアメタルインスタンスが提供開始
- 「vCPU あたり最大 43% の compute 性能改善」をベンダ提示しており、ベアメタル前提のオラクル DB・ハイパーバイザ・専用 OS ワークロードでの集約率改善が狙い
- ネットワーク帯域・EBS 帯域も上位帯まで拡張され、48xl / 96xl ともに従来の n7i / m7i 系より広帯域寄りに振った設計
- vSphere・Nutanix AHV・Bare Metal Hypervisor などの「VMware/専用 OS を AWS 上で動かす」用途を主ターゲットに、密度向上の選択肢として提示
- 仮想化を挟まない直接 OS ブートが必要なライセンス管理アプリ・FIPS 認定スタックに対し、「これまで物理サーバを使っていた領域」を AWS に取り込みやすくする一手
Creating Memorable Web Experiences: A Modern CSS Toolkit
Source: CSS-Tricks | Published: 2026-06-10 22:02 JST
- 「印象に残る Web 体験」を作るための現代 CSS ツールセットをまとめたガイドで、JavaScript を最小化しても表現できる手法を 5 つのカテゴリで提示
- スプリットテキストアニメーション(
text-wrap: balanceと::first-letterで見出しを分解)、マスク・クリッピング(clip-path/mask-image)、scroll-driven animations、3D transforms、カスタムカーソルの 5 本柱 - これらは全て View Transitions API・
scroll-timeline・animation-timeline・offset-pathといった Baseline / 仕様化済み機能で実現でき、JS ライブラリへの依存を下げられる - 著者は GSAP / Lenis / Locomotive Scroll を例に挙げつつ、「同等のことが CSS で書ける場面ではブラウザに任せた方が CWV 的に有利」と主張
- カスタムカーソルは UX 上のアクセシビリティ問題を引き起こすため、
prefers-reduced-motionと「マウス端末でのみ有効化」をワンセットにする実装パターンが推奨
tsgo で型チェックを早くしてみる
Source: Zenn | Published: 2026-06-10 19:00 JST
- Go 製の TypeScript コンパイラ(tsgo、TypeScript 7.0 の元実装)を実プロジェクトに導入し、型チェック時間が「約 10 倍速」になるかを実測した記事
- 実測対象は数万行規模の TS リポジトリで、tsc 6.0 系で 60 秒台だったフルチェックが tsgo で 6-7 秒台に落ちたケースを報告
- ただし monorepo の project references・declaration emit(.d.ts 出力)・古い
tsconfigのcompilerOptions互換性に未対応部分があり、CI 完全置換ではなく「ローカル watch 用に併用」段階と結論 - Vitest / Jest と組み合わせる場合の type-only エラーは tsgo でも検出できるが、エラーフォーマットが既存 tsc と一部異なるため、エディタ側拡張の追従が必要
- TypeScript 7.0 Beta(4 月)以降の流れを踏まえ、開発体験を先取りしたい人向けに「ローカル fast path を tsgo、CI を tsc」併用パターンを推奨
All Articles
Zenn
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | React × Tailwind CSS 実践 #08|ツールチップを実装する|ホバー・フォーカスで表示するアクセシブルな補足UI | ホバーと Tab フォーカスの両方で出す ARIA tooltip ロール実装を Tailwind ユーティリティに落とし込んだ手順 | @Hiro|AIx Frontend Engineer | 19:05 |
| 2 | Lambda + S3インメモリ検索で郵便番号APIを作った話【OpenSearch不要・月額ほぼ0円】 | OpenSearch を使わず Lambda メモリに郵便番号 CSV を全展開してインメモリ検索、月額をほぼゼロに抑えた構成 | @ちよよ | 15:08 |
| 3 | [100メガショック] なぜ Drizzle は npm での更新が途絶えてしまったのか? | Drizzle ORM の npm パブリッシュが止まったのは tarball が 100MB 上限超過のためで、metadata 肥大化の連鎖を解説 | @空雲 | 14:05 |
| 4 | TypeScriptとは?JavaScriptとの関係 | JS との関係を「型注釈つきスーパーセット」と整理し、学習順序を JS 基本 → TS と推奨する入門記事 | @masumi | 15:31 |
| 5 | [Mastra YouTube 解説] AIネイティブ企業の内側で何が起きているのか | Mastra 動画を要約し、AI ネイティブ企業の Tool / Agent / Workflow / Eval を分けて運用する具体パターンを抜粋 | @jun shiromizu | 14:00 |
| 6 | Nuxt で Pinia と Nuxt Plugin を活用してナビゲーション履歴管理を実現する | Nuxt の app:beforeRoute フックでは間に合わない履歴保存を Pinia + Plugin で前後ページを保持する実装 | @からころ / karacoro | 12:00 |
| 7 | 新規事業を牽引する技術選定 〜フルスタックTypeScript開発の実践事例〜 | 新規事業で Hono + Next.js + Drizzle + tRPC のフルスタック TS を採用した選定理由・落とし穴・人員配置 | @Katsuma Narisawa | 10:46 |
| 8 | MCPでAlpaca/OANDAをClaude APIのツールにする実装詳解 | Alpaca / OANDA の証券・FX API を MCP ツール化し、Claude API から自然言語でポジション操作する実装 | @inowa_r | 10:26 |
| 9 | AmiVoiceの単語タイムスタンプ×生成AIで、医療会話の用語をその場で解説するアプリを作る | AmiVoice の単語タイムスタンプ出力を GPT に渡し、医療用語の差し込み解説を発話と同期表示する設計 | @ryukoeng | 09:27 |
| 10 | 四人で遊べるボドゲサイト「Tetra Board」を作った話 | 4 人同時プレイ可のオンラインボドゲサイトを Hono + Cloudflare Durable Objects で実装した個人開発記録 | @Chaossi | 09:06 |
| 11 | Next.js 16 でBtoB LPのヘッダーを刷新したら踏んだ3つの落とし穴 | Next.js 16 + Turbopack で BtoB LP のヘッダー刷新時に踏んだ Client/Server 境界・hydration・CLS の 3 問題 | @高田祥 | 09:00 |
| 12 | MapLibre GL JSと地理院タイルでハザードマップUIを作る(Astroアイランド・レイヤー切替・出典表記) | Astro Islands で MapLibre GL JS を遅延ロードし、地理院ハザードタイルを Layer 切替で重ねた実装 | @サクッとぱんだ | 08:07 |
| 13 | Vue 2 UMD コンポーネントのイベントが Vue 3 側に届かなかった話 | Vue 2 の UMD ビルドが内部で持つ独自 emit プロトコルが Vue 3 の event proxy に拾われない原因とパッチ | @ぽ。 | 10:55 |
| 14 | VPNを使わずに社外から社内RDPへ:Cloudflare Zero Trust(ZTNA)を無料枠で構築する | cloudflared + Cloudflare Access の無料枠だけで社内 RDP を外部公開、IdP 連携と Posture Check の最小設定 | @ブレインディレクション | 10:38 |
| 15 | Reactの詳細設計「書」について考える | UI 詳細設計書を React 用に書き直す際に必要なのは画面 ID 体系・State 表・Server/Client 境界の 3 セット | @248_ken | 23:45 |
| 16 | Vercelにデプロイしたけど動作が遅い…。通信が太平洋2往復していた話 | Vercel(IAD) と Supabase(東京) のリージョンずれで TLS+クエリが太平洋を 2 回往復、東京固定で 43% 高速化 | @たけし | 10:45 |
| 17 | 個人開発サービスを Vercel × AWS の二刀流にする話【設計編】 | 常時稼働を Vercel、重いバッチを Lambda/SQS にオフロードする hybrid 構成と障害時のフェイルオーバ設計 | @mmfujii | 20:17 |
| 18 | 日本語チャットで動画編集を実現するAIツールのアーキテクチャ設計|Next.js + FastAPI FFmpeg + GPT-4o | GPT-4o の Structured Outputs を FFmpeg 命令列に落とし込み、Next.js + FastAPI で動画編集パイプライン化 | @やか | Conform開発者 |
| 19 | 問い合わせフォームの偽投稿が月20件 — ひとり社長のスパム対策で売上機会を守る方法 | reCAPTCHA を使わず honeypot + 国別ブロック + メール形式チェックで月 20 件のスパムをゼロに | @JOINCLASS | 08:01 |
| 20 | AI OCRの出力を、そのまま信じてはいけない — 「要確認UI」を作るための設計 | AI OCR の confidence 値を UI の「要確認」状態に変換し、人手レビュー導線を入れる Form 設計指針 | @らんらん | 01:45 |
| 21 | 天気アプリで「大宮」がウガンダになった話 — WeatherAPIからGoogle Places APIへ移行するまでの四苦八苦 | WeatherAPI の地名解決が「大宮」をウガンダに誤マップ、Google Places API へ移行した経緯と料金比較 | @こなつ | 18:51 |
| 22 | SAXストリーミングパースと仮想スクロールで初回描画も逐次描画も超高速なビルドレスSPAを構築 | バンドラなし ES Modules + SAX で大規模 XML を逐次描画、仮想スクロールで万行データを即時描画する実装 | @takano32 | 15:29 |
| 23 | IndexedDBをキャンバスの自動保存に使う — localStorageとの違いと実践 | Canvas アプリの自動保存先を localStorage から IndexedDB に切り替え、Blob 保存・容量超過時の Quota 対応 | @木下貴博 / 木下スタジオ | 15:16 |
| 24 | HTMLからPPTXを書き出す — ライブラリなしでZIPをバイナリで組み立てる | Office Open XML の構造を理解した上で、ライブラリなしの素の JS で ZIP バイナリを組んで .pptx を出力 | @木下貴博 / 木下スタジオ | 15:11 |
| 25 | Oracle2PostgreSQL — Oracle→PostgreSQL 移行前の SQL / PLSQL 資産を診断・変換 | 80+ 変換ルールで Oracle 固有 SQL/PL-SQL を診断・PG 互換に変換、GUI/CLI/Docker 3 形態で提供する OSS | @じけんぼ | 14:59 |
| 26 | 「SnowflakeとSnowflake Postgres間のデータ移動」pg_lakeを試してみた | pg_lake を WSL2 環境で立て、Snowflake と Snowflake Postgres 間で外部テーブル経由のデータ移動を実測 | @kayo | 00:34 |
| 27 | Claude Code CLIをNode.jsから叩く設計と罠 | 子プロセス・REST API・SDK の 3 経路を比較し、spawn で stream 受けると EPIPE・PID リーク等が発生する罠 | @アニクマ | 00:00 |
| 32 | 【初学者向け】Cloud Run Jobs 入門:CLOUD_RUN_TASK_INDEX で並列バッチ処理を設計する | Cloud Run Jobs の CLOUD_RUN_TASK_INDEX を使い、N 並列のタスクに入力を sharding する設計手順 | @yujmatsu | 00:00 |
| 28 | [小ネタ] Fn::TransformとAWS::Includeを使ってCloudFormationのMappingsを外部ファイルで定義 | CFn Mappings を別 YAML に切り出し AWS::Include で取り込む、テンプレート肥大化回避テクの実例 | @J.Gando (ジェイ) | 22:30 |
| 29 | SAP BTP と hyperscaler 原生サービスの境界を整理する|どこまで借りるべきか | SAP BTP と AWS/Azure ネイティブの責任境界を「データ・連携・ID・運用」の 4 軸で整理した参考表 | @ayaka | 20:48 |
| 30 | TerraformでECS/Fargate構成をIaC化する | ECS on Fargate を Terraform で IaC 化、Task/Service/ALB を module 分割するときの命名規約と State 分割 | @takNaga | 11:37 |
| 31 | [OpenSearchAgentSkills]自然言語でRAG検索環境構築 | OpenSearch Agent Skills + Bedrock embeddings で自然言語クエリから RAG 検索環境を一発構築する手順 | @山ちゃん | 10:36 |
| 33 | AWS学習4日目:VPC | VPC・Subnet・Route Table・IGW の役割を学習 4 日目向けに最小用語セットだけで通す入門メモ | @zonooo | 07:12 |
| 34 | ~/.aws を使わずに AWS MCP Server へアクセスできる Remote MCP Proxy を作った | ローカルの ~/.aws を読まずに Claude Code から AWS MCP を叩くための Remote MCP Proxy 実装 | @Naoto Ishizawa | 02:32 |
| 35 | AWS学習メモ - パブリックサブネットとプライベートサブネットの違い | 「IGW へのルートが route table にあるか」だけが Public/Private の差、という最短ルールでの整理 | @屋敷 蛇魂 | 01:18 |
Qiita
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | Dialogでデータ入力し、画面遷移するとボタンが反応しなくなってしまった件 | Dialog 閉鎖後にイベントリスナが overlay に残り、画面遷移後のボタンが click を奪われる原因と退避法 | @o68606007 | 23:39 |
| 2 | 【Cursor自動化】新機能「Agentモード」でコードを自動生成し、Gitコミットまで爆速で終わらせる方法 | Cursor の Agent モードで diff 生成→自動 commit→push までを 1 プロンプト化する Rules.md 設定例 | @EkanTw | 18:30 |
| 3 | Canvas API の座標変換で回が回る回 | setTransform + rotate を入れ子で扱う際の座標系反転、save/restore を毎ループ忘れるバグの実例 | @mikecat_mixc | 23:21 |
| 4 | JavaScriptのArray.isArray()関数:配列型を確認する | Array.isArray が instanceof Array より iframe / Realm 越境で安全、という API 差の最短解説 | @coding1 | 15:17 |
| 5 | 画像フォーマット変換ツールをブラウザだけで作る — PNG vs JPEG vs WebP vs AVIF の構造的な違い | ブラウザだけで PNG/JPEG/WebP/AVIF 相互変換を作りつつ各形式のチャンク構造・圧縮特性を解説 | @sen-ltd | 10:10 |
| 6 | バックエンドなしで「毎日更新パズルゲーム」を作った話(450問自動生成・PWA対応・テスト2,600件) | 450 問の Daily Puzzle を Vite + PWA で自動生成し、テスト 2,600 件で生成器の品質を担保した個人開発 | @teiji-tango | 08:50 |
| 7 | Next.js SSG・PPR | microCMS と組み合わせたページレベル SSG と PPR の選び分けを、List/Detail それぞれの実装例で示す | @yuuuki11259 | 20:53 |
| 8 | Dark Mode Admin Dashboard Templates for SaaS | SaaS 向けダーク UI Admin テンプレ集の紹介、CRM/分析系で使われている代表的なテーマ構成を列挙 | @wrappixel | 19:49 |
| 9 | 今からNext.jsを始めるなら僕ならこうする話 | AI が Next.js コードを大量生成する時代の「公式 docs の読む順番」「App Router 一択」など学習動線の提案 | @yamu_official | 15:55 |
| 10 | レビュー送信が「CORSエラー」で落ちる。犯人はCORSじゃなく、しかも2人いました | Spring Boot + React で CORS 表示だが本体は Preflight ヘッダ不足と 500 内部例外、二つの根本原因事例 | @80-cloud | 21:59 |
| 11 | MAGIシステムをClaudeのArtifactで作ってみた | Claude Artifacts で MAGI 風 3 ペイン UI を生成、各セル独立コンテキストで動かす React 実装の組み立て | @inuta-one | 21:11 |
| 12 | 【Supabase × React】学習記録アプリのデータを永続化する | Supabase の Auth + Row Level Security を React 学習記録アプリに適用する RLS ポリシー定義例 | @koki-bit | 14:24 |
| 13 | MapLibre GL JSと地理院タイルでハザードマップUIを作る(Astroアイランド・レイヤー切替・出典表記) | MapLibre GL JS + 地理院ハザードタイルを Astro Islands で組み、出典表記とレイヤー切替 UI を整える | @sakutto-panda | 08:07 |
| 14 | Claude Code hookのexit code完全ガイド——0, 1, 2を正しく使い分ける | Claude Code hook の exit code を 0=継続・1=警告・2=ブロック で書き分けないと block が黙って通過する罠 | @yurukusa | 12:00 |
| 15 | DevNav Handbook シリーズ第1回 - Spring Boot バックエンド実装 | React → Spring Boot → PostgreSQL の users 表示まで実装した連載で、次回 Article API の土台整理 | @kanemichi_muraoka | 20:55 |
| 16 | ClickPipes CDC で ClickHouse Managed Postgres → ClickHouse Cloud の取り込み限界を試す | ClickPipes CDC の書き込み QPS を上げ、ClickHouse Cloud 取り込み上限と遅延の限界点を実測した記録 | @asahide | 13:03 |
| 17 | Mac の psql で複数の SQL ファイル(DDL 含む)を順に実行する | macOS の psql で複数 DDL ファイルを安全に順序実行するための psql -f シェルラッパ実装例 | @Ryuki4648 | 12:39 |
| 18 | PostgreSQL Migrate/Seed/Reset Operations | ローカル Postgres → AWS RDS Data API までを共通化する Migrate / Seed / Reset スクリプトのテンプレ | @jyas-protein | 10:39 |
| 19 | AWSで日次集計する、サービス稼働率の測定方法を整理してみた | ALB 5xx と Synthetic 監視と業務ログを 3 階層で組み「真の稼働率」を CloudWatch + Athena で日次集計 | @gaky1201 | 21:45 |
| 20 | 新しくリリースされた Claude Fable 5.0 で遊んでみたら、東京ダービーの予想が当たった話 | Claude Fable 5.0 に東京ダービー馬予想を解かせ、結果が的中したという遊び寄りのモデル評価 | @travelclass0606 | 22:01 |
| 21 | Why is Cloudflare Workers So Fast? Verifying V8 Isolate vs Container Differences Through Load Testing | Workers の V8 Isolate と Container ベースのコールド初動を負荷試験で比較、cold start 差を数値で提示 | @yuuzin217 | 20:31 |
| 22 | Understanding Cloudflare’s ‘Proxied’ vs ‘DNS Only’ Settings | Cloudflare DNS の Proxied / DNS Only の挙動差を Workers/Pages の文脈で再整理した入門 | @suu_u | 18:45 |
| 23 | No VPN Required: Building Cloudflare Zero Trust ZTNA (Free Tier) for External Access | 中小企業向けに Cloudflare Zero Trust の無料枠で社外 → 社内 RDP を VPN なしで開ける設定手順 | @BrainDirection | 10:35 |
| 24 | FE×PHP Conference 2026 HOKKAIDO に参加してきた! | FE×PHP Conference 2026 HOKKAIDO の体験記、フロントエンド・PHP それぞれのセッション選定基準も触れる | @tsuzuqiita | 19:22 |
| 25 | 【CSS】FlexとGridのGapにBorderをつけることができるようになった!! | Flex / Grid の gap に直接 border を引ける新 CSS 仕様、これまでの擬似要素回避策との比較コード | @degudegu2510 | 18:29 |
Publickey
対象日の該当記事はすべて Top 20 に掲載されています。
gihyo.jp
対象日の該当記事はすべて Top 20 に掲載されています。
GIGAZINE
対象日の該当記事はすべて Top 20 に掲載されています。
ITmedia News
2026-06-10 付の Web 開発関連記事はありませんでした。
TypeScript Blog
2026-06-10 付の記事はありませんでした。
Node.js Blog
対象日の該当記事はすべて Top 20 に掲載されています。
Astro Blog
2026-06-10 付の記事はありませんでした。
Cloudflare Blog
対象日の該当記事はすべて Top 20 に掲載されています。
Vercel Changelog
対象日の該当記事はすべて Top 20 に掲載されています。
AWS What’s New
対象日の該当記事はすべて Top 20 に掲載されています。
Google Cloud Blog
対象日の該当記事はすべて Top 20 に掲載されています。
Supabase Blog
2026-06-10 付の記事はありませんでした。
web.dev
2026-06-10 付の記事はありませんでした。
Mozilla Hacks
2026-06-10 付の記事はありませんでした。
CSS-Tricks
対象日の該当記事はすべて Top 20 に掲載されています。
Smashing Magazine
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | The Benefits Of Cognitive Inclusion In UX Research(UX リサーチに認知的包含を取り入れる利点) | 認知障害を持つ参加者のリサーチから「読み返し可能なエラー文」「タイマー解除オプション」など UI 実装に直結する 7 つの提言 | 19:00 |
Hacker News
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | Splunk Enterprise PostgreSQL sidecar has no auth (CVE-2026-20253, CVSS 9.8)(Splunk Enterprise の PostgreSQL サイドカーが無認証、CVE-2026-20253) | Splunk Enterprise に同梱の Postgres sidecar が認証なしで TCP 公開、CVSS 9.8 の全権 RCE 経路を解説 | 05:02 |