「今週のフロントエンド」2026/06/26号

はじめに

今週の朝会で話題になったトピックを凝縮して届けます。2026年6月第4週は、今後のフロントエンドの在り方を占うような大きなニュースが続きましたね。主役は「Figma Config 2026」と、AIエージェントの自律化を指す「ループエンジニアリング」でしょう。デザインのコード化やエージェントの制御手法が具体化してきたのが面白いですね。
さっそく見ていきましょう。

今週のトピック

Astro 7.0 リリース、ビルド速度が最大61%向上

astro.build

Astro 7.0がリリースされ、Rust製コンパイラの導入によりビルド時間が大幅に短縮されました。コンポーネント処理にRust製コンパイラを、Markdown処理にSätteriを採用したことで、15%から61%もの高速化を達成しています。3月に6.0が出たばかりですが、この更新頻度の高さには驚かされます。

Figma Config 2026:Code Layers や Figmaエージェントなど多数の新機能

www.figma.com

Figmaの年次イベント「Config 2026」にて、デザインを直接コード化する「Code Layers」や自律動作する「Figmaエージェント」が発表されました。タイムライン形式でアニメーションを作成できる「Figma Motion」や、自然言語でプラグイン・シェーダーを生成できる機能も追加されています。AIは作業を効率化しますが、創造性の核はデザイナーにあるという全体テーマが印象的でした。After EffectsなしでFigma内で完結するのは、往復作業が減って助かりそうです。Code Layers は2026年7月よりロールアウトが開始される予定です。

Vite 8.1 リリース、大規模向け「バンドル開発モード」が登場

vite.dev

Vite 8.1がリリースされ、開発モードでファイルをバンドルして実行する「バンドル開発モード(Bundled Dev Mode)」が追加されました。1万件のReactコンポーネントを持つアプリで起動が15倍高速化されるなど、大規模サイトでの開発体験を向上させます。私たちの通常の案件規模でどこまで恩恵があるかは未知数ですが、モノレポが成長した際のDX向上策として気になるところです。実際のプロジェクト事例として、Linearのコードベースではコールドスタートが最大3倍高速化したというデータも報告されています。従来の標準的な開発モードとは別に、大規模サイトでビルドが遅い場合の選択肢として用意されています。

人間の判断を手放さないループエンジニアリングの議論

lucumr.pocoo.org

ブログ記事「The Coming Loop」を起点に、AIエージェントが自律的に開発を進める「ループエンジニアリング」の是非について議論が起きています。ソフトウェアを「コードを理解する対象」ではなく「症状を診て安定化させる対象」として扱う危うさから、人間の判断と設計の重要性が再認識されています。デバッグもコードも見ずに開発が進む世界観は、少しヒヤッとするものがあります。Anthropicのエンジニア(Boris Cherny)らが関わった「Loop Engineering」プレイブック論文が、R&D的なチーム編成への関心を高めている事実があります。

Steering Claude Code:SkillsやHooksによるエージェント制御の深化

claude.com

AnthropicがClaude Codeの挙動を制御する仕組み(CLAUDE設定ファイル・Skills・Hooksなど)の活用ガイドを公開しました。特定のファイル編集後に自動でリンターを走らせるような「Hooks」や、手順を明文化する「Skills」など、プロジェクト固有のルールを教え込む手法が具体化されています。設定の見直しをClaude自身に手伝わせるという使い方は、賢いやり方だと思いました。

Vercel WebSocket サポートが Public Beta として提供開始

vercel.com

VercelでWebSocketのサポートがPublic Betaとして開始され、Node.jsの標準的なライブラリで双方向通信が可能になりました。待機時間には課金されず、メッセージを実際に処理しているActive CPU時間のみ課金される「Fluid compute」の料金体系を採用しています。リアルタイム系の機能実装で、料金を気にしすぎなくて済むのはありがたい更新です。既存の標準的なNode.jsライブラリを使い、追加設定なしでデプロイ可能です。

GitHub Actions:ステップの並列実行を可能にする新キーワード

github.blog

GitHub Actionsにて、ワークフロー内のステップを並列実行できる新機能が追加されました。background: true(非同期実行)やwait(完了待ち)、cancel(終了)などのキーワードを活用し、複数のAPI呼び出しとビルドを同時に走らせるような最適化が可能です。CIの待ち時間が削れるのは、日々の開発において意外と大きなメリットになりそうです。長時間動作するサービスをバックグラウンドで起動し、後で安全に停止させるといった柔軟な制御が可能です。

vue-tui:Vue製のターミナルUIライブラリ、Inkとの使い分けに期待

https://github.com/vuejs-ai/vue-tui

vue-tuiは、VueをベースにしたCLI向けのUIライブラリです。ReactベースのInkと比べると、シンプルな構造を作る際には書きやすいかもしれないという所感が共有されました。ただし、まだ公式リリース前のため、正式リリース後にInkとの使い分けを検討したいところです。凝ったものを作る場合は、依然としてInkが有力という見方も示されました。

Sakana Fugu:複数モデルを「賢く組み合わせる」マルチエージェントシステム

sakana.ai

Sakana AIが、複数のLLMを動的に組み合わせて性能を引き出すマルチエージェントプラットフォーム「Sakana Fugu」を公開しました。入口に司令塔モデルを置いてタスクを分解する「前処理」重視の設計が、従来の単純な出力統合(Model Fusion)とは異なります。海外では批判もあるようですが、司令塔を置くアプローチは合理的に感じます。最上位の「Fugu Ultra」が Vercel AI Gateway で既に利用可能になっています。

ショートノート

  • Claude Tag — SlackチャンネルにClaudeを追加し、各チャンネルの文脈を学習・活用できる新機能です。
  • Claude Design to Vercel — Claude Designで作成した成果物を、そのままVercelへ直接デプロイしてURLを発行できます。
  • Fujitsu PHOTON — 階層的処理によりTransformer比で最大475倍の出力トークン数を達成した富士通の新アーキテクチャです。
  • Teaching Agents at Vercel — 暗黙知化しやすい設計判断を明文化し、AIに正しく設計意図を伝えるためのVercelの取り組みです。
  • v0 Design Systems 2.0 — デザインシステムをSkillとして学習させ、定義外のコンポーネントを勝手に作らせないよう制御できます。
  • Aside Browser — 既存のWebサイトやアカウントを直接操作できるYC支援のAIブラウザです。Online-Mind2Webで99.0%のスコアを記録し、既存のブラウザエージェントを上回る精度を示します。
  • エージェント認証プロトコル(auth.md) — AIエージェントがユーザーに代わりサインアップするためのプロトコルです。既定noindexでの運用が推奨されています。
  • Tokyo Cross-Section — 東京の地下鉄の深さを3D可視化した作品です。表参道の意外な深さなどが視覚的に分かり面白いです。
  • Rhombus Language — Racket上で構築された、高いカスタマイズ性とシンプルな構文を持つ新しいプログラミング言語です。
  • GPT-5.5 Instant — ユーザーの背景を重視した回答や、長い会話の文脈保持力が向上したアップデートです。
  • Google Interactions API — Geminiのモデルとエージェントを一括で扱えるGoogleの新しい標準APIです。
  • AI Agents on Cloudflare — V8 Isolateによる起動速度を武器に、AIエージェントの基盤としてCloudflareが有力であるとする考察です。
  • AdobeがTopaz Labsを買収 — AIによる高画質化技術を持つTopaz LabsをAdobeが買収しました。Firefly等の強化が期待されます。
  • Mac・iPadが一斉値上げ — MacBook Airは18万4800円→22万4800円となるなど、今後の端末導入計画へ影響します。
  • OpenAI Daybreak — OpenAIが発表したサイバーセキュリティ向けのAIモデル。組織のセキュリティ確保を支援するツールとされています。
  • Taste — Design DNA for Agents — デザインを解析するだけでなく、エージェント向けの文脈へ変換・言語化するツールです。
  • How agents are transforming work — 一問一答から長期タスクの委任へとシフトし、非技術部門でも活用が急速に広がっているとOpenAIが報告しています。
  • loop-me スキル — 現在の作業がループ(自動化・反復処理)にできるかを判断してくれる、mattpocock氏公開のスキルです。
  • Notion内のClaudeエージェント — Notionのワークスペース内でClaudeのコーディングエージェントを直接動かし、ドキュメントの読み書きまで完結できる機能です。有料プラン向け。
  • Paseo — Claude CodeやCopilotなど34種類以上のコーディングエージェントを、デスクトップやモバイルから統合的に実行できるローカルファーストのオープンソースアプリです。

まとめ

今週は各種ツールのアップデートだけでなく、フロントエンドの開発サイクルそのものがAIによって変わりつつあるという肌感を強く受けました。「エージェントをどう飼い慣らすか」という設計論が一段進み、より具体的な制御手法が提案されるようになってきています。私も週末にFigmaの新機能を少し触ってみようと思います。
来週も面白いトピックを拾っていきましょう。