
はじめに
今週は、開発者にとって見過ごせないニュースが続きました。とくに注目は、週間1億ダウンロードを超えるaxiosがサプライチェーン攻撃の標的になった件です。依存関係を経由した攻撃は、規模の大小に関わらずどのプロジェクトにも刺さり得ます。今回は「何が起きたか」に加えて、更新時のクールダウン、ロックファイルの扱い、インストールスクリプト無効化といった、すぐ実践できる対策の観点でも整理します。
今週はリリース面でも動きがありました。Cloudflareが“WordPressの精神的後継”を掲げるCMS「EmDash」を発表し、Googleはオープンモデル「Gemma 4」を公開。さらにCursor 3もエージェント統合を軸に大きく刷新され、開発ツールが「AIをどう組み込むか」ではなく「AIと一緒にどう開発するか」を前提に設計され始めていることが見えてきます。この記事では、こうした潮流も含めて今週のトピックをまとめて振り返ります。
今週のトピック
ツール・エコシステム
axios サプライチェーン攻撃 — npm依存関係を狙う攻撃の実態と防御策
axiosがサプライチェーン攻撃(ソフトウェアの依存関係を悪用して悪意あるコードを配布する攻撃)の標的になった件が朝会で取り上げられました。攻撃自体はaxiosのコードに直接悪意あるコードが注入されたわけではありません。依存パッケージのpostinstallフック(npmパッケージインストール後に自動実行されるスクリプト)経由でRAT(遠隔操作マルウェア)を配布する手口でした。影響バージョンはv1.14.1とv0.30.4です。
チームでは対策として、パッケージ更新時のクールダウン期間の設定、ロックファイルの厳密な運用、インストールスクリプトの無効化が話題になりました。pnpm v10やBunではインストールスクリプトがデフォルトでブロックされるとのこと。GitHub Actionsもタグ指定ではなくコミットハッシュで固定すべきで、pinactを使えばタグからハッシュへの自動変換ができます。Zennの対策記事もあわせて参考になりそうです。
Claude Code ソースコード漏洩 — パッケージ公開設定の落とし穴
Claude Codeのnpmパッケージv2.1.88にソースマップファイルが誤って同梱される事故がありました。約512,000行・約1,900ファイルのTypeScriptコードが一時的に閲覧可能になったとのことです。誤って公開されたソースコードは見ないというのがエンジニアの倫理と思いますが、ネット上ではフィーチャーフラグ(未公開機能の有効/無効を切り替えるコード内のスイッチ)から将来のロードマップの一端が見え、盛り上がっていました。
EmDash — CloudflareによるAstroベースのフルスタックCMS
Cloudflareが「WordPressの精神的後継」を掲げるオープンソースCMS「EmDash」をベータ公開しました。2026年1月にCloudflareが買収したAstroをベースにしており、MITライセンスで提供されています。面白いのはセキュリティ設計で、WordPressのセキュリティ問題の96%はプラグイン起因だそうです。EmDashではDynamic Worker(Cloudflareのv8隔離環境)でプラグインをサンドボックス実行する仕組みで対処しています。
もうひとつの注目ポイントはAIネイティブ設計です。全インスタンスにMCP(Model Context Protocol — LLMと外部ツール連携の標準プロトコル)サーバーが組み込まれていて、エージェントから直接CMSを操作できます。
Gemma 4 — Googleのオープンモデルがスマホやラズパイでも動作可能に
Googleが2026年4月2日にApache 2.0ライセンスで公開したオープンモデルです。E2B、E4B、26B-A4B、31Bの4モデル構成です。PLE(各デコーダ層に補助埋め込みを供給し少パラメータで高表現力を実現する技術)により小型ながら高い性能を出しています。
約1万円のRaspberry Pi 5でも動作するそうです。入力の処理速度(Prefill)は毎秒133トークン、応答の生成速度(Decode)は毎秒7.6トークンとのことで、高価なGPUがなくても手元でAIを動かせる時代になったんですね。128Kコンテキスト、140言語対応、マルチモーダル(画像・オーディオ)にも対応しているとのこと。ローカル実行によるAPIコスト削減やエッジデバイスへのAI組み込みなど、フロントエンド開発者としても活用シーンが広がりそうです。Google DeepMindのモデルページも参考になります。
Cursor 3 — エージェントファーストに生まれ変わった大型リニューアル
Cursor 3が2026年4月2日にリリースされました。VS Codeの拡張ではなくゼロからUIを再構築したとのことで、かなり思い切った刷新です。目玉のAgent Window機能では、ワークスペースごとのチャット履歴管理やローカル/クラウドエージェントの統合が実現されています。500以上のMarketplaceプラグインにも対応しました。
3月19日に先行リリースされたComposer 2(Cursor独自のコーディング特化AIモデル)も組み込まれており、コーディング体験がかなり変わりそうです。
OpenAI公式 Codex プラグイン — Claude CodeからCodexを利用可能に
OpenAIが公式に開発した初のClaude Code向けプラグインです。コードレビュー(/codex:review)やバグ調査委任(/codex:rescue)などのスラッシュコマンドが使えるようになります。これまでチーム内で各自が独自にCodex(OpenAIのクラウド型コーディングエージェント)スキルを作成していた状況が解消されそうです。Apache 2.0ライセンスで公開48時間で10,000スター超を獲得しました。ChatGPT無料プランでも利用可能とのこと。
Claude Code で Computer Use が利用可能に
Claude CodeにComputer Use(AIがマウス・キーボードを操作しPC画面を自動制御する機能)が統合されました。2026年3月24日にmacOS限定のリサーチプレビューとして公開されたもので、コネクタを持たないアプリに対してスクリーンショットベースで操作を自動実行できます。朝会のデモではSlackチャンネルの最新投稿を探す操作が紹介されていました。ローカル環境でのデスクトップ整理やファイル操作など、ターミナル外の自動化に可能性を感じます。
a11yer — Reactアプリのアクセシビリティを自動補正するライブラリ
<A11yer>コンポーネントでラップするだけで、lang属性やtitleタグの自動挿入、画像のalt属性追加などを自動補正してくれるReact向けライブラリです。a11y(accessibilityの略記)対応の最低限のセーフティネットとして便利そうですね。WCAG(W3Cが策定するWebコンテンツのアクセシビリティガイドライン)基準の約30-40%をカバーできるとのこと。Next.js、Remix、Vite+Reactに対応しています。重要パッチはマウント時に同期実行し、残りはrequestIdleCallbackで分散処理する設計になっているのも好印象でした。
READMEにも書いてあるとおりこのライブラリのみでアクセシビリティを担保するのではなく、今まで通りアクセシビリティの設計・実装などは行ってその補助として使うのが良さそうです。
React Compiler 導入時の注意点 — React Hook Formとの非互換
React Compiler(Reactの自動メモ化コンパイラ、旧React Forget)を継続案件に導入する検討が進んでいます。調べてみたところ、React Hook Formのwatch()がInterior Mutability(参照は不変だが内部状態が変化するパターン)を持っていました。メモ化により更新が反映されなくなる問題があります。React公式ドキュメントでもreact-hook-formはincompatible-libraryとして明示されています(TanStack TableやMobXも同様)。回避策はuseWatch()の使用か"use no memo"ディレクティブの付与です。導入を検討しているチームは、まず公式の非互換ライブラリリストを確認してみてください。
Vercel React View Transitions — AIスキルとNext.jsガイドが更新
Vercel LabsからReact View Transitions API(ブラウザネイティブのUI状態遷移アニメーションAPI)向けのAgent Skillsが公開されました。npx skills addで導入できます。React 19.2以降では<ViewTransition>コンポーネントとして宣言的に利用できます。Next.js公式のView Transitionsガイドも更新されているので、アニメーション実装の参考にしてみてください。
このスキルの他にもReact Best Practicesのルールが追加されたりしていますので、併せて公式のスキルを確認すると良さそうです。
技術・設計
CSS light-dark() の画像対応 — ダークモード実装がさらに簡潔に
CSSのlight-dark()関数について、画像値への対応拡張が進んでいるという記事が共有されました。カラー値に対するlight-dark()はすでにSafari 17.5+を含む主要ブラウザでサポート済み(Baseline Newly Available)ですが、今回の話題は画像値への拡張です。color-scheme(要素のライト/ダークモード対応を宣言するCSSプロパティ)と組み合わせることで、従来のCSS変数+メディアクエリによる実装が不要になります。
画像対応はChromium 148で実験フラグ有効時に利用可能、Firefox 150で完全サポート(安定版は2026年4月21日予定)です。Safariの画像対応はまだ未実装のため業務での開発で利用するのは難しいですが、便利そうなプロパティなので対応が待ち遠しいですね。
Promise.withResolvers() — ECMAScript 2024で正式仕様化されたPromiseパターン
Promise.withResolvers() は ECMAScript 2024で仕様化された機能です。従来はPromiseコンストラクタのコールバック内でしかresolve/rejectを受け取れませんでしたが、この関数を使えばスコープ外で扱えるようになります。たとえばストリーム処理やイベントキューの実装で、Promiseの解決タイミングを外部から制御したいケースで特に便利です。
Pretext — TypeScriptでテキスト位置を独自計算するレイアウト技術
MidjourneyエンジニアのCheng Lou氏(React/ReScriptの開発でも有名)が公開した軽量・ゼロ依存のTypeScriptライブラリです。DOM/CSSに依存せず、Canvasのフォントメトリクス APIを使って純粋な算術でテキスト配置を予測する仕組みで、CJK・アラビア語等の多言語にも対応しています。GitHub公開48時間で14,000スター超を獲得しました。
公式ベンチマークでは500テキストのlayout()処理が約0.09msで完了するそうです。従来のDOM計測と比較して300〜600倍高速と主張されています(ベンチマークは一括処理の結果であり、実アプリでの体感とは異なる可能性あり)。動画に合わせて文字を追従させるなど、通常のCSS/DOMでは実現しにくい高度なテキスト表現が可能です。
ショートノート
- Embla Carousel — SwiperからEmbla Carouselへの移行事例が共有されました。gzip後約7KBとSwiper(45KB超)に比べて大幅に軽量で、依存関係ゼロ。React/Vue/Svelte/Solid対応です。
- SuperLocalMemory V3 — AIエージェントのメモリシステムの課題を微分幾何学・代数的トポロジー・確率解析で解決する論文です。LLMを一切使わずCPUのみで動作するZero-LLMモードが特徴的で、LoCoMoベンチマークで平均+12.7ポイントの改善を達成しています。
- SecHole — CTF(脆弱性を突いてフラグを奪取するセキュリティ競技形式)をブラウザで手軽に体験できるゲームです。Standard Mode 6問、Advanced Mode 5問、Crypto Mode 5問の計16チャレンジが用意されています。Next.js製で、プレミアムコンテンツの閲覧突破など実践的な課題を通じてセキュリティの基礎が学べます。チームの勉強会ネタにも良さそうです。
- Verbalized Sampling — RLHF後のLLMが無難な回答に寄りがちな「モードコラプス」への対処法を提案した論文です。「複数の回答とそれぞれの確率を生成せよ」と指示するだけの学習不要(training-free)手法で、Creative writingタスクで1.6〜2.1倍の多様性改善が確認されています。チーム内でも試したところ、確率指定により通常は出てこない回答が生成できました。
- Anthropic の感情概念研究 — Claude Sonnet 4.5の内部活性化から171個の感情概念に対応する「感情ベクトル」が存在することを示した研究です。LLMが感情を感じているかどうかは別として、これらのベクトルと出力の間に関連があることが報告されています。未リリースの初期スナップショット対象で、リリース版では問題行動はほぼ発生しないとのことです。
まとめ
今週は、サプライチェーンの話題がいよいよ“現実の手触り”になってきた週でした。axiosの件はもちろん、Claude Codeのソースマップ誤同梱も含めて、依存関係や配布設定みたいな「普段あまり意識しないところ」が一番危ない、というやつです。
対策も結局は基本が効きます。ロックファイルを雑に更新しない、更新はレビュー前提にする、インストールスクリプトを無条件に走らせない、公開物(.npmignore/files)を棚卸しする。CIはタグ指定よりコミットハッシュ固定に寄せる。このへんを淡々とやるだけで、リスクはちゃんと下がります。
それと同時に、EmDash・Gemma 4・Cursor 3あたりの動きを見ると、開発ツール側はエージェント前提の時代に一段進んだ印象です。守りを固めつつ、攻め(AIツール)にも置いていかれないようにしたい、そんな締めの週でした。
この記事はXtoneフロントエンドチームの朝会の議事録を元に作成されました。