この記事は、「デスクトップのクロスプラットフォーム開発をするならどのフレームワークがいいんだ」と悩んでいる方向けです。Flutterの利点であるモバイル対応に関しては「ほぼ」無視して語るのでご了承ください。
APIがー...とか細かい仕様については書きません。最終的な判断は皆様に委ねます。それに、この記事を読んでいるときと書いているときで最新の情報は違うと思うので、詳しいところはご自身で調べてください。
2025-02-23: 改めて読むと読みにくかったので色々と修正
結局のところは？
結論から書くと一長一短です。どちらもクロスプラットフォーム対応で、Flutterはモバイルにも対応する。しかし、どちらも割と面倒な問題を抱えている。
細かい理由も下に書いてきます。最下部にまとめも置いてます。お急ぎの方は右のバーからまとめに向かってください。
比較
まずはかんたんな比較です。Electronには友達、似た考えをしたフレームワークのNW.jsやTauriなんかも含めて考えます。
| おなまえ | Flutter | Electron |
|---|---|---|
| 対応プラットフォーム | Windows macOS Linux Android iOS Web ※32bitは不可 |
Windows macOS Linux (Web) ※Electron23からWindows 8.1以前非対応 |
| 開発に使う言語 | Dart | Javascript(TS)とか |
| 開発元 | GitHub | |
| 特徴 | モバイルに対応している。独自のGUIパーツを採用。 | Web技術で開発。Web系のフレームワークが使える。 |
| ホットリロード | ○ | △(Viteなど) |
| Githubのスター | 169k | 116k |
| ライセンス | 三条項BSDライセンス | MITライセンス |
| 開発開始 | 2014年 | 2013年 |
| クロスコンパイル | × | できると思う やり方はわからん |
共通点
- OSS
- 現在も開発中の比較的新しい技術であること
- デスクトップ開発ができること
- 専用のIDEを必要としないこと
参考にしたサイト
Flutter
Electron
それぞれ詳しく書きます。開発元と特徴、そしてライセンスとスター数については割愛します。
おなまえ
この項いる？まあ一応...
flutterは英語で「はためく」や「ひるがえす」といった意味の動詞です。スラング的に「(恋などで)ときめく」といった意味にもなるとか。
electronは英語で「電子」という意味の名詞ですね。こっちは知ってる方も多いかな？古代ギリシア語由来の語だそう。
ちょっとした雑学程度にお使いください（笑）。
プラットフォーム
上で見てもらった通りですが、Flutterはモバイル対応、Electronはなしです。ほかは大きくは変わりません。
が、今回はデスクトップのことしか考えないのでこれは考慮しません。となると、問題はこちらです。
Flutterは32bit非対応、Electronはwin8.1以前非対応
(ﾟДﾟ)
だって日本企業では未だ32bitのメモリ1GBもないようなwin7にCeleronが現役で
社内用のツールを作りたい方はお気をつけて。win8.1ならまだ僕の知り合いにも使ってるヤツがいますし...。
Windowsじゃなかったとしても、稀に32bitのPCにLinux入れて復活させてるケースもあるので、要注意です。
あとElectronを(Web)としているのは、Electron”には”Web向けにビルドする機能が備わっていないからです。が、作ったものは既にWeb向けですね。
開発に使う言語
FlutterはDart語ですが、ElectronはWeb技術系の言語たちですね。
Web技術というのは特定の言語ではなく、Webサイトを作るのに必要な言語たち、具体的にはHTMLとCSS、そしてJavascriptです。TypescriptからReactやVue等のフレームワークも使えます。
ElectronはそのままChromiumブラウザを内包するので、Webサイトを作る際に使う技術は大体使えるのです。
ホットリロード
Flutterはホットリロード対応です。助かりますね。
Electronを「△」にしているのは、外部のツールでホットリロードができるからです。まあ、レイアウトを確認したいだけなら、別にElectronの機能に頼る必要もないので...。
ホットリロードってなんだ
GTK等で開発する場合は変更を加える度にビルドが必要ですが、ホットリロードがあるとコードを変えてもビルドせずに変更を確認出来ます。
開発開始
最近になって突然注目されているFlutterですが、Flutter自体は結構前から開発されてました。リリースしたのが最近なだけです。2017年とか18年とか。
Electronは新しいとはいえ、比較的昔からありますし、情報も多いですね。なんと2013年。歴史が長い分採用されているソフトも多く挙がるみたいです。
クロスコンパイル
Flutterはクロスコンパイル非対応です。自身のOS向けとWeb向け、そしてAndroid(macならiOSも)にならビルドできます。が、作業中のOS以外のOSへのビルドは出来ません。今後可能になるのかもしれませんが...。
Electronは...よくわかりません。ちゃんとした情報が見つかりませんでした。
「できる」という記事が多く見つかりましたが、実際の方法がわかりませんでした。
Electronの友達、TauriはlinuxからWindowsにビルドできました。動作も確認済みです。
公式のドキュメントに非対応と書いてあるんですけどね？一部の機能が使えないのでしょうか？
共通点
あんまり触れませんがちょっとだけ。
OSS技術
FlutterはBSD系のライセンスで、ElectronはMITライセンス。GPL系じゃないので助かりますね。
現在も開発中の比較的新しい技術であること
セキュリティー面では嬉しいことです。
よくわかんねえ古いライブラリとか使うの怖いですから...。
クロスプラットフォーム開発可能でデスクトップ開発ができる
それぞれのOSに向けてコードを書き直さなくていいということは、それだけ仕事が減るということです。
「Windowsだけの予定だったけど、好評だから他のOS版も作っちゃう！」ってときは便利です。移植の手間がほぼゼロですから。
専用のIDEが必要ないこと
JavaやC#なんかでIDEなしの開発をするのは勇気がいりますが、FlutterとElectronは専用のIDEは不要です。VimでもOK。
一応、FlutterはVSCodeを推奨してますね。ElectronもVSCode推し。
なおVSCodeはElectron製。
Flutterの良いところと悪いところ
良いところ
- (モバイルアプリとデスクトップアプリが同じソースコードで開発できる)
- ウィジェットが独自のものになっている
- 書き出しサイズが小さい
- 実行速度が早い
(モバイルについては大きく触れません。)
書き出しが小さいのは大きな利点です。Electronは「Hello, world!」を表示するだけのアプリも200MBとかですが、Flutterは雛形をビルドして20MBとかでした。
実行も速いですね。性能に関してはFlutter一択です。
悪いところ
- ウィジェットが独自のものになっている
- Dart語ってなんなんだ(憤怒)
- 採用事例が少ない
ウィジェットが独自のものになっているというのは、やはり面倒です。学ぶことが多くなってしまいます。
そして、ウィジェットの問題を軽く超えてくるさらなる問題、「Dart語ってなんなんだ」。
雛形のコード見たんですけど...これを本気でAltJSにしようとしてたのか？Google。
ぱっと見がJavaで、よく見るとJSのようなC#のようなCのような...。僕には無理です。
Dartを使う主な技術ってFlutterしかないんですよね。Flutterでしか使えない言語、更に難解...。それを学びたいと思うかはあなた次第。
Electronの良いところと悪いところ
良いところ
- Web技術がそのままスタンドアロンアプリ作成に活かせる
- 各種Web用フレームワークが使える
- Node.jsの機能が使える
これに尽きます。超簡単にスタンドアロンアプリが作れる。Node.jsの機能もアクセスできる。単純ですが、とても強力な機能です。HTMLとJavascriptなら扱える人も多いでしょう。
悪いところ
- バイナリがデカい
- ソースコードが完全には隠せない
- 動作が若干重い
- XSSの危険性が
- Node.jsやブラウザ上で出来ないことは基本出来ない
宿命なのですが、Chromiumを内包するので書き出したアプリは巨大です。200MBは余裕。
さらに、ソースコードが完全には秘匿化出来ない。楽な故の最大の弊害です。最新バージョンがどうなっているかはわかりませんが。
あと、技術が技術なのでXSSもやられます。電卓とかを作るなら良いですが、アプリの種類によっては要注意。
最大の壁はブラウザやNode.js上でできないことは出来ないことでしょう。今までの特徴を見ればわかるかもしれませんが、スタンドアロンのふりをしているだけに過ぎないので仕方ないです。
朗報。友達のTauriはRustを使う代わりにWebviewを使うため、Chromiumを内包しないようです。そのため、Electronのような重い書き出しにもならず、ソースコードも秘匿性が高いんだとか。
Rustが難易度高めですが、Electronから乗り換えるには良いかもです。Tauriのビルド機能だけ使ってRustをほぼ使わない用法もできるでしょうし。どうなるかわかりませんけど...。
同じ理由でWailsなんかもおすすめです。
結論
良い感じのFlutterですが、学ぶには敷居が高いです。伸びる技術だとは思いますが、僕は遠慮します。
もしも初学者がFlutter＋Dartをやりたい言うならば、止めはしませんが...って感じです。実際にどこのサイトで見ても初心者におすすめの言語でDartは挙がっていませんでした。
Electronに関しては、HTMLとJSでスタンドアロンアプリを作成できる点がやっぱり強いです。採用例としてVSCodeやVOICEVOX、Twitchなんてものもありますし。それだけ採用されるということは強いってことの証拠でしょう。
やっぱり質と難易度はトレードオフなんですかね...。
参考元
まとめ
共通点
- どちらも選択するには素晴らしいOSSのクロスプラットフォーム開発対応フレームワーク
- 専用のIDEは不要、VSCodeが推奨されている
- クロスコンパイルにはあまり向いていないかも
Flutter
- モバイルにも書き出せる
- アプリサイズが小さいかつ、比較的高速に動作する
- ウィジェットが独自のものであり、特殊
- プロジェクト構造が少し複雑
- 32bitへの書き出し非対応
- Dart語
なぜDart語を採用したんだ...
Electron
- Web開発の技術でスタンドアロンアプリが開発できる
- 各種フレームワークや、Node.jsの機能が使えるが、複雑
- win8.1以前非対応
- セキュリティーに関して少し弱い
- ソースコードが見られる可能性あり
- 書き出したアプリのサイズが大きくなりがち
セキュリティーに関しては結構Electronはよわよわなので、使用する場は要検討。OSSにしても良いようなものを開発するなら良い選択肢。電卓とかちょっとしたツール、ゲームを作りたいなら十分。
NW.jsやTauri、Wails、CEFなど、似た技術がいくつかあるため、そちらを検討するのも手。