Cordovaをdisる人類全員に読んでほしい「Cordovaつらいを考える」
以下の記事で「Cordova／Ionicに比べれば、まだ少しはまともな選択だろう」と述べてあるのをみて、ここ数年Web Nativeに関わって思うことをちょっとまとめてみようと思います。
私はWeb Developerですので、この記事はWeb Native寄りの意見になります。また、本記事内では、いわゆるWeb Viewでつくるガワアプリを「Web Native」、それ以外（React Native/Native Script/Swift/Kotlinなど）をまとめて「Mobile Native」と呼称しております（分類はWhere Does Ionic React Fit in the React Ecosystem?から）
note: Cordovaつらいって言っちゃだめという記事ではありません。OSSの活動は続いてるので、伝聞や過去のものではなく、最新のCordovaやWeb Nativeを評価してほしいなという記事です。
Cordovaつらいを深掘りする
「Cordovaつらい」と一括りで評価されることが多いですが、「一体これは何を指して言ってるのか」を確認するために、Googleで「Cordova つらい」「Cordova 遅い」「Cordova やめたほうがいい」などで検索してみました。いろいろな記事がでてきますが、いろいろ読むと大体論点は以下の通りです。
1. IEを彷彿させる表示崩れ
2. 表示速度が遅い・カクつく
3. 反応速度が遅い
4. てか使い物にならないぐらい遅くない？
5. バージョンあげたらビルドできなくなった
6. プラグインのコールバック地獄
「Cordova 死ね」「ガワアプリ 滅べ」まで調べたのでこんなものじゃないですかね。これらについてひとつずつ書いていこうと思います。
1. IEを彷彿させる表示崩れ
記事の執筆日をみるとわかるのですが、大体数年前の記事です。どういうことかといいますと、cordova-iosのデフォルトがUIWebViewだった時代なんですよ。あと、Crosswalkが現役で古いAndroidをサポートしてた頃の話で、古いブラウザで動かしてたから「CSSのFlexboxが使えない」「transformがきかない」といったことがありました。
Webに置き換えていえば、「IE11をサポートしてるからつらい」という話なのですが、
- UIWebViewはiOS8未満（iOS9は4年前リリース）
- CrosswalkはAndroid 4.4未満（Android4は5年前リリース）
なので、もう気にする必要はありません（ちなみにiOS8未満のシェアは0.1%、Android 4.4未満のシェアは2%弱らしいですがこれに対応するならWeb Native、Mobile Native関係なく辛い戦いが待っています）。Cordovaのデフォルト設定をつかってください。
2. 表示速度が遅い・カクつく
まずこちらをご覧ください。
「Stack」のカクつきに対して「Fiber」のスムーズな様子がわかります。2017年にReactの内部アーキテクチャが刷新されたのですが、StackとFiberは刷新前と刷新後になります。AngularJSでdirty checkingだった変更検知がAngularでChange Detectionが採用され、効率化・高速化が行われた話もそうなのですが、JavaScript界隈は2016-2018年あたりで大きな転換があり、パフォーマンスやSPAの開発環境の改善が行われました。そして、さらに日々改善が行われています。
日本でCordovaが流行ったのは、Amazonで書籍の刊行年をみていると2013-2015年あたりのようですが、その頃と今のパフォーマンスを同一視することはできません。デバイス自体も大きく進化しましたし、jQueryでSPAを書いてパフォーマンスチューニングで泣いてたからCordovaつらいの時代ではなくなりました。
3. 反応速度が遅い
多いのは「タップの反応速度が遅い」なのですが、これはダブルタップかどうかを判定するためにデバイスが300ms待機することを指しています。
ですが、こちらはtouchendで制御するのもいいですし、clickableをつけるのも手です。FastClick.jsやHammer.JSといった外部ライブラリを使うなど様々な対応が可能です（最近のデバイスは、aタグとbuttonタグは300ms遅延はデフォルトで除去されているようです）
あと「数百件のリストを表示すると遅くなるから、Web Nativeはだめだ」という意見も散見したのですが、Virtual Scrollを導入してください。起動速度を早めるためにLazy Loadingを採用するのも有効です。Webブラウザでも同じ問題を抱えてるので様々な対処方法が発明されています。
4. てか使い物にならないぐらい遅くない？
多分エミュレータで動かしてると思うのですが、エミュレータは遅いことが多いイメージを持ってます。
って、あれ。自信をもって「使い物にならないぐらい遅いです！」と書こうと思ったのですが、試しに今エミュレータで動かしてみたところサクサク動いて困惑してるのですが。まぁ、マシンスペック依存のエミュレータで遅いから使い物にならないと判断せず、実機でご確認ください。
5. バージョンあげたらビルドできなくなった
本体バージョンとプラグインのバージョンが合わずにビルドできなくなったというあるあるネタなのですが、Cordova teamもこれは認識していたようで、Cordova 9から本体にプラグインのバージョンがあわないと以下のような警告をだしてくれるようになりました。
cordova-ios version check failed ("dev/cordova9/platforms/ios/cordova/version"), continuing anyways.
"framework" tag with type "podspec" is deprecated and will be removed. Please use the "podspec" tag.
ビルド時はいろいろなログが書き出されるので読みにくいですが、エラーが出れば、そのエラーから一文抽出して検索すれば大体対処法を（英語ですが）見つけることができます。
というか、Cordova 9（今年リリース）になってからエラーチェック本当よくなりましたよね。この記事用にわざとエラーだそうとしたのですが、プラグインなどインストール時点でちゃんと警告でるようになってエラーだせなかったです・・・。
あと以下プラグインは、本体と同時進行で対応が進んでいるので何も考えずに導入できそうです。
cordova-plugin-battery-status
cordova-plugin-camera
cordova-plugin-device
cordova-plugin-dialogs
cordova-plugin-file
cordova-plugin-geolocation
cordova-plugin-inappbrowser
cordova-plugin-media
cordova-plugin-media-capture
cordova-plugin-network-information
cordova-plugin-screen-orientation
cordova-plugin-splashscreen
cordova-plugin-statusbar
cordova-plugin-vibration
cordova-plugin-whitelist
cordova-plugin-wkwebview-engine
6. プラグインのコールバック地獄
PromiseでラッピングされたIonic Nativeつかってください。といっても、最近ははじめからPromiseベースのプラグインの方が多くなってきています。
Cordovaはつらくないのか
Cordovaつらいは「それって過去のものじゃない？」を書いたのですが、それでも決してつらくないわけではありません。
というのは、Cordovaのその特徴にあります。CapacitorというWeb Nativeフレームワークをさわったり、React NativeやSwiftをさわってすごく思うのは
Cordovaは、Web制作者がNativeの知識なくつくれる
ということです。Mobile Nativeをやったことある人にはこのすごさが理解してもらえると思うのですが、CordovaってAppDelegateもMainActivityもさわらないし、変数はconfig.xmlに格納するのでinfo.plistもstrings.xmlも直接さわらないことだってありうるわけですよ。
全力で隠蔽にかかっています。で、大体「Cordovaつらい」ってなる時は、そこにアプローチするか、そこがエラーをだしている時です。その時のための選択肢は、「がんばる」以外にも例えば以下のようなものがあります。
◯ Ionic Frameworkを使う
Web NativeのためのUIフレームワークとして有名なもののひとつです。モバイルUIに必要なライブラリ集であるのはもちろんのこと、アニメーションを60fpsで実装している他、CordovaプラグインをPromiseベースにラッピングするIonic NativeやデバイスストレージにアクセスするためのIonic Storage、CLIサポートなど様々な面でCordovaでのアプリ制作をサポートしてくれます。非線形ナビゲーションの実装で苦しんだり、遷移前ページのスタックで悩むぐらいならまずIonicをベースにすることをおすすめします。
ちなみに、Ionicの知見を共有するためのslackのオープンチャンネルあります。https://ionic-jp.herokuapp.com
◯ Monacaを使う
MonacaはクラウドIDEや開発プラットフォームとしての一面が強いですが、私的には「Cordova本体とプラグインの互換性は常にチェックされている」ことに価値を感じています（Monacaが正式サポートしてるプラグインのみ）。
さらに「チケット制のテクニカルサポート（有料）」もあり、Monacaが正式サポートしていないプラグインについても相談できるので、Web制作者がNativeの知識がないままアプリをだす路線を進むなら、とても有用ではないでしょうか。日本語対応です。
◯ Capacitorを使う
前述した「Cordovaとはまた別のWeb Nativeフレームワーク」ですが、こちらはWeb NativeとMobile Nativeのちょうど中間ぐらいのポジションを目指していて、NativeレイヤーへのアクセスはCordovaよりも容易になっています。ちなみにCordovaプラグイン100%サポート（公式）です。
代わりにAppDelegateもMainActivityもさわる必要があります。
View部分はリッチな表現力があるWeb技術を使いつつ、もっとNative APIへのアクセスをテクニカルに行いたいというレイヤーの方にはちょうどいいかと思います。具体的には、例えば「Cordova自体はつらくないけど、Cordovaプラグイン自作つらい」ような方々ですね。
まとめ
私的に、Cordovaを採用する理由で一番好きなのは
「なぜアプリストアに出す必要があるの？PWAならWeb上に置いておけばいいじゃない」
答えは簡単、そこにユーザがいるからです。
https://qiita.com/rana_kualu/items/845a4e062b73df1d2762
があるのですが、
- MicrosoftがReact Native採用したからReact Nativeがいいんだ
- Googleの検索回数でCordovaが増えてきたからCordovaを採用する
- AirbnbがReact Nativeやめたから、React Nativeやめよう
みたいな画一的な見方ーー他人の事情や流行り廃りや、上にあげた「昔つらかったから今もつらいだろう」ではなく、チームのスキルとプロダクトの性質によって技術を採用できるとより幸せになれると思っています。個人的には、Web NativeはWeb制作者がプライベートプロダクトをつくりはじめる、プロダクトの価値をあげるのにとてもいい選択肢だと思っています。
そもそもWeb NativeのDOMレンダリングがだめなら、PWAやAndroidのWeb APKなんて全部信用できないじゃないですか。もっとWebを信じよう（個人的な感想です）
それでは、また。
おまけ： 参考になりそうな記事
追記：Cordovaプラグインについて
何件かプラグインについて質問をもらったので追記しておきます。
まず前述しているように、Cordova teamが保守しているプラグインについては、Cordova本体に追随してアップデートされているので問題ありません。
次にコミュニティプラグイン（OSS。個人が自分でリリースしたものを公開しているもの）については、4,000件以上あって一概にはいえないのですが、私がCordovaを使ってた経験でいえば「みんなが使ってるプラグインは大丈夫」でした。
`cordova-universal-links-plugin` のように「みんな使ってるけど保守されなくて動かない」ものは、`cordova-universal-links-plugin-fix`が新しくリリースされるなどコミュニティレベルでのDX改善の動きは大体あります。すんなり動かなくても、Issuesやプルリクを読んだら解決策がみつかるものがほとんどです。Push通知、Badge、広告、課金まわり、SocialShare、アプリストア評価、Firebase AuthなどいろいろNativeプラグイン使いましたが、みんなが使うものは大体動かす方法があります。
で、それでも動かないという時のために、記事内で有料チケットで専門家に相談できるMonacaであったり、同じWeb Native FrameworkであるCapacitorを紹介しています。
もうちょっというと、OSSのプラグインが動かないからだめ、ではなく、コントリビューションチャンスと捉えるもらうことができれば、よりCordova/Web Native界隈は豊かになっていくのではないでしょうか。
以上、追記でした。