(cache) ReactNativeでアプリ作成

ReactNative、個人開発なので決して大規模ではないですがリリースする前提でガッツリ作成してみました。

特に両OS対応にする必要性はないのでJavaやSwiftでもよかったのですがせっかくだからあまり経験のない環境に飛び込んでみることにしました。

検討したFramework

検討結果

Xamarin
- C#はある程度慣れてはいるので楽
- 一方でXAML側の慣れも情報も少ない(特に日本語)
- VisualStudioForMacがまだ不安定。XamarinStudioはXAMLプレビューがない
React Native
- jsは不慣れなのでそこは厳しい
- View構築はAndroidライクで楽
- React自体の情報はそこそこ多い。Nativeも増えてきた
Flutter
- 開発はしやすい
- しかしGPS/MapViewがない(仕様上必須だった)
- それ抜きでも以前の経験からパフォーマンス面でも問題があると判断
Cordova
- HTML/CSSの経験が浅くView構築が難航は間違いない
- 興味はあるが締切の都合で厳しいと判断

Xamarinと迷いましたがReactのほうが面白いと判断しReactにしました。

ReactNativeに決めたことで次にどういうライブラリを使うか検討です。

せいぜい8画面程度のアプリですが、単なる練習よりは明らかに規模が大きいので型チェックは欲しい。またFluxの仕組はReact抜きでも好みなので何らかのライブラリは欲しい。

そこで今回は

と Facebook純正 でまとめてみました。Facebook同士なら相性がいいだろうと。

TypeScriptも考えたのですが、環境構築が若干面倒なのと最新のReactNativeに対応してるか不安だったのでFlowを採用しました。

Reduxも考えたのですがReactとはいえNativeAppと相性が悪いと思っているのでやめです。ViewControllerがスタック上に積み重なるNativeAppの仕組上、このStackをSingle-State-Treeで管理するのは逆に面倒と思っています。

そこで自作も考えましたがFlux-Utilsを採用してみました。

Flowに関連して環境も Nuclide にしました。

最初に...

Flowが全く使えませんでした

チェックが働いたり働かなかったり。それがNuclideに出たり出なかったり。

チェックが動いたと思ったらReactNativeのライブラリ内でエラーが大量というもうどうしようもない状態でした。初期設定されているconfigファイルでは全く動作しない。

しょうがないので、node_module内を全部Ignore設定にし、自分の作成するフォルダのみチェックするようにしました。

これでも動作が不安定でした。ignoreに.pngを無視しろと書いたのに.pngを解析してエラーとかもうね...厳しかった。

Nuclideをあてにせず、自前でコマンドを叩けばまだマシだったのでそちらをメインに使うようにしました。

一方で Flux-Utilsは普通に使えました

Fluxの仕組自体は単純ですからね。ここは特に苦労することはなかったです。

ただしContainerはうまく使えませんでした、というより存在を知ったのが開発後半で使うのをあきらめました。次はトライしてみたいですね。

しかし非同期処理はFluxの難しいところ、というのを認識しました。本当に難しい。どこにおくかが本当に難しい。Container使えということでしょうけどw

非同期とActionとの絡みで何度か組み直したぐらいです。

しかしやはりReactNativeはいいですね。View構築は本当に楽。あとStateの更新に集中できる仕組なので更新処理もまとめやすいです。

およびAndroid/iOS両対応も今回初だったのですが思ったよりスムーズに進みました。

OSごとに調整が必要だったのは

程度ですね。組み分けもif一発で済むので楽できました。

ただまだ破壊的なバージョンアップが行われているようできびしい。

開発中に一度ReactNativeを更新したのですが、Projectを読み込めなくなってしまいました。

マージの仕方は一切説明ナシ。どうすればいいか分からず新規にProject作成してソースを全コピーして対応しました。

ver1.0.0は遠いようですし、しばらくこういう状態になるでしょうね。使う上で覚悟しておく必要がありそうです。

ちなみにAndroid版をリリース予定。iOSはリリース予定なし。

しかし開発はほとんどiOSで行いました。エミュが高速で開発が捗るんですよね。それでも微調整のみでAndroid対応できたのですごいことです。

一度業務で使ってみたいですね。周囲の理解が必要ですけど...次はTypeScriptで作ってみたいです。