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

React Nativeで構築 - Build.comアプリ

·6分で読めます
Garrett McCullough
Garrett McCullough
シニアモバイルエンジニア

Build.com はカリフォルニア州チコに本社を置き、住宅リフォーム用品のオンライン小売業者としては最大手の1つです。同チームは18年間強力なWeb中心のビジネスを展開してきましたが、2015年にモバイルアプリについて検討し始めました。少人数のチームと限られたネイティブ経験では、独自のAndroidおよびiOSアプリを構築することは現実的ではありませんでした。その代わりに、私たちは非常に新しいReact Nativeフレームワークに賭けることにしました。最初のコミットは2015年8月12日で、React Native v0.8.0を使用しました！2016年10月15日には両方のアプリストアで公開されました。過去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アプリは、Apple App StoreのARショッピングで特集されています！ARは現在、AndroidとiOSの両方で利用可能です！
  3. 共同プロジェクト管理機能により、人々がプロジェクトのさまざまな段階ごとに買い物リストを作成し、選定について協力できます。

私たちは、ARによる没入型ショッピングの次の段階を含め、アプリ体験を向上させ続ける多くの新しくエキサイティングな機能に取り組んでいます。

開発ワークフロー​

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

  • IDEには、Atom、IntelliJ、VS Code、Sublime、Eclipseなどがあります。
  • 単体テストについては、開発者は新しいコンポーネントに対してJestの単体テストを作成する責任があり、私たちはjest-coverage-ratchetを使用してアプリの古い部分のカバレッジを増やす作業に取り組んでいます。
  • ベータ版とリリース候補のビルドにはJenkinsを使用しています。このプロセスは私たちにとってうまく機能していますが、リリースノートやその他の成果物を作成するには依然としてかなりの作業が必要です。
  • 結合テストには、デスクトップ、モバイル、Webにまたがって作業するテスターの共有プールが含まれています。私たちの自動化エンジニアは、JavaとAppiumを使用して自動化された結合テストスイートを構築しています。
  • ワークフローの他の部分には、詳細なeslint設定、テストに必要なプロパティを強制するカスタムルール、問題のある変更をブロックするpre-pushフックなどがあります。

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

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に移行することができ、これが今後もサポートされ続けることを願っています。

ブリッジモジュール​

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

今後について​

React Nativeが成長し続ける中で、私たちのコミュニティへのウィッシュリストは次のとおりです。

  • ナビゲーションライブラリを安定させ、改善する
  • React Nativeエコシステム内のライブラリのサポートを維持する
  • プロジェクトにネイティブライブラリとブリッジモジュールを追加する体験を改善する

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