Vapor Trail

明るく楽しく元気よく

2020年振り返り

Cordova

4月あたりからcordova+cakephpの仕事を引き継いで機能追加やバグ修正をしていた。cordova全くわからんかったけど、html+css+jsでwebview表示しているだけでネイティブ層はほとんど触らないのでなんとかなった。

経験として身についたこと。

Sass

今までbootstraperで極力CSSを書かないようにしていたが、5000行超えしているSassはアンチパターンの宝庫で学ぶことが多かった。タグに直接スタイルを当てているとめちゃくちゃ変更しづらい。スタイルの当て方が、タグに直接・id・クラスと入り乱れており、詳細度って大事だなと気付かされた。

BEM記法

タグにスタイルを当てている+ネストが深いためCSSがHTMLの構造に依存しておりHTMLのタグを変更するとCSSも変更しなければいけない状態だったがページごとにBEM記法で書き直したりした。

Vue.js

Vue.jsの経験はなかったが、methodとcomputedの違い、v-ifとv-showの違いとか一通り知る機会になった。webpackとかのbundlerを使わないでhtml内のscriptでvue.jsを読み込んで使うというのもあまりないと思うので良い経験だった。『Vue.js入門 基礎から実践アプリケーション開発まで』の本もだいぶ前に読んでいたけど、やっぱり目的なく読んでもすぐ忘れてしまうので業務で使って覚えるのが一番だなと感じた。v3でComposition APIになって随分変わったようだがv3を使う予定がないので必要になったらキャッチアップするかなという感じ。

Cordova・ネイティブ関係の知識とか改善したこと

WKWebView対応

5月あたりはUIWebViewを使用しているアプリがAppStoreにアップロードできなくなったのでiOSのWKWebView対応をしていた。
CordovaのUIWebView→WKWebView移行についてまとめ - Qiita

UniversalLinkの設定

QRコードでURLを読み込んでアプリをインストールしていなければストアへ、インストール済みの場合はアプリ内の特定のページを開くみたいな機能を追加するにあたってUniversalLinkについて知った。AndroidはカスタムURLスキーマで比較的簡単に実装できるがiOSは何かとめんどくさかった。
QRコードでのアプリ起動とユニバーサルリンク - Vapor Trail

署名付きAPKのビルドの自動化

毎回手動でやっていた署名鍵でのビルドする機能がcordovaにはあったのでその設定をしたりした。
Android Platform Guide - Apache Cordova

デプロイゲートの利用

実装した機能の確認をしてもらうのにiOSはテストフライトを利用していたが、AndroidはビルドしたAPKファイルをいちいち渡して確認してもらっていた。フィードバックをもらって更新するたびにいちいち渡すのが面倒だったのでデプロイゲートにアップロードして配布するようにした。

ReactNative

新規スマホアプリ開発でCordovaで実装するか、ReactNativeで実装するか悩んだが、いろいろ考えてReactNativeを選択することにした。React+ReactNativeのスキルができたことはよかったが、正直Capacitorのほうが適切だったかなと思っている。CordovaとReactNativeを両方経験して「Cordovaも良かったんだなぁ」と思った点は、

  • ビルドが速い
    ReactNativeはAndroidは速いが、iOSのリリース版ビルドに5~10分ぐらいかかる。
  • ビルドサイズが小さい
    ReactNativeだとビルドしてできたapk,ipaファイルが最低30MB~になる。
  • クラッシュしない
    Cordovaはエラーになっても表示が白くなって何も表示されないだけでクラッシュはしない。モバイルアプリなので当然通信環境が悪いとか考慮する必要があり、いろいろな状況を想定してクラッシュしないように作ることは大変である。
  • Webの技術で作れる
    グラデーション、すりガラスなどの凝ったデザインの場合、ReactNativeだとライブラリを入れないと実現できない。(実はlinear-gradientはできるかも)

iOSでテキストの部分選択が出来なかったり、ReactNativeは変なところでハマりどころが多い気がする。逆にReactNativeの良かった点としては、

  • 情報量が多いところ
  • Reactの有名ライブラリがReactNativeに対応してくれている場合が多いのでライブラリが豊富。
  • その延長線上でライブラリのドキュメントが充実しておりAPIもわかりやすいものが多い。

結局、一長一短だし、どの技術を選ぶにせよAndroidiOS両対応開発はしんどいという事実は覚悟しなければいけない

React

ReactNativeどころかReactも初めてだったためAPIから非同期でデータを取ってきて初期値としてセットして表示するという方法すらわからない状態で正直苦労した。

Hooks

カスタムフックを作ったりしてuseStateとuseEffect+depsはなんとなく理解できたが、その他のuseCallbackとuseMemoなどのフックは理解が怪しい。

非同期

はじめはuseEffect内でAPIから非同期でデータを取得して表示していたがローディングやプルリフレッシュの実装が面倒だったのでreact-queryを使用した。react-queryを導入したものの最新バージョンを使用していると思っていたら、たった1ヶ月の間でv2.26.2からv3.5.9にアップデートされていた。さらにドキュメントも書き換わっていて削除されたAPIについてすでに見れなくなっていた。これはまずいなと思ってローディングとrefetch、reduxを使用したキャッシュ機能を持つ自作のカスタムフックを使用することにした。早くSuspenseが正式リリースされて非同期処理が楽になってほしい。

Redux Toolkit

当初はpropsで渡すかContextで十分かなと思っていたが、Reactの理解が進むにつれてredux-persistも使いたかったしRedux使ったほうが便利そうだなと感じてReduxToolkitを導入することにした。本当はRecoilを使いたいが勇気がなかった。でもやっぱり状態管理は難しいのでReduxやキャッシュはなるべく使わず、都度APIで取得したものをただ表示するだけにすれば、状態を意識する必要がないしバグも起こらないという考えで極力状態は持たないようにしている。

コンポーネント設計

MoleculesとOrganismsの違いはよくわからんし時間かかりそうだなと感じてはいたがやっぱりAtomicDesignは無理だった。 基本的にこれらの記事*1の通りで別の会社の人が作ったページデザインを分解して共通で使えそうなパーツを抽出していくという、AtomicDesignの思想とは真っ向から反対するやり方では当然うまく行かなかった。ページをまたがって同じような部分が少ないデザインであった(統一性がない)こともあるが、再利用可能なコンポーネントって幻想では?と感じている。見た目とロジックを分離するPresentationalComponentとContainerComponentの考えはDIっぽくておもしろいなと思った。

ReactNativeで開発するにあたって参考にしたものとか

この本が自分的にかなり良かった。

良かった点としては

  • JS+Reactの基本的な知識が一通り学べる
  • ReactNativeのコアコンポーネントの説明
  • Reduxの使用
  • ReactNavigationの説明
  • AndroidiOSごとのdebug・release環境の設定ファイルの切り替え

Reactバリバリ書いている人ならともかくReactもしくはReactNativeに挑戦しようとしている人には実用的で役に立つと思う。Githubのリポジトリディレクトリ構造とか書き方とかかなり参考にしている。