本文へスキップ

"showcase"タグ付き投稿1件

すべてのタグを表示

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

・読了時間5分
Garrett McCullough
Garrett McCullough
シニアモバイルエンジニア

カリフォルニア州チコに本社を置くBuild.comは、住宅改修用品の最大手のオンライン小売業者の一つです。同社は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とApple Pay（iOSユーザー向け）にも対応しています。

予想外の優れた機能をいくつかご紹介します。

  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設定、テストに必要なプロパティを強制するカスタムルール、違反する変更をブロックするプッシュ前のフックが含まれています。

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

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の各バージョンでいくつかのバグが修正されるものの、さらに多くのバグが導入されるように見えました。たとえば、AndroidでのリモートJSデバッグは数ヶ月間機能しませんでした。幸いなことに、2017年には状況がはるかに安定しました。

大きな課題の一つは、ナビゲーションライブラリです。長い間、Expoのex-navライブラリを使用していました。これはうまく機能しましたが、最終的に非推奨となりました。しかし、当時は機能開発が盛んだったため、ナビゲーションライブラリの変更に時間を割くことは現実的ではありませんでした。そのため、ライブラリをフォークして、React 16とiPhone Xをサポートするように修正する必要がありました。最終的に、react-native-navigationに移行することができ、今後継続的なサポートが得られることを期待しています。

ブリッジモジュール​

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

今後の展望​

React Nativeが成長を続けるにつれて、コミュニティへの要望事項には以下が含まれます。

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

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