Upgrade to Pro — share decks privately, control downloads, hide ads and more …

カンムでの React Native の 歴史と現在 / React Native in Kanmu

09923d8b0c79423a289b7d5dc31a59e4?s=47 mururu
September 03, 2020

カンムでの React Native の 歴史と現在 / React Native in Kanmu

09923d8b0c79423a289b7d5dc31a59e4?s=128

mururu

September 03, 2020
Tweet

More Decks by mururu

Other Decks in Technology

Transcript

  1. カンムでの React Native の 歴史と現在 Kanmu, Inc. 伊藤 友気 【Kanmu

    × Nature】React Native Meetup
  2. 2 伊藤 友気 Kanmu, Inc. @mururu @murururu ⾃⼰紹介

  3. 3 バンドルカードを作ってます

  4. 4 歴史 現在の構成 これから 1 2 3 アジェンダ

  5. 歴史 1

  6. 6 バンドルカードのはじまり • バンドルカードの前にやっていたプロダクトの反省 から⾃分たちでカードを発⾏するべきだと判断 • 当時の開発チーム • 開発者3⼈(内⼀⼈は兼デザイナー) •

    3⼈とも Web の開発経験はあったがネイティブ開 発経験はない
  7. 7 バンドルカードのはじまり • 2015年12⽉ 開発開始 • 2016年9⽉ iOS版リリース • 2016年12⽉

    Android版リリース
  8. 8 なぜ React Native だったのか • ネイティブ開発経験のない少数の開発者で、素早く アプリをそれなりのクオリティでリリースしたかっ た

  9. 9 課題① Android 版リリース 開発初期は iOS のみでとりあえず実装してリリース し、Android 版もそこまで⼤きな変更は必要ないと⾒ 込んでいた

    実際にはアニメーション系などいくつかクラッシュす る部分の発⽣や、iOS しか対応していないライブラリ なども導⼊してしまっていた プラットフォームによる分岐、機能の変更などによ り、なんとかリリースにこぎつける 後にアプリケーションレベルでのプラットフォームご との分岐は解消 →
  10. 10 課題② Android 4.4 系対応 もともと Android 4.4 系で原因特定が難しいクラッ シュが発⽣しがちであった

    Android の 64bit 対応のため React Native 0.60 への アップデートを試みた所、Android 4.4 系でのクラッ シュが爆増し断念 4.4 系のサポート終了を決定 終了までの間 Multiple APK にして 64bit対応版/⾮対応 版を別ブランチで管理 →
  11. 現在の構成 2

  12. 12 現在の構成 • React Native, JavaScript, Flow, Redux, Storybook, Firebase

    など • ⽇常のほとんどの開発が React の世界のエコシステ ムの範囲ですんでいる • Expo は使っていない • リリースサイクルはおよそ週1
  13. 13 ビルド/リリース周り • 基本的にビルド/リリースはfastlaneで完結させ、CI はBitriseにのせている • lint や Jest でのテストなどは社内の別のプロジェク

    トと共通で CircleCI 利⽤ • 開発版の社内への配布は DeployGate を利⽤
  14. 14 ビルド/リリース周り

  15. 15 API 連携 • JSON Hyper-Schema からAPIクライアントの実装を ⾃動⽣成している • バックエンドのAPIサーバーも同じスキーマからリク

    エスト/レスポンスの構造体やバリデーション実装を ⾃動⽣成している
  16. 16 デバッグ • react-native-debugger • react-devtools や redux-devtools 相当の機能 •

    ネットワークのデバッグ • ネイティブのエレメントの検証など • Flipper に移⾏予定
  17. 17 Storybook • いわゆるUIコンポーネントカタログ的にはなっておら ず、コンポーネント開発時にコンポーネントのみを確 認するような⽤途で利⽤している • ほぼ全てのコンポーネント/ページをStorybook化して いる •

    Storyshots で Snapshot testing を⾏っている
  18. 18 • Sentry • 当初よりエラートラッキングに利⽤ • Firebase Crashlytics • クラッシュレポート

    • Firebase で記録しているイベント紐付けられる ので便利 エラートラッカー/クラッシュレポート
  19. 19 • Analytics • ⾏動ログは Firebase Analytics で収集 • react-navigation

    の遷移イベントをフックにペー ジ遷移のトラッキングなども • Remote Config • 任意のタイミングで表⽰を切り替えたい場合 (ex. アドホックな⽂⾔の変更 • A/B テスト Firebase の他の機能
  20. これから 3

  21. 21 TypeScript 移⾏ • 現状は Flow + JavaScript • そろそろ

    Flow をサポートしないライブラリも出て きているので、⾝動きが取れなくなる前に TypeScript に移⾏したい • 変換ツールもあるが⼀筋縄では⾏かない感じがして いるので、泥臭い作業になりそう
  22. 22 デザイン連携の効率化 • 現状、実装とデザインの⼀致してない部分がある • ⼀貫したUIを素早く効率的に提供できるようにした い • Atomic Design

    ベースでコンポーネントをデザイ ナーと共に認識を合わせながら整理している
  23. まとめ 4

  24. 24 まとめ • Web の開発者ならば基本的に開発にはすぐ⼊れる • ただしハマったときはネイティブの知識がないとや はりしんどい • バンドルカードは都度ハマりながら進んできました

  25. We are hiring!

  26. おわり