こんにちは、福岡オフィスでpixiv chatstoryの開発を担当しているtawachan（@tawachan39）です。

前回「デザイナーでも書けるReact Native」と題して、React Nativeでの開発模様を書かせていただいたのですが、先日無事リリースをすることができました（！）ので、今回はその小話を書いていければと思います。

特に、React Nativeでアプリを作ることに興味があったり実践登用することを検討している人にとって参考になることがあれば幸いです。

リニューアルのきっかけ

pixiv chatstoryは既存のSwiftで書かれていたアプリをReact Nativeで書き換えるだけでなくデザインのリニューアルも行っていました。そのきっかけや経緯について簡単に紹介します。

Swiftのコードをメンテナンスするのが大変でWebの技術で置き換えたかった

現在のpixiv chatstoryのチームの状況の問題なのですが、専属iOSエンジニアがおらず、Webの技術を得意とするエンジニアが多く所属しています。なので、その分Swiftへの変更を入れるのに時間がかかる問題がありました。

pixiv chatstoryはWeb版とiOS版があるのですが、しばらくはWeb版先行で開発して、問題なければ追ってiOS版にも反映させていました。

pixiv chatstoryはまだリリースから1年ほどの若く、安定しているよりもドラスティックに柔軟な開発ができる環境であるほうが望ましい状況なはずなのですが、大きな変更となると今のメンバーだけでスピード感を持ってやるのが難しい状況でした。

この課題を解決するために、技術選定や試行錯誤を経て紆余曲折ありましてReact Nativeで置き換える運びとなりました。

ゼロからコードを書くならデザインも変えられる

Swiftで動いていたものをReact Nativeで書き換えるということは、当然基本ゼロからコードを書き直す必要があります。

となると今まで実装を尻込みしていた改修アイデアを全て盛り込めるのでは...という話になりました。

と言いますのも、Swiftでは開発に時間がかかってしまいあまり大きな変更はiOSアプリがなかなかできないという課題があり、それを意識して細かな改善に終止していました。

なので、これを機にこれまでの改善を可能な限り盛り込んでいき、リニューアルしてしまおうということになりました。トップ画面に関してはこのように変更されました。

採用した技術について

採用した技術を簡単に列挙します。

React Native

React Nativeは、言わずとしれたiOS/AndroidアプリをJavaScriptで書くことができるフレームワークです。

iOS/Androidのコードを共通化できる上に、Reactを知っている人ならそこまで苦労することなく書けるのでWebエンジニアがアプリを書くならとても助かる代物です。弊チームではTypeScriptで書いています。

Expo

Expoとは、React Nativeでアプリ開発をより簡単にしてくれるツールチェーンです。

Expoがカメラやプッシュ通知などのネイティブ機能をラップしてくれているおかげで、開発者は一切ネイティブコードを見る必要がなくなります。iOSやAndroidのアプリ開発の勝手がわかっていなくても、基本的にJavaScriptのみを見て開発を行えばよいのでWebエンジニアにとってはとても役に立つツールです。

ですが、ネイティブコードに依存しているがExpoで対応されていない機能の開発はできないので注意が必要です。React Nativeには便利なライブラリが世の中にはたくさんありとても恵まれた世界なのですが、Expoを選定することでその一部が使えなくなるのでそこはトレードオフです。

実際にReact Native（Expo）で書き換えてみて

React Nativeは開発が早いけどハマりどころが多い、など様々な意見があるかと思います。今回はchatstoryを実際にReact Nativeで書いてみた所感を整理したいと思います。

良かったこと

開発スピードは確かに早い

XcodeでSwiftを書いていた時に比べてかなり早く実装できたと思います。

個人的には、Xcodeのstoryboard上でレイアウトを組むと、どうしてもGUI上で操作する必要がでてきて時間がかかっていました。ですが、React NativeならCSSライクにコード側で全て指定できるので、コピペもしやすいですしGitHub上で差分も見やすいので意図通りの実装がとてもしやすいように思いました。

特にWebエンジニアであれば、FlexboxがReact Nativeでも使えるのでWebで配置するのとほぼ同じ感じで開発できるかと思います。画像に関しては、resizeModeの指定があるなどWebとは少し異なりアプリならではの挙動になるので少し注意が必要だと感じました。また、開発中の変更がホットリロードですぐにシミュレーターに反映されるのでそこもかなりスピードアップに寄与していたと思います。

複数人デバッグが簡単

開発中のアプリを他の人に見せたり触ってもらいたいという状況が多々あると思います。アプリだといちいち検証用のビルドをしてそれを各端末にインストールして...という手間がかかり結構大変です。

しかしExpoのClientアプリを入れるとすぐに最新のビルドを見ることができるのでとても便利。一度セットアップしてしまえば更新も一瞬なので、２回目以降はほぼノーコストで見てもらえるので非エンジニアの人にも頼みやすくなりました。

コードプッシュが優秀

Expoの特徴の１つとしてコードプッシュがあります。通常、iOS/Androidのアプリに変更を入れるためには、App Store/Google Play ストアに出してユーザーにアプリを更新してもらう必要があります。細かな変更を入れるためにも時間を取られてしまうので改善のサイクルが遅くなる要因にもなります。

しかしこのコードプッシュであれば、JavaScriptをビルドしてExpoのサーバーにデプロイする（コマンド一発でできる！）だけでユーザーのアプリへ変更が反映されます。ユーザーが使用しているアプリが起動ごとにJavaScriptのビルドの更新があるかを確認し、あれば自動更新をするという仕組みなので、ユーザーの手を煩わせず変更を届けられるのは開発者としてはとても助かる機能です。

しかし、ユーザーにそれなりのネットワーク通信を課してしまうので、Wi-Fi接続時のみ最新ビルドを取得するよう制御するなどしたほうが親切かと思います。ちなみに現在pixiv chatstoryでは、ダイアログを出して任意に更新がかけられるようにしています。

コードプッシュのおかげで細かなバグであればすぐに対応して直してしまうことができます。また、即時反映のおかげで古い状態で動いているアプリが世の中にほとんどなくなるので、APIサーバーは古いアプリからのアクセスを考慮して互換性を残す必要もなくなります。フットワーク軽くスピーディーに開発を進めたい今の状況にマッチした技術選択だったと思っています。

大変だったこと

パフォーマンスチューニングは必要

何も考えずに実装すると相当カクつきかなりパフォーマンスが悪くなっておりました。最初は問題ないのですが画面を遷移して使っていけば使っていくほど動作が重くなり最終的には使いものにならないくらいでした。

そこで実際に弊チームのエンジニアに計測してもらったところ、ほとんどが関係ない画面の再描画をしていることがわかりました（！）。

measure performance

上の画像はReact Nativeの画面の描画処理を可視化したものなのですが、四角で囲った部分が計測時に表示されていた画面です。それ以外は実際には見られていない裏側に控えている画面でした。

これを見てわかるように一度表示した画面全てに対して常に描画がかかってしまっていたので、やはり明示的に再描画のタイミングを指定しなければなりませんでした。

このあたりは、Reactのライフサイクルにある程度理解のある人が整理して実装して行く必要があるように感じました。パフォーマンス向上ばかりに気を取られていると、ときには変更されるべきときにも再描画が走らず画面が更新されなくなってしまったりと思わぬバグの温床にもなりかねないので注意が必要な箇所です。

Expoだと使えないライブラリがでてくる

React Nativeには数多くのライブラリがあり大変便利なのですが、Expoを選択することでその一部を使うことができなくなってしまいます。ネイティブコードへ設定を書く必要があるものなどは、Expoが対応してくれていない限り使用が不可能となります。

例えば、pixiv chatstoryではFirebaseを活用しているのでFirebase Analyticsを導入したかったのですが、こちらはExpoでは未対応とのことで従来どおりGoogle Analyticsを使っています。

ですが、ネイティブ機能に依存しないライブラリに関しては普通のReact Nativeと同様に使用することができるので今のところ致命的な問題にはなっておらず、Expoによる恩恵のほうが上回っているという印象です。

まとめ

ここまでReact Native（Expo）を実践登用してみての所感を整理してみました。開発前はどこかで致命的な壁に遭遇するのではと懸念もしていましたが、結果的には概ね問題なくリリースまですることができました。

実際にリリースして1週間ほどなのでまだ経過観察中ですが、もし新たな知見が出てきましたら改めて共有させて頂ければと思います。

現在iOS版のみですが、React Native（Expo）で作られたアプリに興味がある方はぜひ一度pixiv chatstoryをダウンロードしてみてください！

Android向けには現在PWA版を用意しておりますので、こちらも興味のある方はぜひ御覧ください！