デスクトップ開発ならFlutterとElectron(とその友達)は何が違うんだ

この記事は、「デスクトップのクロスプラットフォーム開発をするならどのフレームワークがいいんだ」と悩んでいる方向けです。Flutterの最大の利点であるモバイル対応に関しては「ほぼ」ガン無視して語るのでご了承ください。
APIがー...とか細かい仕様のあれこれについてはは書きません。最終的な判断は皆様に委ねます。それに、この記事を読んでいるときと書いているときで最新の情報が大きく違うと思うので、詳しいところはご自身でで調べてください。

結局のところは？

結論だけ書きます。一長一短です（笑）。どちらもクロスプラットフォーム対応で、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)とか
開発元	Google	GitHub
特徴	モバイルに対応している。また、独自のGUIパーツが使える。	Web技術で開発できる。Webフレームワークが使える。
ホットリロード	○	？(あるっちゃある)
Githubのスター	158k	110k
ライセンス	三条項BSDライセンス	MITライセンス
開発開始	2014年	2013年
クロスコンパイル	×	たぶんできると思う けどやり方はよくわからん

同じところ

• OSS技術
• 現在も開発中で、新しい技術であること
• (もちろん)デスクトップ開発ができること
• 専用のIDEを必要としないこと

参考にしたサイト

Flutter

Electron

それぞれ詳しく書きます。開発元と特徴、そしてライセンスとスター数については割愛します。

おなまえ

この項いる？まあ一応...

flutterは英語で「はためく」や「ひるがえす」といった意味の動詞です。スラング的に「(恋などで)ときめく」といった意味にもなるとか。

electronは英語で「電子」という意味の名詞ですね。こっちは知ってる方も多いかな？古代ギリシア語由来の語だそう。

ちょっとした雑学程度にお使いください（笑）。

プラットフォーム

上で見てもらった通りですが、Flutterはモバイル対応、Electronはなしです。ほかは大きくは変わりません。
が、今回はデスクトップのことしか考えないのでこれは考慮しません。となると、問題はこちらです。

Flutterは32bit非対応、Electronはwin8.1以前非対応

(ﾟДﾟ)

時止めをくらったように固まってました...。
だって日本企業では未だ32bitのメモリ1GBもないようなwin7セロリン現役でs
社内で使うためになにか作るとかならお気をつけを。ふつーにwin8.1なら僕の知り合いにも使ってる謎の情強なやつがいますし...。
他にも32bitのPCにLinux入れて復活させてるケースもあるので、要注意です。

あとElectronを(Web)としているのは、ElectronにはWeb向けのビルドが備わってないからです。が、Web技術でプログラミングするので、作ったものは既にWeb向けだからです。

開発に使う言語

FlutterはDart語ですが、ElectronはWeb技術系の言語たちですね。

DartはGoogleの夢見た「AltJS」でしたが失敗、Flutterで再度注目されたという歴史があります。

Web技術というのは現行のWebサイトを作るのに必要な知識たちです。具体的にはHTMLとCSS、そしてJavascriptです。また、TypescriptはもちろんReactやVue等のフレームワークも使えます。
Electronはビルドの際にそのままChromiumというウェブブラウザを内包するので、Webサイトを作る際に使う技術は大体使えるのです。

ホットリロード

Flutterはホットリロード対応です。助かりますね。
Electronを「？」にしているのは、ElectronがHTMLとJSで開発を行うものだからです。Web開発自体にホットリロードもビルドも何もないので「？」です。ホットリロード的なことは出来ます。

ホットリロードってなんだ

平たく言えばビルドを再度しなくてもGUIが更新される機能です。
GTK等で開発する場合は変更を加える度にビルドが必要ですが、ホットリロードがあるとコードを変えてもビルドせずに変更を確認出来ます。

開発開始

最近になって突然注目されているFlutterですが、Flutter自体は結構前から開発されてました。リリースしたのが最近なだけです。2017年とか18年とかそのへん。
Electronは昔からあるし、昔からリリースされてきてるので情報も多いですね。なんと2013年。歴史が長い分採用されているソフトも多く挙がるみたいです。

クロスコンパイル

Flutterはクロスコンパイル非対応です。開発中のOS向けとWeb向け、そしてAndroid(macならiOSも)にならビルドできます。が、開発中のデスクトップOS向け以外へのビルドは出来ません。多分。今後何かしらの技術が出てくるかもしれませんが...。

Electronは...よくわかりません。ちゃんとした情報が見つかりませんでした。ので、ここでは断言を避けておきます。できるという記事が多く見つかりましたが、方法がわかりませんでした。ぜひ調べてみてください。

あ、ただ、何故か友達のTauriはlinuxからWindowsにビルドできました。実行も確認済みです。公式のドキュメントに非対応と書いてあるんですけどね？おそらく何かしらの機能が使えないのでしょう。僕一人ではテストできませんが。
が、他からmacOS向けにコンパイルできるものはないようです。macはクロスコンパイルしてもらえない運命。

共通点

あんまり触れませんがちょっとだけ。

OSS技術

FlutterはBSD系のライセンスで、ElectronはMITライセンス。GPL系じゃないので助かりますね。クローズドソースのアプリ開発にはいい感じです。

現在も開発中な新しい技術

セキュリティー面では嬉しいことです。よくわかんねえ古いライブラリとか使うの怖いですから...。

クロスプラットフォーム開発可能でデスクトップ開発ができる

それぞれのOSに向けてコードを書き直さなくていいということは、それだけ仕事が減るということです。それぞれのOS向けにイチから勉強する手間も必要もなくなります。
もっとプラスに考えれば、Windows向けの予定だったけど好評だから他のOS版も作っちゃう！ってときは楽です。移植の手間がほぼゼロですから。

専用のIDEが必要ないこと

CやC#なんかでIDEなしの開発をするのはちょっと勇気がいりますが、FlutterもElectronも専用のIDEは不要です。その気になればVimでもOK。
一応、FlutterはVSCodeを推奨してますね。ElectronもVSCode推し。そんなVSCodeはElectronの技術を使っているとかなんとか。

Flutterの良いところと悪いところ

良いところ

• (モバイルアプリとデスクトップアプリが同じソースコードで開発できる)
• [ウィジェットが独自のものになっている]
• 書き出しサイズが小さい
• 実行速度が早い

まあFlutterの最大の利点なはずのモバイル対応をガン無視しているのでアレですが...。
じゃなくてもElectronに比べて安全ですよね。で、書き出しが小さい。Electronは「Hello, world!」を表示するだけのアプリも200MBとかになるのですが、Flutterはコマンドで作れる雛形がコンパイルして20MBとかでした。
で、実行も速いですね。性能に関してはFlutter一択です。

悪いところ

• [ウィジェットが独自のものになっている]
• Dart語ってなんなんだ(憤怒)
• 採用事例が少ない

さっきもウィジェットが独自のものになっているというのは書いたのですが、GUI構築のパーツが独自ということです。それが良いことか悪いことかはわかりません。
でも、これは言わせてもらいます。

Dart語ってなんなんだ

...最初に作る雛形のコード見たんですけど...これを本気でAltJSにしようとしてたのか？Googleさん。
ぱっと見がJavaです。で、よく見るとJSのようなC#のようなCのような...混ぜたような文法です。Javaとかやってた方には良いですが...ぼくはたおれました。
追撃をするかのような話ですが、調べた限りはDartを使う技術ってFlutterしかないんですよね。FlutterのためにDartを学ぶのは勇気がいります。

Electronの良いところと悪いところ

良いところ

• Web技術がそのままスタンドアロンアプリ作成に活かせる
• 各種Web用フレームワークが使える
• Node.jsの機能が使える

まあこれに尽きます。超簡単にスタンドアロンアプリが作れる。で、Node.jsの機能もアクセスできる。それが全てですが、とても強力な機能でしょう。HTMLとJavascriptなら扱えるエンジニアも多いでしょうし。

悪いところ

• 書き出したファイルが何故かデカい
• ソースコードが完全には秘匿化できない(らしい)
• 若干動作が遅く、重い
• XSSの危険性が
• Node.jsやブラウザ上で出来ないことは基本出来ない＋ブラウザ上でできることもできない

宿命といえば宿命なのですが...Chromiumブラウザを内包するので書き出したアプリは巨大です。200MBは余裕。
さらに、Chromiumを内包するせいでソースコードが完全には秘匿化出来ないんだとか。これは、NW.jsもそうらしいです。楽な故の最大の弊害です。最新バージョンがどうかはわかりませんが。
そして、Chromiumブラウザ上で動くのとあんまり差がないので、動作は遅めです。
あと、技術が技術なのでXSSもやられます。電卓とかを作るなら良いですが、アプリの種類によっては要注意。

最大の壁はブラウザやNode.js上でできないことは出来ないことでしょう。今までの特徴を見ればわかるかもしれませんが、スタンドアロンのふりをしているだけに過ぎないので仕方ないです。

ここで朗報。友達のTauriはRustを使う代わりにChromiumを内包しないようです。そのため、Electronのような重い書き出しにもならず、ソースコードもより秘匿性が高いんだとか。
Rustが難易度高めですが、Electronから乗り換えるには良いかもです。Tauriのビルド機能だけ使ってRustをほぼ使わない用法もできるでしょうし。どうなるかわかりませんけど...。

結論

良い感じの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にしても良いようなものを開発するなら良い選択肢。電卓とかオフラインゲームなら十分。

似た技術がいくつかあるため、そちらを検討するのも手。