12k
All articles

Electronの軽量な代替ツール5選

軽量なElectron代替ツール5選、tinyjs、Electrobun、Neutralinojs、Perry、Wailsを比較。描画方式や対応言語、それぞれに適した用途がわかります。

OpenReplay Team
OpenReplay Team
Electronの軽量な代替ツール5選

検討に値するElectronの軽量な代替ツールは5つあります。tinyjs、Electrobun、Neutralinojs、Wailsの4つは、フロントエンドをOS標準のwebviewでレンダリングします。Perryはwebviewを一切使わず、TypeScriptをコンパイルして実際のプラットフォームウィジェットを描画するネイティブアプリを生成します。

ReactやSvelteで作った、問題なく動くフロントエンドがあるとします。ところが、それを使った小さなユーティリティのインストーラーが、隣にインストールされているほとんどのアプリより大きくなってしまいます。

ElectronアプリはどれもChromiumとNode.jsを同梱しているため、インストールのたびにブラウザエンジン一式が入り、起動中のアプリはそれぞれディスク容量とメモリを余分に消費します。本記事では5つの代替ツールを、同じ4つの観点で比較します。レンダリング方式、バックエンドの言語、対応するデスクトッププラットフォーム、そしてどのような開発者に向いているかです。

重要なポイント

  • tinyjs、Electrobun、Neutralinojs、WailsはシステムのwebviewでレンダリングするのPerryはTypeScriptをネイティブのAppKit、Win32、GTK4ウィジェットにコンパイルします。
  • 選択を大きく左右するのはバックエンドの言語です。JavaScript(tinyjs)、TypeScriptまたはZig/Rust/Go/Odin(Electrobun)、任意の言語による拡張機能(Neutralinojs)、コンパイル済みTypeScript(Perry)、Go(Wails)から選ぶことになります。
  • システムのwebviewを使う場合、1つのフロントエンドをWebKit、WebView2、WebKitGTKのそれぞれでテストする必要があります。
  • 本記事のサイズに関する数値はすべて各プロジェクトの公称値であり、測定方法もプロジェクトごとに異なります。

なぜ開発者はElectronの代替を探すのか

Electronの代替ツールの多くは、Chromiumをバンドルに含めず、OSに標準搭載されているwebviewを利用します。これによりアプリのサイズは大幅に小さくなります。その代償はレンダリングの一貫性です。アプリはmacOSではWebKit、WindowsではWebView2、LinuxではWebKitGTK上で動作するため、1つのサイトをSafariとChromeの両方に提供する場合と同様に、細かな部分で挙動の違いが生じます。

よく知られた選択肢のうち2つは、以下の5つには含めていません。TauriはシステムのwebviewとRustバックエンドを組み合わせたものです。Deno DesktopはDenoランタイム上でデスクトップアプリを構築します。

以下の表は、5つのElectron代替ツールをレンダリングエンジン、バックエンドの言語、デスクトッププラットフォーム、公称サイズで比較したものです。

ツールレンダリング方式バックエンドの言語デスクトッププラットフォーム(ステータス)サイズ(各プロジェクトの公称値)
tinyjsシステムwebviewtxiki.js上のJavaScriptmacOS(主要)、Windows、Linux配布アプリで約6 MB
Electrobun 2.0システムwebview、CEFも選択可TypeScript、またはZig/Rust/Go/OdinmacOS、Windows、Linuxネイティブmainで1.28 MiB、Cottontailで約15 MiB
Neutralinojsシステムwebviewページ側のJS、拡張機能は任意の言語Linux、Windows、macOS数値の記載なし
PerryネイティブウィジェットAOTコンパイルされたTypeScriptmacOS、Windows、Linuxhello worldで約34 KB、ランタイム使用時は数MB
WailsシステムwebviewGoWindows、macOS、Linux(v3.0安定版)バイナリで約15 MB

tinyjs:ポートを開かないJavaScriptバックエンド

tinyjsは、txiki.js上でJavaScriptバックエンドを実行し、ページをプラットフォーム標準のwebview(macOSではWebKit、WindowsではWebView2、LinuxではWebKitGTK)で表示します。ページとバックエンドはUnixソケット(Windowsでは名前付きパイプ)で通信するため、アプリがローカルのネットワークポートを開くことはありません。

  • バックエンド: txiki.js(QuickJS+libuv)で、ファイル、プロセス、ソケット、FFI、SQLiteにアクセスできます。実行時にNodeは不要です。
  • プラットフォーム: リポジトリではmacOS、Windows、Linuxを対象としていますが、プロジェクトサイトではmacOSを主要プラットフォームとしています。ビルドは配布先と同じOS上で実行する必要があります。tinyjs buildで署名済みのバンドルが生成され、tinyjs notarizeでAppleの公証(notarization)に提出できます。
  • サイズ: tinyjsによると、配布アプリのサイズは約6 MBです。そのうち5.6 MBをtxiki.jsランタイムが占めます。
tinyjs new myapp --template react-ts
cd myapp
tinyjs dev
tinyjs build

バックエンドはapiオブジェクトをエクスポートし、ページ側はそのメソッドを名前で呼び出します。

// src/backend/main.js
export const api = {
  greet: async ({ user }) => `Welcome, ${user}`,
};

// in the page
const message = await tiny.api.call('greet', { user });

tinyjsは、レンダリングの差異が最も大きいのはLinuxであると注意を促しています。メディアコーデックはインストールされているGStreamerプラグインに依存し、WebKitGTK環境ではWeb Audioの出力にノイズが入ることがあります。向いている開発者: バックエンドを含め、アプリ全体を1つの言語で書きたいJavaScript開発者。

Electrobun:TypeScriptまたはコンパイル言語によるメインプロセス

Electrobunは、デフォルトでシステムのwebviewを使ってレンダリングします。メインプロセスはCottontail(またはBun)上のTypeScriptで実行するか、Zig、Rust、Go、Odinで記述できます。対象はmacOS、Windows、Linuxです。

  • レンダラー: デフォルトはシステムのwebviewです。ダウンロードサイズよりもプラットフォーム間での描画の一致を重視する場合は、CEFを通じてChromiumをバンドルすることもできます。
  • バックエンド: Cottontailは、2.0リリースで導入された、JavaScriptCore上にZigで構築されたJavaScriptランタイムです。
  • サイズ: Electrobunによると、macOS ARM64における圧縮済みhello worldのダウンロードサイズは、ネイティブのメインプロセスで1.28 MiB、Cottontailで約15 MiBです。
  • 配布: コード署名、差分アップデート、各OS向けインストーラーの機能が組み込まれています。パッケージはMITライセンスでnpmに公開されています。
npx electrobun init
import { BrowserWindow } from "electrobun/main";

new BrowserWindow({
  title: "Inventory",
  url: "views://mainview/index.html",
  frame: { width: 1024, height: 720 },
});

views://スキームは、プロジェクト内にバンドルされたビューを読み込みます。ElectrobunのHutch CLIを使う場合は、hutch electrobun initで同じプロジェクトのひな形を生成できます。向いている開発者: Electronのメイン/レンダラー構成を、はるかに小さなパッケージで実現したいチーム。

Neutralinojs:ページのみで完結するアプリ、汎用バックエンドなし

NeutralinojsはOSのwebviewでレンダリングし、汎用的なJavaScriptバックエンドプロセスを持ちません。コードはページ内で実行され、組み込みのネイティブAPIを呼び出します。ドキュメントによると、アプリにChromiumは同梱されず、代わりにLinuxのWebKitGTKのようなOSが提供するwebviewを利用します。

  • バックエンド: ページはクライアントライブラリを通じてネイティブ層にアクセスします。NeutralinojsのGitHubリポジトリによると、ネイティブ呼び出しはWebSocket経由で行われ、組み込みの静的サーバーがフロントエンドのファイルを配信します。APIでカバーされない処理については、任意の言語で拡張機能を書き、IPCで接続できます。
  • プラットフォーム: Linux、Windows、macOS、Web。リリースページでは、v6.10.0が最新リリースとなっています。

向いている用途: 組み込みAPI(ファイルアクセス、コマンド実行、ダイアログ)の範囲で要件を満たせる小規模なユーティリティ。

Perry:webviewではなくネイティブウィジェット

Perryはwebviewのラッパーではありません。TypeScriptをLLVMで事前(AOT)コンパイルしてネイティブ実行ファイルを生成し、実際のプラットフォームウィジェット(macOSではAppKit、WindowsではWin32、LinuxではGTK4)を描画します。Perryはモバイル、スマートウォッチ、TVも対象としています。

  • バックエンド: 独立したバックエンドはありません。アプリ全体がマシンコードにコンパイルされたTypeScriptであり、プログラムが必要とする場合にPerryのランタイムがバイナリにリンクされます。
  • 制約: PerryはTypeScriptの実用的なサブセットをコンパイルします。制約に関するページでは、eval()などの動的コードは非対応とされ、デコレーターも部分的なサポートにとどまります。コンパイルできないnpmパッケージもあります。JavaScriptのnpm互換性のために、Perryはオプションの V8ランタイムを用意しています。--enable-js-runtimeで有効化できます。
  • サイズ: Perryのリポジトリによると、定数を出力するだけのhello worldで約34 KBです。プログラムがランタイム(ループ、JSON、async)を使うようになると数MB程度になり、macOS arm64では約5.5 MBです。
perry doctor
perry check ./src
perry compile main.ts -o myapp

perry doctorは、コンパイラ、リンカー、プラットフォームSDKがインストールされているかを確認します。perry checkは、ネイティブにコンパイルできないコードを報告します。PerryにはDOMがないため、DOMに依存するフロントエンドのコードはそのまま移行できません。向いている開発者: ネイティブコントロールを得るためにUIを書き直すことをいとわないTypeScript開発者。

Wails:Goバックエンドとシステムwebview

Wailsは、GoバックエンドとOSのwebviewを組み合わせたツールです。Go開発者は使い慣れたWebフロントエンドのツールをそのまま使え、各プラットフォーム標準のWebViewでレンダリングされるため、ブラウザエンジンはバンドルされません。Wails v3.0.0は2026年10月26日にリリースされました。

  • レンダラー: WindowsではWebView2、macOSではWebKitを使用します。v3.0.0以降、LinuxではGTK4とWebKitGTK 6.0がデフォルトとなり、従来のGTK3スタックもv3.1までは-tags gtk3で利用できます。
  • ステータス: v3.0が現在の安定版で、v2も引き続き重要なアップデートを受けています。v3のiOSおよびAndroidサポートは実験的なもので、安定性の保証対象外です。リリースは定期的に行われています。
  • サイズ: Why Wailsページによると、バイナリは約15 MBです。
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
wails3 setup

向いている開発者: バックエンドのロジックがすでにGoで書かれているチーム。

どのElectron代替ツールを選ぶべきか

最適なElectron代替ツールは、まずバックエンドに使いたい言語で決まり、次にレンダリングの差異をどこまで許容できるかで決まります。すべてをJavaScriptで書くならtinyjs。TypeScriptのメインプロセスに、必要に応じてChromiumをバンドルしたいならElectrobun。GoならWails、組み込みのネイティブAPIだけで足りるアプリならNeutralinojsが候補になります。Web UIではなくネイティブコントロールを使いたい場合、5つの中で選択肢となるのはPerryだけです。導入を決める前に、上位2つの候補でhello worldを作成し、実際のフロントエンドを対象となる各OSのwebviewで動かしてみてください。

よくある質問

これらのツールで作られたアプリを実行するために、WindowsユーザーはWebView2をインストールする必要がありますか?

通常は不要です。Evergreen WebView2 RuntimeはすべてのWindows 11デバイスにプリインストールされており、Microsoftは2023年1月以降、管理対象デバイスやドメイン参加デバイスを含むほとんどのWindows 10デバイスにも展開しました。ただし、まだインストールされていないWindows 10マシンもわずかに存在します。そのためMicrosoftは、Evergreenモードを使用する場合でも、インストーラーでランタイムの有無を確認し、存在しない場合は展開することを推奨しています。

既存のReactフロントエンドをPerryで再利用できますか?

部分的に、かつ実験的にのみ可能です。PerryにはDOMがありませんが、別プロジェクトのperry-reactはReact互換のレンダラーです。package.jsonのpackageAliasesブロックで、reactおよびreact-domのインポートをperry-reactに向けると、JSX要素がネイティブウィジェットにマッピングされます(たとえばdivはVStackに、buttonはButtonに対応します)。perry-reactは自らをmacOSを対象としたフェーズ1の概念実証と位置付けており、iOS、Android、GTK4、Win32への対応は今後の予定です。フェーズ1では、同じコンポーネントのインスタンス間でフックの状態が共有されてしまい、classNameによるスタイリングはサポートされず(インラインのstyle propsのみ)、MUIやReact RouterなどDOMやclassNameに依存するライブラリは動作しません。

これらのElectron代替ツールのうち、モバイルアプリも構築できるのはどれですか?

Perryはモバイルを対象としています。同じTypeScriptをiOSとAndroid、さらにwatchOSやTV向けにもコンパイルできます。tinyjsはiOSとAndroidには対応しないとしており、自らをデスクトップ向けランタイムと位置付けています。Neutralinojsが対応プラットフォームとして挙げているのはLinux、Windows、macOS、Webです。Wails v3にはiOSとAndroidの実験的サポートがありますが、まだ安定性の保証対象外です。スマートフォンでも動作するwebviewアプリが必要な場合は、Tauri 2がデスクトップに加えてiOSとAndroidをサポートしています。

システムwebviewを使うアプリを実行するには、Linuxユーザーは何をインストールしておく必要がありますか?

これらのツールはwebviewをバンドルせずシステムのものを利用するため、WebKitGTKライブラリが必要です。tinyjsのサンプルでは、Linuxの要件としてlibwebkit2gtk-4.1-0が挙げられています。Wails v3.0は、デフォルトでGTK4とWebKitGTK 6.0を使用します。音声や動画のサポートはマシンにインストールされているGStreamerプラグインに依存するため、サポート予定のすべてのLinuxディストリビューションでメディア再生をテストしてください。

DevTools for the frontend

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers.

Star on GitHub12k

We use cookies to improve your experience. By using our site, you accept cookies.