メインコンテンツにスキップ

React Native製 - Build.comアプリ

·5分間の読書
Garrett McCullough
ギャレット・マッカロー
シニアモバイルエンジニア

カリフォルニア州チコに本社を置くBuild.comは、住宅リフォーム用品の大手オンライン小売業者の1つです。チームは18年間、Web中心の強力なビジネスを展開しており、2015年にモバイルアプリの開発を検討し始めました。小規模なチームと限られたネイティブエクスペリエンスのため、独自のAndroidおよびiOSアプリを構築することは現実的ではありませんでした。代わりに、私たちは非常に新しいReact Nativeフレームワークでリスクを負うことにしました。最初のコミットは2015年8月12日で、React Native v0.8.0を使用していました！2016年10月15日に両方のApp Storeで公開されました。過去2年間、アプリのアップグレードと拡張を続けてきました。現在、React Nativeバージョン0.53.0を使用しています。

https://www.build.com/appでアプリを確認できます。

機能​

私たちのアプリはフル機能を備えており、eコマースアプリに期待されるすべてが含まれています。製品リスト、検索と並べ替え、複雑な製品の構成機能、お気に入りなど。標準的なクレジットカード決済方法に加えて、PayPal、iOSユーザー向けにはApple Payも利用できます。

期待できないかもしれないいくつかの際立った機能は次のとおりです。

  1. 約40製品で90種類の仕上げが利用可能な3Dモデル
  2. 拡張現実（AR）により、ユーザーは自宅で照明や蛇口が98％のサイズ精度でどのように見えるかを確認できます。Build.com React Nativeアプリは、ARショッピングでApple App Storeで紹介されています！ARはAndroidとiOSで利用できるようになりました！
  3. プロジェクトのさまざまなフェーズの買い物リストを作成し、選択に関して協力できる共同プロジェクト管理機能

ARによる没入型ショッピングの次のフェーズなど、アプリのエクスペリエンスを向上させる多くの新しくてエキサイティングな機能に取り組んでいます。

開発ワークフロー​

Build.comでは、各開発者が自分に最適なツールを選択できます。

  • IDEには、Atom、IntelliJ、VS Code、Sublime、Eclipseなどが含まれます。
  • 単体テストでは、開発者は新しいコンポーネントのJest単体テストを作成する責任があり、`jest-coverage-ratchet`を使用してアプリの古い部分のカバレッジを向上させるよう努めています。
  • Jenkinsを使用してベータ版とリリース候補をビルドしています。このプロセスはうまく機能しますが、リリースノートやその他の成果物を作成するにはまだかなりの作業が必要です。
  • 統合テストには、デスクトップ、モバイル、Web全体で作業するテスターの共有プールが含まれます。当社の自動化エンジニアは、JavaとAppiumを使用して自動統合テストスイートを構築しています。
  • ワークフローの他の部分には、詳細なeslint構成、テストに必要なプロパティを適用するカスタムルール、問題のある変更をブロックするプッシュ前フックが含まれます。

アプリで使用されているライブラリ​

Build.comアプリは、Redux、Moment、Numeral、Enzyme、多数のReact Nativeブリッジモジュールなど、多くの一般的なオープンソースライブラリに依存しています。また、放棄されたため、またはカスタム機能が必要だったためにフォークされた多くのフォークされたオープンソースライブラリも使用しています。ざっと数えると、約115のJavaScriptとネイティブの依存関係があります。未使用のライブラリを削除するツールを検討したいと思います。

現在、TypeScriptを介して静的型付けを追加し、オプションのチェーンを検討しています。これらの機能は、まだ発生しているいくつかの種類のバグの解決に役立つ可能性があります。

  • 間違った型のデータ
  • オブジェクトに予期したものが含まれていなかったために未定義のデータ

オープンソースへの貢献​

私たちはオープンソースに大きく依存しているため、私たちのチームはコミュニティに貢献することをお約束します。Build.comでは、チームが構築したライブラリをオープンソース化することを許可し、使用しているライブラリに貢献することを奨励しています。

私たちは多くのReact Nativeライブラリをリリースし、保守してきました。

  • react-native-polyfill
  • react-native-simple-store
  • react-native-contact-picker

また、ReactとReact Native、`react-native-schemes-manager`、`react-native-swipeable`、`react-native-gallery`、`react-native-view-transformer`、`react-native-navigation`など、多くのライブラリに貢献してきました。

私たちの旅​

過去数年で、React Nativeとエコシステムが大きく成長するのを見てきました。初期の頃は、React Nativeのすべてのバージョンでいくつかのバグが修正されましたが、さらに多くのバグが発生しました。たとえば、リモートJSデバッグはAndroidで数か月間壊れていました。ありがたいことに、2017年には状況がはるかに安定しました。

私たちの大きな課題の1つは、ナビゲーションライブラリでした。長い間、Expoのex-navライブラリを使用していました。それはうまく機能しましたが、最終的には廃止されました。しかし、当時は機能開発に追われていたので、ナビゲーションライブラリを変更する時間はありませんでした。つまり、ライブラリをフォークして、React 16とiPhone Xをサポートするようにパッチを適用する必要がありました。最終的に、`react-native-navigation`に移行することができ、うまくいけば、継続的なサポートが得られるでしょう。

ブリッジモジュール​

もう1つの大きな課題は、ブリッジモジュールでした。最初に始めたとき、多くの重要なブリッジが欠落していました。私のチームメイトの1人が`react-native-contact-picker`を作成したのは、アプリでAndroidの連絡先ピッカーにアクセスする必要があったからです。また、React Nativeの変更によって壊れた多くのブリッジも見てきました。たとえば、React Native v40に破壊的な変更があり、アプリをアップグレードしたとき、まだ更新されていない3つまたは4つのライブラリを修正するためにPRを送信する必要がありました。

今後の展望​

React Native が成長を続けるにつれて、コミュニティへの私たちの希望は以下のとおりです。

  • ナビゲーションライブラリの安定化と改善
  • React Native エコシステム内のライブラリへのサポートの維持
  • プロジェクトへのネイティブライブラリとブリッジモジュールの追加エクスペリエンスの向上

React Native コミュニティの企業や個人は、私たち全員が使用するツールの改善に時間と労力を惜しみなく提供してくれています。まだオープンソースに関わっていない方は、使用しているライブラリのコードやドキュメントの改善を検討してみてください。始めるのに役立つ記事がたくさんあり、想像以上に簡単かもしれません！