Zero Native：Vercelが放つ、誰も予想しなかったElectronキラー

日本語العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia한국어PortuguêsРусский中文
BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00これはXero Native。VercelによるZigベースのネイティブアプリビルダーで、システムのWebビューを使うか
00:00:05ElectronのようにChromium全体を同梱して、デスクトップやモバイル向けに超軽量なバイナリを提供します。
00:00:12開発時のリビルドも一瞬です。
00:00:14しかし、適切に使いこなすためにZigの知識が必要だという点は、JS開発者を遠ざけてしまうでしょうか？
00:00:18チャンネル登録をして、一緒に確かめていきましょう。
00:00:20BUNチームはZigからRustへ移行しつつありますが、Zigは依然として非常にクールな言語です。
00:00:28ボローチェッカーやライフタイムがなく、C言語を直接呼び出せるため、あらゆるCライブラリを
00:00:35グルーコードなしでインポートするだけで使えます。
00:00:37また、JavaScript開発者にとっても十分に習得可能な可読性を備えています。
00:00:39実際、私がゼロからZigのプログラミングを学ぶ様子を見たい方は、コメントで教えてください。
00:00:44それはかなり楽しい試みになると思います。
00:00:46基本的には、Xero NativeはフロントエンドをレンダリングするWebビューをホストする、薄いZigのシェルです。
00:00:51JSONブリッジを使用して、Webビュー内のJSとネイティブのZig層が相互に通信できるようになっており、
00:00:58それによってOSレベルのAPIにアクセスできるようになっています。
00:01:01「それってElectroBUNみたいだね」と思うかもしれませんが、まさにその通りです。
00:01:04ただし、決定的な違いが一つあります。それについては後ほど動画で説明します。
00:01:07まずは簡単なデモを見てみましょう。
00:01:10始めにZigをインストールする必要があります。私はMiezを使いましたが、
00:01:13Brewでも可能です。次にXero Nativeをインストールします。
00:01:16両方の準備ができたら、「xero-native init」コマンドで新しいプロジェクトを作成できます。
00:01:22プロジェクト名は何でも構いません。
00:01:25frontendフラグにReactを指定して、Vite Reactプロジェクトをインストールします。
00:01:30Svelte、Vue、Next、あるいはただのViteも選択可能です。
00:01:34実行すると、Xero Nativeがいくつかのディレクトリを追加します。
00:01:37プロジェクトに入ると、app.zonファイルが見えます。これは後で説明します。
00:01:43アイコンなどの静的資産用フォルダ、Zigビルドグラフ用のbuild.zig、
00:01:48JSブリッジ、Webエンジン、そしてフロントエンドコードを含むfrontendディレクトリがあります。
00:01:54中を見ると、JS開発者におなじみのファイルが並んでいます。
00:01:58ここで「zig build run」を実行すると、依存関係がインストールされ、アプリが別ウィンドウで開きます。
00:02:04既存のJavaScriptプロジェクトにXero Nativeを導入したい場合は、
00:02:08最小構成のVite版を使用し、frontendディレクトリの中身を自分のアプリのコードに入れ替えるのがお勧めです。
00:02:15Xero Nativeには、フロントエンドのライフサイクル全体を管理する優れた開発サーバーもあります。
00:02:19「zig build dev」を実行すると、バイナリをコンパイルしつつ開発サーバーが起動します。
00:02:24コードを編集すれば、ネイティブアプリにリアルタイムで反映されます。
00:02:28「zig build package」を実行すれば、配布用のネイティブアプリをビルドできます。
00:02:33zig-out/packageディレクトリに出力されたサイズはわずか2.9MB。非常に小さいですね。
00:02:39中には1MB以下に抑えられたケースもあるようです。
00:02:43アイコンや名前、Webエンジンを変更したい場合はどうすればいいでしょうか？
00:02:46そこでapp.zonファイルの出番です。アイコン、プロジェクト名、実行エンジン、ウィンドウサイズなどを設定できます。
00:02:55以上がXero Nativeの非常に簡単な概要です。
00:02:58システムトレイ、コード署名、iOS/Android向け埋め込みアプリなど、紹介しきれなかった機能が山ほどあります。
00:03:05もっと使い込んでみる必要がありそうです。また別の動画にするかもしれません。
00:03:09Xero Nativeは素晴らしいですが、同じくOSネイティブのWebビューを使うElectrobunとはどう違うのでしょうか？
00:03:17Electrobunでは、メインプロセスの記述にTypeScriptが必要なため、Bun自体が実行環境となります。
00:03:24Zigバイナリがアプリを起動しますが、コードはBunのWebワーカー内で動き、BunのFFI、C++、Objective-C層を介してネイティブAPIと通信します。
00:03:37一方 Xero Nativeは Zigのバイナリだけで十分です JavaScriptやBunも不要で ZigだけでOSレベルのAPIやCライブラリと シンプルなCインポートを介して通信できます
00:03:50結果として、Electrobunよりも極限まで薄いネイティブシェルを実現しています。
00:03:54ただ現時点では、望み通りの動作をさせるには少しZigを書くか、app.zonの設定を変更する必要があるかもしれません。
00:04:03また、Electrobunほど多機能ではなく、タイトルバーのスタイル変更やカスタムメニュー項目の追加などは、
00:04:11残念ながら現時点のapp.zonファイルではサポートされていません。
00:04:15macOSでのパッケージビルドが初回でうまくいかず、Issueを上げましたが、私のスキル不足かもしれません。
00:04:22とはいえ、開発チームは機能追加や問題修正、そしてモバイル対応に向けて懸命に取り組んでいるはずです。
00:04:29待ちきれないなら、オープンソースですから自分で解決もできます。
00:04:32コードをClaudeに渡して指示すれば、きっと機能を追加してくれるはずですよね？

Key Takeaway

Xero NativeはZig言語の薄いシェルとJSONブリッジを採用することで、ElectronのようなChromiumの同梱を避け、2.9MB以下の極小ネイティブバイナリとOS APIへの直接アクセスを両立します。

Highlights

  • Xero NativeはZig言語をベースにしたアプリビルダーであり、OS標準のWebビューを利用してElectronより大幅に軽量なバイナリを作成します。

  • ビルド後のバイナリサイズは最小で1MB以下、デモプロジェクトでも2.9MBという極小サイズを実現しています。

  • JSONブリッジを介してJavaScriptとZig層が通信し、OSレベルのAPIやCライブラリを直接呼び出す仕組みを持っています。

  • 開発サーバー機能により、ネイティブアプリの実行画面にコードの変更をリアルタイムで反映するホットリロードが可能です。

  • 設定ファイルであるapp.zonを編集するだけで、アイコン、プロジェクト名、ウィンドウサイズ、実行エンジンのカスタマイズが完結します。

Timeline

Zigベースの超軽量ネイティブアプリビルダー

  • システムのWebビューを使用するためChromium全体を同梱する必要がありません。
  • Zig言語はボローチェッカーやライフタイムがなくCライブラリを直接インポートできます。
  • JSONブリッジがWebビュー内のJSとネイティブのZig層の相互通信を仲介します。

Vercelが提供するこのツールは、JavaScript開発者でも習得可能な可読性を持つZigを基盤としています。Electronとの最大の違いはバイナリの軽さにあり、OSレベルのAPIにアクセスするための薄いシェルとして機能します。BunチームがRustへ移行する中でも、ZigはグルーコードなしでCライブラリを利用できる利点を持っています。

セットアップとプロジェクト構造

  • xero-native initコマンドでReact、Svelte、Vue、Nextなどのフロントエンドを選択して初期化します。
  • プロジェクト内にはZigのビルドグラフを管理するbuild.zigや設定用のapp.zonが生成されます。
  • 既存のJavaScriptアプリを導入する場合は最小構成のVite版を作成してソースを入れ替える手法が有効です。

インストールにはMiezやBrewを使用してZig本体を導入したあと、Xero Native本体をインストールする手順を踏みます。フロントエンドディレクトリにはJS開発者になじみのあるファイルが配置され、使い慣れたフレームワークをそのまま利用可能です。zig build runを実行すると依存関係の解決からアプリの起動までが自動で行われます。

開発ワークフローとバイナリの最適化

  • zig build devコマンドによりバイナリのコンパイルと開発サーバーが同時に稼働します。
  • zig build packageコマンドで出力される配布用バイナリは2.9MBという驚異的な小ささです。
  • app.zonファイルがアプリのメタデータやウィンドウの外観設定を一括管理します。

開発サーバーはフロントエンドのライフサイクルを管理し、エディタでの編集内容を即座にネイティブウィンドウへ反映します。ビルドされた成果物はzig-out/packageディレクトリに格納され、そのサイズは1MBを下回るケースもあります。システムトレイやコード署名、モバイル向け埋め込みアプリといった高度な機能も実装されています。

Electrobunとの比較と現在の制約

  • Electrobunは実行環境にBunを必要としますがXero NativeはZigバイナリ単体で動作します。
  • 現時点ではタイトルバーのスタイル変更やカスタムメニュー追加などのUIカスタマイズ機能に制限があります。
  • オープンソースプロジェクトとしてモバイル対応やバグ修正が現在進行形で進められています。

ElectrobunはメインプロセスにTypeScriptを用い、BunのWebワーカーやFFIを介して通信する構造を持っています。対してXero NativeはJavaScriptやBunすら不要な極限まで薄いシェルを実現しており、Cライブラリとの親和性がより高い設計です。まだ発展途上の段階であり、特定のOSでのビルドエラーや機能不足があるものの、コミュニティによる解決やClaudeのようなAIツールの活用による機能追加が期待されています。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video