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

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日に両方の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アプリは、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に移行することができ、今後もサポートが継続されることを願っています。

ブリッジモジュール​

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

今後の展望​

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

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

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