ReactでWindowsアプリ作るための手法について比較してみる

前置き

既存のReact SPAアプリの一部を流用してWindowsのネイティブアプリ化したいという要望があったため、まずはその方法について調査しました。

ネイティブアプリ開発の前提知識

ほとんどなし

流行

流行りを調べてみました。

State of Javascript 2024 のMobile & Desktopのランキングだと、1位がReact Native
2位がElectron 3位がExpoでした。
Desktopアプリ用のフレームワーク限定のランキングではないので、純粋なDesktopアプリの開発フレームワークに絞るとElectronが実質1位でしょうか。

https://2024.stateofjs.com/en-US/libraries/mobile_desktop/#mobile_desktop_ratios

その他Desktopアプリを開発できるフレームワークでピックアップすると、5位がIonic、8位がTauri、10位にNW.jsとなっていました。
※10位のQuasarはVue.js用のフレームワークのようだったため、除外しました。

手法

上の結果も合わせて、大きく以下の手法がありそうです

1. Electron
2. Tauri
3. React Native for Windows + macOS
4. Ionic
5. NW.js

簡単比較表

FW	ビルドターゲット	開発言語など	特徴
Electron	Windows、macOS、Linux	HTML、CSS、JavaScript	HTML、CSS、JavaScript によるデスクトップアプリケーションを構築するフレームワーク Chromium と Node.js をバイナリに組み込んでいるためバンドルサイズは他のフレームワークとして比較して大きい NW.jsと似ている
Tauri	Windows、macOS、Linux、Android、iOS	FE:HTML、CSS、JavaScript BE:Rust、Swift、Kotlinなど	全ての主要なデスクトップとモバイル向けの小さくて高速なバイナリを構築するためのFW
React Native for Windows + macOS	Windows、macOS	HTML、CSS、JavaScript	PC、タブレット、2-in-1、Xbox、Mixed Realityデバイスなど、Windows 10以降でサポートされるすべてのデバイスとmacOSのデスクトップおよびラップトップのエコシステム向けに、JavaScriptを使用してネイティブアプリを構築できる
Ionic	Windows、macOS、Linux、Android、iOS	HTML、CSS、JavaScript	オープンソースの UI ツールキットで、Angular、React、Vue を使用してモバイルアプリやデスクトップアプリを作ることができる
NW.js	Windows、macOS、Linux	HTML、CSS、JavaScript	DOMから全てのNode.jsモジュールを直接呼び出すことができ、全てのWeb技術を使用してネイティブアプリを作ることができる

Electron

https://www.electronjs.org/ja/

概要

特徴

• Web技術をそのままデスクトップアプリに変換可能
• クロスプラットフォーム（Windows、macOS、Linux）
• 大規模なコミュニティとサポート
• Slackや Visual Studio Code などの有名アプリも採用

最も一般的な手法で、jsで記述できるFWです。
比較をするにあたって、チュートリアルを触ってみた記事を別で挙げているのでよかったらそちらも確認してみてください。

https://zenn.dev/ncdc/articles/b57fa8e56f49f1

Tauri

https://v2.tauri.app/

概要

特徴

• Rustベースの軽量なフレームワーク
• Electronよりもリソース消費が少ない
• セキュリティが高い

Electronに置き換えることを目的しているフレームワークで、Rustでできており軽量なフレームワークです。Tauriを使用する利点としては上記の3点のようです。
多くのTauriアプリケーションでは、JavaScriptで実装可能のようで、Rustが必要になるケースは限定的のようです。自分が触ってみたレベルでも、基本的にjsのプラグインが用意されているのでRustをがっつり書くことはなかったですが、必ずjsで完結するというわけではなさそうです。

React Native for Windows + macOS

https://microsoft.github.io/react-native-windows/

概要

特徴

• React Nativeを拡張
• ネイティブUIコンポーネント
• WindowsとMacOSに特化
• パフォーマンスが比較的高い

React NativeはMetaによって作られたフレームワークですが、React Native for Windows + macOSはReact Nativeを拡張してMicrosoftで作られたフレームワークでした。
React NativeでWindowsアプリ用のビルドができるものだと思っていましたが、正しくは別のもののようでした。
ビルドターゲットはWindowsとMacOSに特化していて、パフォーマンスは比較的高いようです。

Ionic

https://ionicframework.com/

概要

特徴

• Reactだけでなく、Angular/VueのFWを併用してアプリを作成できる
• FWの思想としてフロントエンドのUXとUI インタラクションに重点を置いている。
• 学習が容易
• (公式ドキュメントに日本語用のページがあった)

友人が一人だけ触っているという話があるというのを聞いたくらいで、それ以外はあまり聞いたことがないFWでした。
調べてみてびっくりしたのは公式ドキュメントに日本語用のページがありました。日本人の利用者が多いんですかね。

Adaptive Styling という技術ですべてのデバイス上で適切な外観と操作感を提供するという記載があり、どのレベルなのか気になりました。

https://ionicframework.jp/docs/theming/platform-styles/

NW.js

概要

特徴

• Chromeベースのフレームワーク
• Node.jsとWebKit統合
• クロスプラットフォーム

Electronの前進的な存在のものらしいです。
この辺りはおそらく採用しないだろうなと思うので簡単にしか調査していません。

その他

Flutter

https://docs.flutter.dev/get-started/install/windows/desktop

調べていると、Flutterにもデスクトップアプリ用のビルド用があることを知りました。公式ドキュメントにしっかり手順の記載があります。
今回は既存のReactアプリを流用したいので今回の趣旨とは異なりますが、一応記載しておきます。

まとめ

比較してみた結果、今回はElectronを使用することになりそうです。やはりjsで完結する点が決め手でした。
Tauriも使用してみたかったのですが、Rustの知識をつけてから出直したいと思います。