セキュリティ Node.js 2026年6月Security Release Node.js プロジェクトは2026年6月18日 に22.x、24.x、26.x の各リリースラインに対するセキュリティアップデートをリリースし、合計11件 のCVEを修正しました。最も深刻な問題は2件 あります。CVE-2026-48933 はWebCrypto AESの整数オーバーフロー2 GiBの倍数の場合にプロセスがクラッシュします。CVE-2026-48618 はresolverとverifier間のホスト名正規化の不一致によるTLSワイルドカード深度認証バイパスERR_PROXY_TUNNELエラーメッセージでのプロキシ認証情報の漏洩、攻撃者が制御するORIGINフレームによるHTTP/2 のメモリ無制限増加、GOAWAYセッションのクリーンアップバグ、mTLSホスト名の大文字小文字区別バイパスなどが含まれます。依存関係の更新にはllhttp 9.4.2 、nghttp2 1.69.0 、OpenSSL 3.5.7 、各ラインのundiciバージョンアップが含まれます。サポートされているすべてのアクティブLTSラインが影響を受けるため、直ちにアップグレードすることを強く推奨します。
Read Articlearrow_forward Video · ブラウザAPI
WebMCP：50% Perfect Jack HerringtonがWebMCP の最新改善点をデモし、この標準がまだポテンシャルの半分しか達成していないと説明します。chrome://flagsで2つ の項目を有効化することで利用できる新しいChrome DevToolsサポートが、ApplicationタブにWebMCPパネルを追加します。このパネルは現在のページに登録されたすべてのツールを一覧表示し、入出力を確認しながら個別のツールを直接実行できます。新たに導入された宣言的APIは、JavaScriptコードなしでフォーム要素にtoolname、tooldescription、toolparamdescription HTMLアトリビュートを追加するだけで、その要素をMCPツールとして自動登録します。これはインメモリのTodoリストでライブデモされました。命令型API（document.modelContext.registerTool）と宣言型アプローチが比較されます。Herringtonは、ChromeのGemini統合を含むブラウザのAIパネルがまだmodel contextオブジェクトを消費していないため、ブラウザ側のMCPインフラを駆動するAIクライアントが存在しないとして、この標準は半分しか完成していないと主張しています。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · Angular READ TIME: 19m
Angular 22最大の変化：OnPushがDefault Change Detection Strategyに 2026年6月3日 にリリースされたAngular 22 は、明示的な戦略を設定していないすべてのコンポーネントに対してChangeDetectionStrategy.OnPushをデフォルトとして適用します。これは以前の複数のバージョンにわたって導入されたシグナルベースのリアクティビティモデルを完成させる変更です。旧Defaultストラテジーはリストのポジションではなく動作を説明するChangeDetectionStrategy.Eagerに改名されました。ng updateを実行すると、既存のコンポーネントに自動的にEagerタグが追加されてアップグレード前の動作が維持されますが、node_modules内のコンパイル済みサードパーティライブラリコードは書き換えられません。RxJSサブスクリプション内でプレーンフィールドに書き込むライブラリコンポーネントは、アップグレード後にテンプレートバインディングの更新が静かに止まる可能性があります 。推奨される修正方法はtoSignal()を介してオブザーバブルをシグナルにブリッジすることです。今回のリリースではResource API（resource、rxResource、httpResource）が安定版に昇格し、実験的なdebounced()ヘルパーが追加され、ツールチェーンの最低要件がTypeScript 6 およびNode 22+ に引き上げられ、strictTemplatesのデフォルトがtrueに変更され、HttpClientがFetchバックエンドに切り替わります。
READ_FULL_LOGarrow_forward Article · React READ TIME: 21m
ReactでuseCallbackとuseMemoの使いすぎを避ける ReactコードベースでuseCallbackとuseMemoを反射的に適用するケースが多いですが、各呼び出しはキャッシュされた値と依存配列のためのメモリを割り当て、関数生成や50件 のソートといった軽い処理ではオーバーヘッドの方が大きくなります。このガイドでは、SearchPageコンポーネントがすべての状態、フェッチ、コールバックを管理するNext.js検索ページを例に、実際に必要なコンポーネントにロジックを移動するリファクタリングを段階的に解説します。ProductTableは自身のuseQueryとローカルソート状態を管理し、Filterコンポーネントはドロワー状態とcountries/colors/modesのフェッチ、activeFilterCountを統合管理します。Searchはデバウンスrefを内部化し、FilterChipsは独自にpriceLabelを計算します。これにより正確性を維持しながら、ほとんどのメモ化が不要になります。また、依存配列へのプリミティブ値の使用、コンポーネント外部でのオブジェクト定義、useMemoの代わりにuseStateを活用して不安定なオブジェクト参照による無限レンダーループを修正する方法も解説しています。
READ_FULL_LOGarrow_forward Article · ツール READ TIME: 5m
TanStack React向けStorybook：Router・Start・QueryをFirst-class Support Storybook がTanStackコアチームと協力して、TanStack Router、Start、Queryへのネイティブ統合を提供する専用フレームワークパッケージ@storybook/tanstack-reactをリリースしました。すべてのストーリーはインメモリヒストリを使用するRouterProviderに自動でラップされ、ルートパラメーターと検索パラメーターはコンパイル時にルートの宣言済みスキーマに対して型チェックが行われます。createServerFn()で作成されたTanStack Startのサーバー関数は自動的に通常のモック関数にスタブ化され、実際のサーバー、データベース、認証レイヤーを起動せずに各ストーリーで成功、ローディング、空状態、エラー状態を設定できます。共有QueryClientデコレーターパターンによりストーリーごとのキャッシュシーディングが可能です。@tanstack/react-startのサーバー専用インポートはビルド時にViteプラグインを介してブラウザ安全なモックにリダイレクトされます。React 18 以上とVite 7 以上が必要で、automigrate CLIコマンドで既存の@storybook/react-viteプロジェクトに追加できます。
READ_FULL_LOGarrow_forward Article · フレームワーク READ TIME: 10m
WaspでFull-stack LogicをTypeScript Specとして記述可能に バッテリー同梱 のフルスタックJS/TSフレームワークWasp が、独自DSLコンパイラをTypeScriptネイティブのスペックレイヤーに置き換えました。開発者は@wasp.sh/specからインポートしたpage、route、query、action、jobなどのスペックコンストラクターを使って*.wasp.tsファイルを作成し、単一のexportされたappオブジェクトに組み立てます。with { type: ref }インポート属性により、スペックビルド時に評価せずにReactやNode.jsの実装ファイルを参照できます。スペックは純粋なTypeScriptなので、forループ、サードパーティライブラリ、ディスク読み込み、フィーチャー縦型構造をすべてサポートします。記事では、スペックコードだけで実装したファイルベースルーティングの例を紹介し、配布可能なインターフェース定義のフルスタック垂直スライスであるFull Stack Modules （FSM）のロードマップも公開しています。
READ_FULL_LOGarrow_forward Article · React READ TIME: 5m
Async Form向けReact 19 useActionStateを使いこなす React 19 のuseActionStateフックは、非同期フォーム処理における繰り返しのボイラープレート — ローディングフラグ、エラー状態、成功状態、try/catchブロック — をstate、submitAction関数、isPendingブール値の3つ の値からなる単一のAPIに統合します。アクション関数はpreviousStateとFormDataオブジェクトを受け取り次の状態を返し、Reactが非同期遷移全体を調整します。このガイドでは、useActionStateが「use server」で宣言されたServer Actionsと直接連携して、カスタムAPIルートや手動fetchなしにクリーンなフルスタックワークフローを実現する方法を示します。useActionStateとuseReducerを比較し、useReducerは同期的な有限状態ロジックに適しており、useActionStateはI/Oバウンドの非同期ワークフロー向けであることを説明します。useActionStateとuseOptimisticを組み合わせることで、サーバー確認前の即時UI更新が可能です。アクションはReactのトランジションシステムを通じて実行されるため、長時間の処理中もUIはインタラクティブな状態を維持し、更新は中断可能です。
READ_FULL_LOGarrow_forward summarize Digest_Summary
第25週 のJavaScriptニュースはセキュリティが中心となりました。Node.js がすべてのアクティブLTSライン（22.x、24.x、26.x ）にわたって11件のCVEを修正する緊急パッチをリリースしました。2つ の深刻な脆弱性であるCVE-2026-48933 （WebCrypto AES整数オーバーフロー）CVE-2026-48618 （TLSワイルドカード深度認証バイパス）2 メモリ増大やERR_PROXY_TUNNELメッセージでのプロキシ認証情報漏洩に対する中程度の修正は、ランタイムレベルのセキュリティ管理が依然として欠かせないことを示しています。依存関係の更新にはOpenSSL 3.5.7 、llhttp 9.4.2 、nghttp2 1.69.0 が含まれます。
フレームワーク面では、Angular 22 が明示的な戦略を持たないすべてのコンポーネントにChangeDetectionStrategy.OnPushをデフォルトとして適用することでシグナルベースのリアクティビティへの移行を完了しました。旧DefaultストラテジーはEagerに改名されました。ng updateによるマイグレーションは既存の動作を維持しますが、RxJSサブスクリプション内でプレーンフィールドに書き込むコンパイル済みサードパーティライブラリは、toSignal()でブリッジしなければ静かにレンダリングが止まる可能性があります 。一方Wasp は独自DSLコンパイラを*.wasp.tsファイルと@wasp.sh/specコンストラクターを使うTypeScriptネイティブのスペックレイヤーに置き換え、forループ、サードパーティインポート、そして分離されたフルスタック契約のためのwith { type: ref }インポート属性をサポートするようになりました。
Reactのツール面では2つ の注目すべき追加がありました。Storybook がゼロコンフィグでのintegrationを提供する@storybook/tanstack-reactをリリースし、ストーリーごとにcreateServerFn()のサーバー関数を自動スタブ化します。またReact 19 のuseActionStateに関する詳細なガイドでは、このフックが非同期フォームのボイラープレートをServer Actionsと直接連携する3 値のAPIに統合する方法が示されました。WebMCP 標準は率直な評価を受けました。Chrome DevToolsがWebMCPパネルと宣言的HTMLアトリビュートAPIをサポートするようになりましたが、ブラウザのAIパネルがまだmodel contextオブジェクトを消費していないため、標準は半分しか機能していない状態です。
Key Takeaways 直ちにNode.jsをアップグレードしてください。CVE-2026-48933 （WebCrypto AESオーバーフロー）とCVE-2026-48618 （TLSワイルドカードバイパス）がすべてのアクティブLTSラインに影響し、OpenSSLは3.5.7 になりました。 Angular 22 のOnPushデフォルト化により、RxJSサブスクリプション内でプレーンフィールドを変更するコンパイル済みサードパーティライブラリのコンポーネントが静かに壊れます。アップグレード前にtoSignal()でブリッジしてください。 Storybookの@storybook/tanstack-reactはTanStack Startのサーバー関数をストーリーごとに自動スタブ化し、コンポーネントテストで実際のサーバー、データベース、認証レイヤーが不要になります。 
