
はじめに
今週は、開発体験を押し上げるアップデートと、足元をすくうセキュリティのニュースが同時に来た一週間でした。TypeScript 6.0が3年ぶりのメジャーリリースとして登場し、Go製コンパイラ移行(Project Corsa)に向けた動きがいよいよ現実味を帯びています。その一方で、npmではワーム型サプライチェーン攻撃「CanisterWorm」が確認され、エコシステムの“進化”と“脅威”が並走していることを改めて突きつけられました。
さらに、ViteのRolldown採用やNext.jsの開発起動高速化など、ビルドツール周りも大きく動いています。加えて、FigmaキャンバスのMCP対応やStorybook MCPの公開、Claude CodeのAuto Modeなど、AIエージェントが開発ツールに直接つながる話題も盛りだくさんでした。ツール同士がAIを介してつながり始める“次の開発スタイル”が、一段近づいた週と言えそうです。
今週のトピック
ツール・エコシステム
TypeScript 6.0 — Go製コンパイラ移行への布石となるメジャーアップデート
3年ぶりのメジャーリリースとなるTypeScript 6.0が公開されました。最大のポイントは、デフォルト値の大幅な変更です。strictがtrueに、moduleがesnextに、targetがes2025にそれぞれデフォルトが変わっています。既存プロジェクトではtsconfig.jsonの見直しが必要になりそうですが、移行期間中はignoreDeprecations: "6.0"を設定すれば一時的に非推奨警告を抑制できます。7.0ではエラーとなると思われるので、対応することをおすすめします。
そしてこれがJavaScriptベースで実装された最後のTypeScriptリリースになります。次のTS 7.0はProject Corsa(コンパイラのGoネイティブ書き直しプロジェクト)として開発が進んでおり、10倍の高速化が見込まれています。まずは公式のマイグレーションガイドで自分のプロジェクトへの影響を確認しておきたいところです。
CanisterWorm — npmサプライチェーンを狙うワーム型攻撃が確認
npmで正規パッケージを乗っ取るワーム型サプライチェーン攻撃「CanisterWorm」が確認されました。postinstallスクリプト(npm パッケージのインストール後)でバックドアを起動して、npm認証トークンを窃取して連鎖的に拡散するという手口で、40以上のパッケージが影響を受けています。
対策としてはpackage-lock.jsonによるバージョン固定、npmのignore-scripts設定(npm インストール時に postinstall フックを無効)の有効化、postinstallスクリプトの監査が挙げられます。チームでも依存パッケージのpostinstallスクリプトを一度チェックしてみるのがおすすめです。
Claude Code Auto Mode — モデルベース分類器で操作を自動許可
Claude CodeのAuto ModeがTeamプランのリサーチプレビューとして提供開始されました。モデルベースの分類器がアクション(ファイル操作やコマンド実行など)の安全性を自動判定し、安全と判断されたものは確認なしで実行してくれます。誤検出率は0.4%とのこと。
ハーネスエンジニアリング(AIエージェントの制御・監視を設計する規律)の考え方を実装に落とし込んだ機能で、開発体験がかなり変わりそうです。Teamプランを利用中の方はぜひ試してみてください。
CI自動修正 — Claude CodeがPRのCIエラーを自動で直してくれる
Claude Code PMのNoah Zweben氏が発表したauto-fix機能は、PRのCIエラーやレビューコメントをでClaude Codeが自動修正するクラウド上で利用できる機能です。
リントエラー程度の修正なら十分実用的で、承認フローを挟めば段階的に導入しやすいのが魅力です。CIが落ちるたびに手動で直す手間が減るのは地味にうれしいですね。
Lightpanda — AIエージェント向けZig製ヘッドレスブラウザ
AIエージェント用途に特化したヘッドレスブラウザです。Zig言語で独自実装されており、DOM操作・JavaScript実行・ネットワーク処理のみに絞ることで、Chromeの11倍高速かつメモリ消費が9分の1に抑えられています。グラフィカルレンダリングは行わず、Puppeteer互換のAPIとCDP(Chrome DevTools Protocol — Chromeのデバッグ・自動化用プロトコル)に対応しています。MCP(Model Context Protocol — LLMと外部ツール連携のプロトコル)サポートも追加されており、AIエージェントからのWeb操作に使えそうです。
Figmaキャンバスがエージェントに開放 — MCPでAIから書き込み可能に
Figmaがuse_figma MCPツールを公開し、AIエージェントからキャンバスへの書き込みが可能になりました。同時にSkills機能も発表されています。たとえばコードからFigmaのデザインを自動生成したり、デザインの一括修正をエージェントに任せたりといった使い方が考えられます。デザインとコードの距離がまた一歩縮まりそうですね。
Storybook MCP for React — AIがコンポーネントを理解して再利用率アップ
Storybook 10.3でReact用のMCPサーバーが公開されました。AIエージェントがStorybookのコンポーネントメタデータに直接アクセスできるようになり、コードの再利用率が12.8%向上、コード生成速度は2.76倍に改善したとのことです。現時点ではReactのみの対応ですが、Chromatic経由で無料公開もできます。既存のコンポーネントライブラリをAIに活用させたい場合は試してみる価値がありそうです。
技術・設計
ハーネスエンジニアリングとマルチエージェント構成 — 「作る・評価する・設計する」の分離が鍵
マルチエージェント構成で性能を引き出すには、「作る」「評価する」「設計する」という役割をエージェントごとに分離するのが効果的だという知見が共有されました。特にコンテキストウィンドウの肥大化対策として評価役を独立させるのが重要です。
チーム内でもPlaywrightベースのQAエージェントを導入して、テスト実行を別エージェントに任せる構成を検討しています。たとえば「コード生成エージェント→レビューエージェント→テストエージェント」のパイプラインを組むと、1つのエージェントに全部任せるより安定した結果が得られるイメージです。
CSS attr()関数の進化 — content以外のプロパティでも属性値を参照可能に
CSS attr()関数がこれまでのcontentプロパティ限定から、任意のプロパティで利用可能になりました(CSS Values and Units Level 5)。HTML属性の値をCSSから直接参照してスタイルを制御できるので、たとえばdata-size属性の値をwidthに使うといったことがCSS側だけで完結します。type()関数と組み合わせて型指定もできます。Chrome/Edge 133以降で対応済みですが、SafariとFirefoxは未対応(対応率は約67%)なので、プログレッシブエンハンスメントとして使うのが現実的です。
ショートノート
- Web Quality Skills — Addy Osmani氏作のClaude Code向けWeb品質最適化スキル集
- Chrome Vertical Tabs — Chrome 146でタブの縦並び表示がフラグ付きで利用可能に
- Expect — git diffからAIがテスト計画を生成しPlaywrightで実行するテストツール
まとめ
今週は、TypeScript 6.0の登場で「TypeScriptの標準設定(デフォルト)が大きく変わる」ことが話題になった一方で、npmのサプライチェーン攻撃もあり、便利さとリスクが同時に増えているのが印象的でした。
まずやっておくと良いのは2つです。1つ目は、TypeScriptを更新したときにエラーや出力が変わらないか、プロジェクトのTypeScript設定(tsconfig.json)を確認すること。2つ目は、依存パッケージのpostinstallなどインストール時スクリプトを一度点検することです。
また、FigmaやStorybookなどがMCPでAIエージェントから操作できるようになってきており、開発ツールが「AIとつながる前提」へ進んでいる流れも見逃せません。
この記事はXtoneフロントエンドチームの朝会の議事録を元に作成されました。