Capacitorを使ってWebアプリをAndroid/iOSアプリにビルドする
今回、スマホアプリを２つ（「レンズ何持ってく？」と「TaskTrees」）作ってみたのですが、技術選定に悩みました。
個人的にはそもそもWebアプリがあればスマホアプリ別にいらなくない？
と思っていたのですが、若者からは意外と「アプリ無いの？」と言われることがままありまして、今はクロスプラットフォームのフレームワークやライブラリがいくつもあるので、お勉強を兼ねて作ってみるかなぁと思い立ちました。ということでまとめです。
前提としては、自分はこの１年とにかくTypeScriptとReactを中心にやっていた、ということと、比較的パフォーマンスにシビアではないツール／ユーティリティーを日曜アマチュア開発者が作るという視点であることをご了承ください。
検討したフレームワーク／ライブラリは以下です。
Flutter
今、巷で人気？のフレームワーク。Dartは初見なのでゼロから勉強する必要がありますが、MaterialDesign準拠のUIウィジェットが多数ビルトインされているので、リッチなインタラクションを持ったUIをサクッと書けそうに思いました。
もともとReactでMUI（MaterialDesignにインスパイアされたUIライブラリ）を使っていたのもあり、少し触ってみたところ学習曲線もゆるかに見え、最後まで悩みました。
が、すでにReactでがっつり組んであるUIを書き換えるのは大変そうだなぁと思い、とりあえず今回はやめました。でも、そのうちやってみたいです。
React Native
Reactと名がついていますが、UI部分はほぼ書き直し、MUIも使えないですし、早々と候補からは消えました。どうせ書き直すならFlutterかなぁ、と。（昨今のシェアを見ると、そう思っている開発者は多いのでしょう）
NET MAUI / AvaloniaUI
C#クロスプラットフォーム勢です。.NET MAUIは１年前くらいに一本作ってみましたが、その時は正直、破壊的変更が多くて完成度にまだ不安がありました。
プログラミングを本格的に始めるにあたり、最初にVB.NET→C#と進んでいった経緯と、Avaloniaはデスクトップアプリを作るのにここ１年の動きを結構追っていたので、それなりに慣れてはいたのですが、スマホアプリはビルドしたことないのと、React＋MUIが快適すぎて戻れなくなってしまいました。好きなんですけど、除外。
でも、今のAvaloniaIUI11.xはかなり仕上がってきていて、今C#で作る選択肢としては個人的におすすめできます。UNOというのもありますが、こちらはよくわかりません。
tauri
Electronの対抗馬としてデスクトップアプリの用途が有名だと思いますが、
現在のBetaではiOSやAndroidにも対応していて、かなり野心的なプロジェクトになってきています。
さすがに絶賛Beta中すぎて今回は外しましたが、デスクトップアプリを作る分には、結構おすすめできます。
OSのブラウザを使うので配布サイズが軽いのはもちろんなのですが、バックエンドがRustであることで二の足を踏む人もいそうですが、フロントエンド側のAPIがかなり練られていて、実際はElectronよりもバックエンドのコードは大幅に減らせます。
ElectronでいちいちPreload噛ますのがまだるっこしいと思っている方には今後有効な選択肢になってくるかもしれません。
マルチWebViewなどが実装されたばかりで、バックエンドゴリゴリに使うアプリでも少しずつ光明が見えてきています。ただ、現状はまだFirebaseとか動かすにはトリッキーな実装が必要ではあります。
これもちょっと今後追いかけてみたいとは思っています。
Capacitor
今回の採用フレームワークです。Cordovaの後継という位置づけだそうですが、Cordovaを触ったことはありません。
とにかく、Webアプリをネイティブアプリにラップするだけのシンプルなものです。
比較的マイナーだと思うのですが、なんと珍しく日本語ドキュメントが用意されています。
と言っても今回はネイティブ機能はほとんど使っていないので、ドキュメント見なくても拍子抜けするほど簡単にスマホアプリ化できました。
今回使用したネイティブアクセス用のプラグインはFirebaseとファイルピッカーくらいです。でも助かりました。Firebaseのプラグインもここまで充実したものはElectronにも無いですからね。
でも、日本だと記事はほとんどありません。なんでこんなにマイナーなんでしょう？やっぱりプロの方から見たらガワアプリはパフォーマンスやトラブルシューティングの工数＆リスクが怖い感じなんですかね・・・？
まとめ
今後の予定としては、とりあえず何か作るときは引き続きTypeScript＋Reactで組んで、業務アプリはPython（実は未公開のデータ分析アプリなど、業務用のPythonの成果物は多いです。）、
Flutterちょっとやってみて、シンプルなデスクトップアプリならtauriも視野に、という感じかなと思っています。
おしまい。
Discussion