Job Spotter を iOSへ: Indeed初の React Native アプリ

2013 年、 Facebook は ReactJS をリリースし、(Indeed も含む)多くの人々の Web 開発に対する考え方を変えました。そして 2015 年に Facebook が  React Native をリリースすると、開発者が JavaScript と React を使用して、パワフルなネイティブモバイル体験を生み出せるようになりました。 Indeed でも Job Spotter というアプリの iOS 版リリースをちょうど計画しており、React Native に期待を寄せていました。

ネタバレ注意:期待通りでした。

React React Native について

React のウェブ開発に対する捉え方は独特で、関数ごとにコードを分けるのではなく、コンポーネントごとにコードを分けることを奨励しています。各コンポーネントは必要なレイアウト、スタイリング、ビジネスロジックを全て含んでおり、多くの場合それらは同じファイル内にあります。

React のその他の重要な特徴は一方向のデータフローです。他のフレームワークで用いられるような双方向のフローに比べ、 React を利用した環境では、状態(state)の変化がアプリにどんな影響を与えるか、非常に簡単に確認できます。こうした一方向のデータフローは、 Redux のようなパワフルなライブラリも作成可能にしました。

そしてReact Native は、 React を利用した、 JavaScript での Android/iOS ネイティブアプリ開発を可能にします。ウェブ開発者が、あまり知見をもたないネイティブモバイル開発技術を学ぶことに時間を割かずとも、パワフルなネイティブアプリを開発できるようになりました。

使用するメリット

React Native のおかげで、私たちのモバイル開発サイクルのスピードは上がりました。追加設定がいらないツール達を使用することで、ローカルの iOS シミュレータを使用して React Native アプリを実行できるのです。これにより、 Web 開発と同様に、変更をテストするためにアプリを更新する作業が、再コンパイルせずにできるようになりました。さらにありがたい事に、アプリケーションの状態はこのホットリロード中も維持されます。これらの React Native の開発機能は、時間と労力を節約し、新しい機能の開発に集中させてくれるものだと思います。

また、以前の React に関する知識を活用できたので、新しい言語を学ぶ必要もなく、すぐに開発に取りかかることができたのですが、私たちのチームに Objective-C や Swift での開発経験者が一人もいなかったので、これは非常に助かりました。一部のカスタムイベントログの作成を除き、React独自のコードを書く必要がほぼなかったことも、得した感じでした。

もう一つ、 React Native の興味深い点をあげるとすると、インラインスタイルを使用する必要があることです。これにより、 CSS の「クラス」は実際のところ JavaScript のオブジェクトとなっているのです。初めは変な感じがしましたが、慣れた今はとても気に入っています。オブジェクトを扱っているので、パワフルで、オブジェクトの組み合わせと拡張が可能な CSS クラスを作成ができるため、従来の Web アプリで見られたようなスタイルの重複を避けられます。異なるニーズに合わせて、同じスタイルを使い回すのではなく、異なる体裁や機能を必要に応じて開発することが可能なのです。

また React Native は、スタイリングをより一貫してシンプルにするために作られた新しい CSS モジュールの Flexbox を多用しています。これは、 CSS の従来の妙な挙動を取り除きました。私たちのチームでもFlexboxを色々学習した今では、 Flexbox の宣言型アプローチを使うことで、従来の CSS を使用するよりも、素早く新しいコンポーネントをスタイリングできるようになりました。

デバッグも想像よりもずっと簡単でした。 Chrome のデベロッパー・ツールのデバッガーに接続し、 Web 開発と同じやりかたでデバッグをするだけでした。 React Native では他にもいくつかツールが利用できるのですが、エレメント・インスペクターという機能はコンポーネントに適用されるスタイルを判断します。また、ネットワーク・インスペクターはアプリが作成する XHR リクエストを解析してくれます。慣れたツールを使えるので、問題が発生した際にも追跡し解決しやすいと思います。

課題

React Native はより高速に開発することを可能にしましたが、 React Native 自体も短期間で開発されたものです。 Job Spotter というiOSアプリを開発していた二ヶ月の間に、 React Native は六回もリリースを行いました。新しいバージョンがリリースされる度に、こちらもバージョンを更新し、アプリのリグレッションテストを全て行わなければなりませんでした。

もう一つの大きな課題は、React Native の新しさです。カメラやファイルシステムへのアクセスやパーミッションの処理などの、デフォルトで提供してほしい多くの機能がサードパーティ(外部の)ライブラリを必要としています。 React Native を使用するコミュニティでは、 React Native のコアでまだ必要とされる作業を必死に行っています。それでも場合によっては、これら外部ライブラリはコア・ライブラリに望むような品質を持ち合わせていないこともあるので、私たちはライブラリに対してパッチをあてることもありますが、実際にそうしたパッチをあてているライブラリは複数あります。

また、ナビゲーションやスクリーンの遷移に対して利用できるコンポーネントには一貫性がありませんでした。Navigator のコンポーネントは、遷移するごとに特定のアニメーションが必要とされ、空の遷移をする選択肢がない、という問題がありました。これは当初、シーンの遷移を変な風にしていました。NavigatorIOS コンポーネントを使用しようとしましたが、インターフェースがわかりにくく、シンプルではなかったほか、Navigator 機能の多くが欠けていました。

同様に、 TabBarIOS のコンポーネントはとても良い感じに動作するのですが、遷移は、私たちの使用していた Navigator から完全に独立していました。私たちは、その一つで全てを処理できる Navigator が欲しかったのです。そうした Navigator を欲しい時には、ナビゲーションに対応した異なるコードパスを使用する必要がありました。

挑戦する価値あり

こうした課題があるものの、React Native は私たちの使う技術に合っているので、今後も使用していきます。Android や iOS のエキスパートにはならずとも、Web 開発の強みを活かして、豊かなモバイル体験を作っていければと思います。 React Native が成熟した際には、現在抱えている問題の多くは解決すると見込んでいます。

そんな私たちの次なる目標は、 既存の Job Spotter の Android ネイティブアプリを、 React Native 版に変更する事です。