Web Dev Digest: 2026‑05‑10
Top 20
最近のJavaScript、全然追えてなかった。ここ1〜2年で標準化された機能10選
Source: Zenn | Published: 2026-05-10 19:09 JST
- ES2024〜ES2026で標準化された機能で、これまで外部ライブラリに依存していた処理が標準APIだけで実装できるようになり、package.jsonの依存削減を推奨している。
- ES2024で
Promise.withResolvers()（外部からresolve/reject）、Object.groupBy()/Map.groupBy()（配列のキー別グループ化）、Array.fromAsync()（非同期イテラブルから配列化）、String.prototype.isWellFormed()/toWellFormed()（サロゲートペアの検証・修正）が標準化された。 - ES2025では
Setの和・積・差を扱うSet Methods、Iterator Helpers（遅延評価チェーン）、Promise.try()（同期/非同期例外の統一処理）、RegExp.escape()（ユーザー入力を正規表現に安全に埋め込む）、Import Attributes（with構文でJSONモジュール直接読込み）が追加された。 - ES2026では
using宣言が標準化され、スコープ終了時に自動的にリソース解放（Disposable）が走るようになる。 - 結果として、lodashのgroupByやp-tryのような小さなユーティリティ系パッケージは標準APIに置き換え可能で、依存関係を見直すとメンテナンスが楽になる。
Reactテーブルライブラリ6選：フィルタリング・検索UXと無料範囲を徹底比較
Source: Zenn | Published: 2026-05-10 16:42 JST
- 6つのReactテーブルライブラリの中で、UIをTailwindで細かく制御したい場合は shadcn/ui + TanStack Table の組合せがベストと結論づけている。
- Ant Design（antd）は全機能無料でフィルターも豊富、最短セットアップでスピード重視の開発に向く。MUI DataGridは無料版で大半のユースケースに対応するが、AND/OR複数条件フィルターは有料版のみ。
- AG Grid Communityは無料でもフローティングフィルターやセットフィルターが使え業務アプリ向けに完成度が高いが、フィルターパネルと高度フィルターUIは有料版限定。
- Chakra UIはデザインシステムと統一できる利点はあるが、
useMemoが必須で実装コストが高い。 - ヘッドレスのTanStack Tableは「デザインシステムが既に固まっていてテーブルロジックだけ必要」なケースに最適と推奨されている。
【Next.js】Vitestで簡単な単体テストコードを書いてみる
Source: Zenn | Published: 2026-05-10 16:05 JST
- Next.jsプロジェクトで単体テストを始めるなら、ViteベースでJestに近いAPIをもつVitestが学習コストの低い選択肢として結論づけられている。
- 必要なインストールパッケージは
vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom @testing-library/jest-domの6点で、開発依存として一括で入れる構成。 vitest.config.tsでJSX解釈のためのReactプラグイン、jsdomによるブラウザ環境シミュレーション、セットアップファイルのパスを指定する。- セットアップファイル(
vitest.setup.ts)で@testing-library/jest-dom/vitestをimportするとカスタムマッチャーが有効になり、describe/it/expectで構造化したテストを書ける。 - Next.js特有のServer Componentsをテストする際は追加の設定が必要になる場合があると注意喚起している。
Claude CodeでStripe決済を実装する｜SaaS月額課金の実践ガイド
Source: Zenn | Published: 2026-05-10 13:41 JST
- Next.js SaaSでStripe月額課金を最小構成で動かすなら、自社DBにサブスク状態を保持しない「ステートレス設計」が結論として推奨されている。
- Stripeを唯一の課金データソースとして毎回API問い合わせる構成で、JWTトークンの有効期限をサブスク終了日に同期させることで期限到来時に自動的にトークンが無効化される。
- 決済はCheckoutセッションでStripeホスト画面に誘導し、完了後にセッションIDからサブスク状態を確認するフロー。
- 解約やカード変更はStripeカスタマーポータルに委譲し、自前実装を避ける設計。
- デプロイ時はWebhookエンドポイント登録（署名シークレット取得）、環境変数の設定、テストモードでのカード動作確認、本番切替時の
sk_test_→sk_live_差し替えが必須作業として整理されている。
CloudflareでEU諸国からのアクセスを遮断する方法 - GDPR対策
Source: Zenn | Published: 2026-05-10 16:17 JST
- GDPR違反が確定すると最低2,000万ユーロの罰金が課されるため、個人運営サービスはEU圏からのアクセスを遮断して回避するのが現実的という結論。
- Cloudflareのセキュリティルール（カスタムルール）機能を使い、30のEU加盟国・関連地域の国コードを式で指定してブロックアクションを設定する手順を具体的に提示。
- ルール作成手順は6ステップで、ドメイン選択→セキュリティルール→「カスタムルールを作成」→ルール名（例：Block EAA for GDPR）入力→提示された式の貼付→アクションを「ブロック」に設定→デプロイ。
- 判定はIP送信元の国コードに基づくため、サーバー側のアプリ実装変更は不要で運用負荷が低い。
- 大企業のように同意管理基盤を整備するのではなく、ターゲットが日本国内に限定された個人開発サービスでのリスク回避策として位置づけている。
ブラウザの手書きノートで Apple Pencil の筆圧を取る — MouseEventからPointerEventに乗り換える話と、getCoalescedEvents()で240Hzサンプリングを取りこぼさない話
Source: Qiita | Published: 2026-05-10 09:54 JST
- ブラウザ手書きノートでApple Pencilの筆圧を取り損ねないためには、MouseEventではなくPointerEventを使い、さらに
getCoalescedEvents()で合体されたサブイベントを取り出すのが結論。 - PointerEventはマウス・タッチ・スタイラスを同一インターフェースで扱え、
e.pressureで筆圧、e.pointerTypeで入力デバイス種別を判別できる。 - Apple Pencilは240Hzで入力サンプルを生成するが、requestAnimationFrameは60Hz相当のため、
getCoalescedEvents()を使わないと1フレーム内に集約された複数サンプルが捨てられる。 - 筆圧値はデバイスごとに挙動が違うため、0の場合はフォールバック値を用意し、想定範囲外の値はクランプ処理が必要。
- 合成イベントでは
getCoalescedEvents()が空配列を返すケースがあるため、[e]へのフォールバックを書いておく必要があると実装上の注意点を提示している。
HonoでCORSを設定してReactからAPIを呼び出す
Source: Qiita | Published: 2026-05-10 18:55 JST
- React(localhost:5173)からHono API(別ポート)を呼ぶ際は別オリジン扱いになるため、Hono側で
hono/corsミドルウェアを設定するのが結論。 - 具体コードは
import { cors } from "hono/cors";のうえでapp.use(cors({ origin: "http://localhost:5173" }))と1行で許可オリジンを指定する。 - ブラウザはスキーム(http)・ホスト(localhost)・ポート番号(5173 vs 3000)の3要素でオリジンを判定し、ポートだけ違っても別オリジン扱いになる。
- フロント側で許可制御するのではなく、悪意あるサイトからのAPI悪用を防ぐためにAPIサーバー側で明示的に許可オリジンを制御すべきと説明している。
- CORSはサーバー側設定がなければプリフライトリクエストでブロックされる仕組みで、Hono採用時の最初の躓きポイントとして整理されている。
毎日の振り返りをAIで管理して自己成長につなげる——エンジニア向け振り返りアプリを個人開発した話
Source: Qiita | Published: 2026-05-10 17:01 JST
- エンジニアの日々の学びが流れて忘れられる課題を解決するため、入力をAIで「学び・詰まったこと・原因仮説・次のアクション」の4カテゴリに自動整理する「Reflekta」を開発・公開した記録。
- 技術スタックはNext.js 14 + Tailwind CSS + shadcn/uiのフロントに、SupabaseをDB、Claude APIをAI処理、Vercelをデプロイ先として採用。
- Claude APIを選んだ理由は「JSON出力の品質」と「Prompt Caching」によるコスト効率の良さと明記している。
- 成長の可視化として、学習ヒートマップ、ランクシステム、スキル成長グラフ、週別ポイントグラフの4つのビジュアル要素を実装した。
- 公開後の学びとして、流入が予想より少なく「良いものは自動で広まる」は幻想であること、登録なしで試せる導線が極めて重要であること、機能開発より「課題提示」をどう伝えるかが難しかったと記述している。
Claude Codeを使ったStripe月額課金の実装｜Next.js SaaS構築ガイド
Source: Qiita | Published: 2026-05-10 16:32 JST
- Next.js SaaSでStripe月額課金を実装する際、Stripeを唯一の課金情報源として扱うステートレス設計を採用するのが結論。
- Checkoutセッション(
/api/checkout)はmode: "subscription"で月額課金を有効化し、metadataにユーザーIDを記録、IP単位で1時間5回のレート制限を組み込む実装例を提示。 - JWT生成 (
/api/subscription/status) ではユーザーID・サブスク状態・有効期限を署名付きトークンに格納し、30日間有効に発行する。 - Webhook受信(
/api/webhooks/stripe)ではstripe.webhooks.constructEvent()で署名検証を行ったうえで、解約・更新・支払い失敗などイベント種別ごとにハンドラーを分ける構成。 - ライブラリ依存は公式の
stripeSDKと、Edge Runtimeでも動くJWTライブラリjoseの2つに絞っている。
ReactとSpring BootをローカルのDocker環境で動かす
Source: Qiita | Published: 2026-05-10 22:44 JST
- React（フロントエンド）とSpring Boot（バックエンド）をリポジトリ直下に
frontend/とbackend/として並べ、ルートにdocker-compose.ymlを置く構成が結論として提示されている。 - 起動は
docker compose up --buildだけで、Dockerが自動でNode.js環境を作りnpm installとnpm run devを実行する流れ。 - フロントエンドは
http://localhost:5173（Vite既定ポート）でアクセスでき、バックエンドはJava側で別途実行する設計。 - フロントとバック双方にDockerfileを置く前提で、docker-compose.ymlで両サービスをまとめてオーケストレーションする。
- 個人プロジェクトの初期セットアップとして、フォルダ分割と最小限のDocker構成を提示する入門記事の位置付け。
NutanixとAWSが語く。既存システムを圧倒的なスピードと低コストでAWSに移行する方法［PR］
Source: Publickey | Published: 2026-05-10 15:44 JST
- NutanixとAWSの共同ソリューションは、まず既存システムをそのままAWSへ移行し、その後段階的にマネージドサービスを取り入れる「二段階アプローチ」を結論として提示している。
- 中核となる「NC2（Nutanix Cloud Clusters）on AWS」はインフラを抽象化し、アプリケーション・データ・AIを横断して構成変更なしにAWS環境へ移せる。
- 「Nutanix Move」はVMware ESXi / Hyper-V / Amazon EC2などからの移行に対応し、インフラ構成変更やアプリ書き換えなしに、最短数週間でデータセンターごと移行可能と説明。
- グローバル実績として「数万VMを5週間で移行」した事例が挙げられており、スピード面の優位を訴求している。
- AWS Marketplace経由での一元請求により、移行コスト抑制と購買プロセス簡素化が同時に実現できると整理している。
Akamai surges on big LLM deal as Cloudflare dims（AkamaiはLLM大型契約で急騰、Cloudflareは陰り）
Source: Hacker News | Published: 2026-05-10 23:53 JST
- AkamaiとAnthropicがLLM処理・展開のための18億ドル・7年契約を締結し、AkamaiのCEO Tom Leightonは「当社史上最大の契約」と表明した。
- Akamai株は契約報道で金曜日に26%急騰し、前四半期にも別企業との2億ドル契約を結んでいたと明かされている。
- 一方Cloudflareは「エージェンティックAI時代に対応した企業設計」を理由に従業員約1,100名（全体の20%）をレイオフし、退職金など最大1億5,000万ドルの費用計上を見込む。
- Cloudflareの四半期収益は6億3,980万ドル（前年同期比34%増）と成長しつつも、2,290万ドルの赤字となり、金曜日に株価は23%下落（時価総額690億ドル超）。
- 同じ分散インフラ・エッジ系企業でも、推論プラットフォーム化に振り切ったAkamaiと組織再編に踏み込んだCloudflareで明暗が分かれたと結論づけている。
All Articles
Zenn
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | Martin Fowlerの『暗黙のハーネス』 コードベース自体に内在する制約の総体 | コードベース自体に埋め込まれた制約こそが、AGENTS.mdだけでは制御できないAIエージェントの安定性を決めるという論考。 | @kenimo49 | 15:42 |
| 2 | 将棋アプリを作りたい #6 - 将棋盤の動きを定義 | 将棋盤クラスに駒の移動と持ち駒配置の操作を追加する過程で、責務境界の設計に悩んだ実装記録。 | @fujishu | 14:37 |
| 3 | 大工30年の俺がAIで見積もり詐欺を暴くサービスを作った話 | 30年の現場知識をAIに乗せ、雑費などの曖昧項目に隠された上乗せを暴くサービスを個人開発した話。 | @toshikatsu_oga | 22:57 |
| 4 | 人事評価コメント ChatGPTプロンプト＆例文集【無料サンプル3個公開】 | 評価期のコメント作成負荷を下げるため、強み評価や否定的フィードバックの言い換え、360度評価向けプロンプトを公開。 | @aoi_ei | 22:01 |
| 5 | 「作れるは作れる」だけど限界もある——AIと3ヶ月でSQL学習サイトを育てた話 | 非エンジニアがAIを活用し、Next.js/TypeScript/Prisma/Stripe/認証/WebAssemblyを使ってSQL学習サイトを3ヶ月で構築した記録。 | @eisaku | 14:20 |
| 6 | 静的サイトジェネレータでMarkdownをそのままHTML化する | Anthropicエンジニアが提唱するHTMLドキュメント運用に対し、Astroで既存MarkdownをそのままHTML化する手段を提案。 | @ma_me | 16:45 |
| 7 | pnpmをアップデートする超簡単な方法 | pnpmのアップデート通知に対し、npm経由でグローバルに再インストールする2コマンドの対処法。 | @RyoK73 | 17:57 |
| 8 | Rustバックエンド入門 #3 - Axum + SQLxのエラーハンドリング | Axum+SQLxでTodo APIのエラーをResult型と404/500ステータスで処理し、JWT認証の基盤を整える解説。 | @Ibuki Nagase | 16:56 |
| 9 | Floci上のRDS for PostgreSQL 17.7をローカル環境で検証してみた | TerraformでFloci上にRDS PostgreSQL 17.7を立て、ローカルAWS互換環境でDB作成・管理を検証した記録。 | @KKobayashi | 15:32 |
| 10 | Next.js + Supabase + Vercelで初めて本番公開するまでにハマったこと | ギターサービス「RiffLog」を本番公開する過程で、RLS・外部キー・Google OAuth・Supabaseリレーションで詰まった点をまとめた記録。 | @ハードロック腰部捻挫組 | 19:42 |
| 11 | 銀河の歴史が、また1ページ。——「AI-DLC」という新戦術で、ゼロから始める新開発生活 | Kiro IDEとaidlc-workflowsを使い、AWS流のAI-DLC手法でECサイトをゼロから構築・機能追加した実践レポート。 | @SoulGemAnalyst | 23:36 |
| 12 | Google Cloud Next 2026 参加レポート：検索レコメンド PdM が見た最前線 | DMMのデータ系PdMがGoogle Cloud Next 2026で見た検索・レコメンド領域の最新アップデートをまとめた現地レポート。 | @issei2029 | 22:05 |
| 13 | ブラウザが勝手に事前確認している？プリフライトリクエストとは？ | CORSエラーの背景でブラウザが送るプリフライトリクエストの役割を、POST送信前の確認動作として初学者向けに解説。 | @OZ | 18:34 |
Qiita
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | 時刻情報の記録方法、CSV形式の場合 - Day 9 | 時刻記録の保存形式にCSVを選んだ理由と、複数回の試行錯誤を経た設計判断をまとめた個人開発ログ。 | @1206-1204-777 | 23:58 |
| 2 | Claude CodeによるFirestore設計戦略 | Firestoreではクエリ要件から逆算してスキーマを設計すべきで、RDBM的なコレクション整理は陥穽になるという指針。 | @masa_ClaudeCodeLab | 21:38 |
| 3 | Nuxtプロジェクトのセットアップ手順 | 2026年5月時点のNuxt 4で新規プロジェクトを立ち上げるための初期セットアップ手順をNext.jsと対比しながら解説。 | @jyas-protein | 20:43 |
| 4 | iframeの値を取得 | document.getElementById()でiframe要素を取得しonloadハンドラ内で値を読み取る最小JSスニペット。 | @greengreen777 | 21:47 |
| 5 | GensparkのAPIを呼び出すライブラリを作った！ | Genspark CLIの調査をもとにGenspark API呼び出し用クライアントライブラリを開発しGitHubで公開した報告。 | @lumis | 21:35 |
| 6 | CDNで配信されているJavaScriptライブラリをブラウザのコンソールですぐに試す方法 | ローカルプロジェクトを作らず、ブラウザのDevToolsからCDN配布JSライブラリのバージョン挙動を即試す手法。 | @neko_the_shadow | 10:14 |
| 7 | 『ChatGPTに聞けばいい時代』にチートシート逆引きツールを14本作った理由。LLMでは代替できないUXの話 | AI時代でもコマンド検索の逆引きUXはLLMでは代替できないと判断し、Next.js等で14本のチートシートツールを作った経緯。 | @sakutto-panda | 08:31 |
| 8 | React-学習記録 | ReactのkeyとindexとitemをそれぞれReact識別用・内部管理用・画面表示用と区別して整理した学習メモ。 | @y_nitta | 19:57 |
| 9 | Rails + NeonDB で PG::InFailedSqlTransaction が出た時の対処法 | NeonDBに移行したRailsアプリが本番でPG::InFailedSqlTransactionを出した事象と、その回避策を共有。 | @masa_tech_0326 | 23:08 |
| 10 | 【AIと一緒に】やっとDBにテーブルができました。 Day7 〜マイグレーション実行からAPI動作確認まで〜 | PostgreSQLのマイグレーション実行とAPIのJSON応答確認まで進めた日次開発ログ（typoやビルド詰まりも記載）。 | @dev-rabbit-mkt | 20:45 |
| 11 | SupabaseのClient宣言ファイルでエラー解消した話 | React+TypeScript環境でSupabaseクライアント宣言ファイルが出すエラーを、参考資料を頼りに解消した記録。 | @takahiro_honda | 17:39 |
| 12 | 医療系アプリのセキュリティ設計をSupabaseで整理する | 薬局アプリ開発を題材に、Supabase利用時に「誰が・どの権限で・何にアクセスできるか」で設計する重要性を整理。 | @nurselog_ | 14:42 |
| 13 | 現実世界の挙動シナリオを売買するPWA「Buy My Behavior」 | 現実世界での行動シナリオを依頼できるPWA「Buy My Behavior」の個人開発記。 | @victorsonarsen | 03:01 |
| 14 | 【Amazon Quick 入門】Freeプランで使用できる4つの機能を体験してみた！ | AWSのAI BIサービス「Amazon Quick」のフリープランで使える4機能（分析・リサーチ・自動化・コンテンツ生成）を体験した記録。 | @yosuke-suzuki | 23:40 |
| 15 | ファーストビュー改善でCVRを上げる方法 — 構成要素とCritical CSS・LCP最適化 | 閲覧時間の57%が集中するファーストビューを、Critical CSSとLCP最適化で改善しCVRを引き上げる戦略の解説。 | @masakazuimai | 09:09 |
| 16 | 【完全ガイド】CRO（コンバージョン率最適化）をコードで実装する8つの手法 | 既存トラフィックから成果を最大化するため、ABテストやフォーム最適化など8つのCRO実装パターンをコード例つきで提示。 | @masakazuimai | 09:09 |
Publickey
| # | Title | Summary | Published |
|---|---|---|---|
| 1 | 企業向けストレージベンダのCEO、半導体部品の調達コストが4倍から10倍に急騰していると説明。製品価格を70％値上げ、今後さらなる値上げも | Everpureが主要半導体部品の調達コスト4〜10倍化を受け、製品価格を70%値上げしさらなる引き上げも示唆。 | 15:07 |
gihyo.jp
記事なし。
GIGAZINE
Web開発関連記事はありませんでした。
ITmedia News
Web開発関連記事はありませんでした。
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
Top 20に採用済み。残記事なし。