やじうまの杜

「Electron」と「WebView2」はどう違う？～「Electron」の開発チームが解説

Windowsならば「WebView2」は魅力だが、「Electron」にまだ一日の長。使い分けも重要に

樽井秀人

2021年8月4日 16:19

　“やじうまの杜”では、ニュース・レビューにこだわらない幅広い話題をお伝えします。

　既存のWebアプリケーションをデスクトップアプリにしたいとき、以前は「Electron」を選択するのが一般的でした。実際、「Visual Studio Code」をはじめ、さまざまなアプリで「Electron」が採用されています。

　しかし、最近は「Microsoft Edge」をベースとした「WebView2」コントロールが利用できるようになったほか、PWAの機能も充実してきました。とくにWindows環境向けにアプリを開発する場合、「Chromium」などをバンドルするためちょっとしたツールでさえファイルサイズが肥大化しがちな「Electron」に比べ、「WebView2」は大変魅力的に見えます。「WebView2」はまだ新しいため採用例が少なく、違いがよくわからないという開発者も少なくないでしょう。

　そこで今回は、「Electron」の開発チームがまとめてくれた両者の違いを紹介したいと思います。この比較は「WebView2」の開発チームにもレビューされているそうなので、アテにしてよいでしょう。

アーキテクチャーの違い

　まずはアーキテクチャーの違いを見ていきましょう。

「Electron」は「Node.js」に依存

「Electron」は「Chromium」のマルチプロセスアーキテクチャーを継承しており、メインのプロセスに加え、いくつかのヘルパープロセス、レンダープロセスから成ります。「Chromium」とはDLLを共有しないため、「Chromium」がアップデートされても「Electron」アプリには反映されません。開発者が責任をもって、「Electron」アプリを更新する必要があります。

　また、「Node.js」が統合されており、レンダラーやメインプロセスからさまざまなAPIやモジュール、アドオンが利用できます。これはわざわざフレームワークを導入しなくても開発が始められるという点でメリットですが、「Node.js」でできないことはできないという点ではデメリットです。

「Electron」のアーキテクチャー

「WebView2」はホストアプリプロセスを使いOSの機能をフル活用可能

　「WebView2」もほぼ同じプロセス構成になっています。違いは、アプリ本体からはレンダラーやメインプロセスに直接アクセスできず、JavaScriptのコードが扱えるのはWeb標準機能のみで、OSの機能にアクセスするにはホストアプリプロセスがそれを代行（プロキシ）してやる必要があります。しかし、OSの機能をフル活用したい場合は、WinFormやWPF、UWP、Win32なども扱える「WebView2」側に軍配が上がりそうです。

　また、OSにインストールした「Edge」と共有するモデル（Evergreen）と、「Electron」のようにアプリにバンドルするモデル（Fixed Version）の両方が選べる柔軟性もメリットになるかもしれません。EvergreenモデルはDLLのアップデートをアプリ開発者が行う必要はなく、またランタイムを同梱する必要がない分、ファイルサイズを削減できます。Fixed Versionモデルは「Edge」ランタイムの意図しない仕様変更でアプリが壊れないようにできるため安定性に優れますが、「Electron」と同様ランタイムのバージョンアップはアプリ開発者の責務になります。

「WebView2」のアーキテクチャー

パフォーマンス

　パフォーマンスに関しては、どちらも「Chromium」を基礎としているため、Webアプリの実行速度に限るなら大した違いはないでしょう。ただし、プロセス間通信（IPC）の点で若干の違いが出るかもしれません。

「Electron」はサンドボックスを無効化可能

　「Chromium」は内部のプロセス群がサンドボックス化されており、それらのプロセス間の通信をブラウザープロセス（メインのプロセス）が担っています。この処理は若干重く、全体のパフォーマンスに影響を与えますが、「Electron」ではレンダリングプロセスのサンドボックスを無効化できます（ただし、多くのアプリではセキュリティのために有効化されています）。

「WebView2」はC++/C#とのデータ交換に「マーシャリング」が必要

　一方、「WebView2」はサンドボックスを無効化できません。また、JavaScriptとC++/C#の間でデータをやり取りするには「マーシャリング」と呼ばれる処理が必要です。とくにJSONのシリアライズやパースといった処理はコストが高く、これがボトルネックになる可能性があります。とはいえ、JavaScriptでの処理がメインなのであれば、無視できる程度の差にしかならないでしょう。