Electron、Tauriよ、そろそろ席を譲れ!Vercelが6MBのネイティブフレームワークを開発!

フロントエンドでデスクトップアプリを開発する際、これまでは常に二者択一を迫られてきました。

開発が簡単でエコシステムが成熟していることを求めるなら、Electron を選びます。ただしその代償として、アプリ内に Chromium + Node.js 一式をそのまま詰め込むことになり、インストーラーのサイズ、メモリ、起動速度のいずれも真の意味で軽くすることは困難です。

画像

より小さいサイズと高いパフォーマンスを求めるなら、Tauri を選びます。Tauri は完全な Chromium をバンドルせず、システム標準の WebView を利用します。しかし本質的には依然として次のような構成です:

HTML + CSS + JavaScript

システム WebView

Rust ネイティブ機能

しかし今、Vercel Labs が第三の答えを提示しました。

そのプロジェクトの名前は Native SDK です。

画像

これはブラウザー、WebView、JavaScript エンジンを直接回避し、フロントエンドのテンプレートに似た .native 構文で UI を記述し、さらに Zig で状態とビジネスロジックを処理します。最終的には自社開発のレンダリングエンジンによって、ピクセルをシステムのウィンドウに直接描画します。

公式が公表しているデータも非常に印象的です。

完全なアプリケーション:6 MB 未満

起動から最初のフレームまで:約 100 ms

内蔵ブラウザー:0

JavaScript エンジン:0

ランタイムインタープリター:0

Vercel Labs は今回、デスクトップアプリのテーブルをひっくり返したと言えるでしょう。

Electron はなぜますます重くなるのか?

Electron の最大の強みは、フロントエンド開発者なら誰もが理解しているところです。

Vue、React、Svelte を自由に選べ、HTML、CSS、JavaScript を直接記述できます。ブラウザーで動くものは、基本的にそのままデスクトップアプリに持ち込めます。

そのアーキテクチャも非常にシンプルです:

フロントエンドページ

Chromium

Node.js

Windows / macOS / Linux

これが VS Code、Discord、Slack が Electron を選んだ理由です:

開発効率が高く、プラットフォーム間の差異が小さく、Web のエコシステムが完備していることです。

しかし、問題も同じくこのアーキテクチャに起因します。

すべてのアプリがブラウザーの実行環境一式を同梱しなければなりません。単純な Markdown エディター、ファイルツール、あるいはステータスバーアプリを作るだけであっても、Chromium と Node.js を一緒に起動する必要があります。

アプリはますます大きくなり、メモリ消費はますます増え、起動速度も真のネイティブレベルにはなかなか達しません。

端的に言えば、Electron の最大の強みはブラウザーであり、最大の負担も同様にブラウザーなのです。

Tauri はすでに軽いが、まだ WebView から抜け出していない

Tauri のアプローチはもっと賢いものです。

完全な Chromium をインストーラーに組み込むのではなく、OS が提供する WebView を直接呼び出します:

Vue / React / Svelte

HTML + CSS + JavaScript

システム WebView

Rust

そのため、Tauri アプリは通常 Electron よりはるかに小さく、バックエンドの機能も Rust に任せられるため、セキュリティとパフォーマンスが明確に向上します。

既存のフロントエンドプロジェクトにとって、移行コストも比較的低くなっています。最終的に HTML、CSS、JavaScript にコンパイルできるものであれば、基本的に Tauri にそのまま組み込めます。

しかし、それでも WebView を避けることはできません。

Windows は主に WebView2(基盤は Edge Chromium)を使用し、macOS は WKWebView、Linux は WebKitGTK に依存しています。

プラットフォームごとにブラウザーのバージョン、レンダリング結果、対応機能が異なる可能性は依然として残ります。

つまり、Tauri は「完全なブラウザーをバンドルすると重すぎる」という問題は解決しましたが、ブラウザーレンダリングから完全に抜け出したわけではありません。

Native SDK はさらに急進的です。

Native SDK:UI を直接アプリにコンパイル

Native SDK はデフォルトで次の 2 種類のファイルを使用します:

src/app.native

src/main.zig

.native は UI を担当します:

<column gap="12" padding="16"><row gap="8" main="center" cross="center" grow="1"><button variant="secondary" on-press="decrement">-</button><text>{count}</text><button variant="primary" on-press="increment">+</button></row><status-bar>count: {count}</status-bar></column>

どこか見覚えがあると思いませんか?

コンポーネント、属性、イベント、データバインディングが備わっており、全体的な記法は HTML や最新のフロントエンドフレームワークのテンプレート構文に非常に近いものです。

しかし、DOM を生成することはなく、ブラウザーに実行させることもありません。

ビルド時に .native の UI は実行ファイルへ直接コンパイルされ、Native SDK 自身のエンジンがレイアウト、描画、イベント処理を完結させます。

リリース後のアプリが同梱する必要があるものは、次のいずれでもありません:

・ブラウザー

・WebView

・テンプレートパーサー

・スクリプトインタープリター

・JavaScript エンジン

ビジネスロジックは Zig に記述します:

pub const Msg = union(enum) {

increment,

decrement,

reset,

};

pub const Model = struct {

count: i64 = 0,

};

pub fn update(model: *Model, msg: Msg) void {

switch (msg) {

.increment => model.count += 1,

.decrement => model.count -= 1,

.reset => model.count = 0,

}

}

状態モデル全体は非常にシンプルです:

ユーザー操作

Msg を送信

update が Model を変更

UI を再計算

Redux、Elm、Pinia あるいは単方向データフローに精通したフロントエンド開発者なら、基本的にひと目で理解できるでしょう。

UI は状態を読み取ってメッセージを送信するだけで、異なるコンポーネント内で自由にデータを変更することはできません。すべての状態変更は update に集約されるため、デバッグ、テスト、AI 生成がより安定します。

6MB、100ms —— その優位性はどれほど明確か?

Native SDK の公式が公開している複数の完全なアプリは、リリースバイナリのサイズがいずれも 6 MB を超えていません:

Calculator:3.6 MB

Markdown Viewer:3.5 MB

Notes:3.5 MB

Soundboard:5.7 MB

System Monitor:3.7 MB

macOS ARM64 環境において、これらのサンプルはプロセス起動から最初のフレーム表示までのウォーム起動時間が約 71–131 ms です。

完全な Markdown エディターのサンプルであれば、バイナリはわずか 3.4 MB です。

理由は極めて直接的です:

Chromium なし

Node.js なし

システム WebView なし

JavaScript エンジンなし

ランタイムのテンプレートインタープリターなし

リリースされる成果物の主な中身は次のとおりです:

あなたのビジネスロジック

+

Native SDK レンダリングエンジン

+

システムネイティブフレームワーク

ファイルツール、デスクトップクライアント、生産性向上ツール、Markdown エディター、データベース管理ツール、システムモニター、社内ワークベンチといったアプリにとって、このサイズと起動速度は確かに非常に魅力的です。

もちろん、これらのデータはプロジェクト側が指定したデバイスとサンプルアプリでテストしたものであり、「Electron より数十倍速い」と直接結論づけることはできません。

両者が提供する実行環境、ブラウザー機能、エコシステムの規模は、そもそも比較になる規模ではありません。

しかし、ひとつ確かなことがあります:

アプリがブラウザーのランタイムを同梱しなくなれば、サイズと起動速度が自然と大幅に軽くなるということです。

Electron、Tauri、Native SDK はどう選ぶべきか?

3 つのアプローチの技術ロードマップはすでに非常に明確です:

【比較表】

Electron:UI技術=HTML / CSS / JS、実行環境=Chromium + Node.js、最大の強み=エコシステムが成熟し互換性が高い、主なコスト=パッケージサイズとリソース消費が大きい。

Tauri:UI技術=HTML / CSS / JS、実行環境=システムの WebView + Rust、最大の強み=サイズが小さくフロントエンドプロジェクトを再利用できる、主なコスト=依然として WebView とプラットフォーム間の差異の影響を受ける。

Native SDK:UI技術=.native + Zig、実行環境=自社開発のネイティブレンダリングエンジン、最大の強み=ブラウザー不要でサイズが小さく起動が速い、主なコスト=エコシステムは初期段階で Zig を学ぶ必要がある。

Electron は今なお、複雑な Web プロダクトの移行や、ブラウザーのエコシステムに大きく依存するアプリに適しています。

Tauri は、Vue や React を引き続き使いつつ、インストーラーのサイズとリソース消費を抑えたいチームに適しています。

Native SDK が狙っているのは、別の種類のプロジェクトです:

宣言型 UI の開発効率を維持しつつ、ブラウザーのランタイムから真に脱却したいと考えるプロジェクトです。

これは開発者に煩雑な AppKit、Win32、GTK に戻ることを求めず、UI を WebView に押し込むこともせず、両者の間に新しいレイヤーを一から作り直したものです。

フロントエンド開発者はどうやってすぐに始められるか?

インストールは非常に簡単で、npm を直接使用します:

npm install -g @native-sdk/cli

プロジェクトを作成します:

native init my_app

cd my_app

native dev

実行が完了すると、実際のシステムウィンドウが開きます。

プロジェクトのデフォルト構成も非常にクリーンです:

src/app.native # 画面、レイアウト、バインディング、イベント

src/main.zig # 状態とビジネスロジック

src/tests.zig # UI テスト

app.zon # アプリ設定、権限、ウィンドウ、パッケージ情報

assets/icon.png # アプリアイコン

開発中に src/app.native を変更すると、ウィンドウは自動的に更新され、現在の状態が可能な限り保持されます。

コードに間違いがあっても、以前の UI がそのままクラッシュすることはなく、具体的なファイル名、行番号、列番号が返されます。

プロジェクトをチェックします:

native check

テストを実行します:

native test

リリース版をビルドします:

native build

アプリをパッケージ化します:

native package --target macos

native package --target windows

native package --target linux

CLI は SDK のパスと、バージョンが一致する Zig ツールチェーンの処理も行います。

開発者は最初から複雑な build.zig を保守する必要はありません。プロジェクトで本当にカスタムビルドが必要になった場合にのみ、native eject を使って完全なビルドファイルを引き継ぎます。

フロントエンド開発者にとって、この一連の体験は非常に馴染み深いものです:

CLI をインストール

プロジェクトを初期化

開発サーバーを起動

画面を変更

自動更新

ビルドしてパッケージ化

ただし今回は、最終的に動作するのはもはや Web ページではありません。

5 つのプラットフォーム、1 つの実行モデル

Native SDK は現在、以下をすでにカバーしています:

macOS

Windows

Linux

iOS

Android

画像

デスクトップ版は現在、最も成熟している部分です。

macOS

macOS は現在サポートが最も完全なプラットフォームであり、Metal を使用して描画を行うとともに、システムのスクロール効果、メニュー、トレイ、ダイアログ、インプットメソッドにも対応しています。

Windows と Linux

Windows と Linux はすでに完全なアプリの実行、テスト、パッケージ化が可能ですが、現時点では主に CPU ソフトウェアレンダリングを使用しており、GPU レンダリングバックエンドはまだ改善中です。

なお、Linux は現時点ではシステムトレイに対応しておらず、Windows と Linux の一部のシステム機能も macOS ほど完全ではありません。

iOS と Android

モバイル側も同様にビルドパイプラインがすでに整備されています:

native dev --target ios

native dev --target android

native package --target ios

native package --target android

iOS は完全な Xcode プロジェクトを生成でき、Android は完全なホストプロジェクトとデバッグ用 APK を生成できます。

開発者はプロジェクト内で Swift、Kotlin、Java のホストコードを別途保守する必要はありません。

ただし注意が必要なのは、iOS と Android は現時点ではまだ実験的なサポートであり、主にエミュレーター環境で検証されています。ツールチェーン、API、GPU レンダリング、実機のワークフローは引き続き改善が進められています。

したがって、現時点でデスクトップツールとしてこれを使うことには十分な議論の価値がありますが、成熟した Flutter や React Native を直接置き換えるにはまだ時期尚早です。

それは AI エージェント向けにさえなっている

Native SDK の最も特別な点は、おそらく 6 MB というサイズではないでしょう。

それは AI の自動化機能をランタイムに直接組み込んでいます。

エージェントは実行中のアプリの画面を読み取り、アクセシビリティツリーを確認し、ボタンを検索し、テキストを入力し、コンポーネントをクリックし、状態を検証し、操作を記録し、決定的なスクリーンショットを生成できます。

native automate wait

native automate snapshot

native automate screenshot

プロジェクトは公式の Agent Skills も提供しています:

npx skills add vercel-labs/native

インストール後、Claude Code や Codex などのエージェントは、現在の Native SDK バージョンに一致した開発手順を取得できます。

エージェントは画面を書き終えた後、アプリを直接起動し、ウィンドウを操作し、結果を検証してから、コードを修正することもできます。

このクローズドループは非常に重要です:

AI が画面を生成

コンパイルして実行

実際のウィンドウを読み取る

クリックとテスト

問題を発見

自動修正

以前は、AI がデスクトップアプリを書いても、コードが「一見動作しそう」というレベルにとどまることが少なくありませんでした。

Native SDK は、エージェントが自分で作り出したアプリを実際に「見る」ことができるようにすることを目指しています。

コンポーネントの由来情報を通じて、あるボタンがどの .native ファイルのどの行のコードに由来するのかを特定し、自動的に修正を完了することさえできます。

これこそが、真に AI エージェント向けのアプリ開発パイプラインです。

フロントエンドのデスクトップ開発に、ついに第三の道が現れた

これまでデスクトップアプリを作る際、フロントエンド開発者の選択肢は多くありませんでした。

Electron のサイズとリソース消費を受け入れ、成熟したエコシステムと非常に低い学習コストと引き換えにするか、Tauri を使って Web 技術スタックを維持しつつ、システムの WebView と Rust によってより軽いアプリを手に入れるかのどちらかでした。

Native SDK は、より急進的な路線を選択しました:

宣言型 UI を維持

コンポーネントベース開発を維持

データバインディングを維持

ホットリロードを維持

フロントエンドに馴染みのある開発体験を維持

そして、ブラウザーを削除する。

現時点ではまだ pre-1.0 であり、API は今後も変更され続け、エコシステムも Electron や Tauri には遠く及びません。

Windows、Linux、モバイルのレンダリング機能も、同様に今後の改善が必要です。

しかし、この方向性はすでに十分に興味深いものです。

6 MB 未満で、起動に約 100 ms、5 つのプラットフォームをサポートし、AI エージェントが直接操作してテストできるネイティブアプリフレームワークです。

今回こそ、Electron と Tauri の対抗馬が本当に登場したのです。

Native SDK 公式サイト:https://native-sdk.dev/

関連記事

分享網址
AINews·AI 新聞聚合平台
© 2026 AINews. All rights reserved.