Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
カンムでの React Native の 歴史と現在 / React Native in Kanmu
Search
mururu
September 03, 2020
Technology
1
500
カンムでの React Native の 歴史と現在 / React Native in Kanmu
mururu
September 03, 2020
Tweet
Share
More Decks by mururu
See All by mururu
Go で始める将棋 AI
mururu
1
2.9k
カンム と React Native / Kanmu React Native
mururu
0
3.7k
Go製のネットワーククライアントに対する継続的 / Fuzzing for network client in Go
mururu
4
2.7k
Building FIDO2 server in Go
mururu
2
7k
「ElixirがリアルタイムWebに強い」 というのは本当か?
mururu
13
6.5k
Erlang: Improve the performance of cryptographic functions by AES-NI
mururu
1
250
Treasure Data Summer Intern 2015 Final Report
mururu
0
3.1k
Elixir 1.0
mururu
3
850
Why Elixir
mururu
9
2k
Other Decks in Technology
See All in Technology
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
360
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
1
550
Digitization部 紹介資料
sansan33
PRO
1
4.6k
本当にわかりやすいAIエージェント入門
segavvy
9
5.1k
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
830
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
230
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
180
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
140
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
200
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
370
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
800
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
150
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Balancing Empowerment & Direction
lara
1
480
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
We Have a Design System, Now What?
morganepeng
53
7.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
RailsConf 2023
tenderlove
30
1.2k
Side Projects
sachag
455
43k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
360
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
カンムでの React Native の 歴史と現在 Kanmu, Inc. 伊藤 友気 【Kanmu
× Nature】React Native Meetup
2 伊藤 友気 Kanmu, Inc. @mururu @murururu ⾃⼰紹介
3 バンドルカードを作ってます
4 歴史 現在の構成 これから 1 2 3 アジェンダ
歴史 1
6 バンドルカードのはじまり • バンドルカードの前にやっていたプロダクトの反省 から⾃分たちでカードを発⾏するべきだと判断 • 当時の開発チーム • 開発者3⼈(内⼀⼈は兼デザイナー) •
3⼈とも Web の開発経験はあったがネイティブ開 発経験はない
7 バンドルカードのはじまり • 2015年12⽉ 開発開始 • 2016年9⽉ iOS版リリース • 2016年12⽉
Android版リリース
8 なぜ React Native だったのか • ネイティブ開発経験のない少数の開発者で、素早く アプリをそれなりのクオリティでリリースしたかっ た
9 課題① Android 版リリース 開発初期は iOS のみでとりあえず実装してリリース し、Android 版もそこまで⼤きな変更は必要ないと⾒ 込んでいた
実際にはアニメーション系などいくつかクラッシュす る部分の発⽣や、iOS しか対応していないライブラリ なども導⼊してしまっていた プラットフォームによる分岐、機能の変更などによ り、なんとかリリースにこぎつける 後にアプリケーションレベルでのプラットフォームご との分岐は解消 →
10 課題② Android 4.4 系対応 もともと Android 4.4 系で原因特定が難しいクラッ シュが発⽣しがちであった
Android の 64bit 対応のため React Native 0.60 への アップデートを試みた所、Android 4.4 系でのクラッ シュが爆増し断念 4.4 系のサポート終了を決定 終了までの間 Multiple APK にして 64bit対応版/⾮対応 版を別ブランチで管理 →
現在の構成 2
12 現在の構成 • React Native, JavaScript, Flow, Redux, Storybook, Firebase
など • ⽇常のほとんどの開発が React の世界のエコシステ ムの範囲ですんでいる • Expo は使っていない • リリースサイクルはおよそ週1
13 ビルド/リリース周り • 基本的にビルド/リリースはfastlaneで完結させ、CI はBitriseにのせている • lint や Jest でのテストなどは社内の別のプロジェク
トと共通で CircleCI 利⽤ • 開発版の社内への配布は DeployGate を利⽤
14 ビルド/リリース周り
15 API 連携 • JSON Hyper-Schema からAPIクライアントの実装を ⾃動⽣成している • バックエンドのAPIサーバーも同じスキーマからリク
エスト/レスポンスの構造体やバリデーション実装を ⾃動⽣成している
16 デバッグ • react-native-debugger • react-devtools や redux-devtools 相当の機能 •
ネットワークのデバッグ • ネイティブのエレメントの検証など • Flipper に移⾏予定
17 Storybook • いわゆるUIコンポーネントカタログ的にはなっておら ず、コンポーネント開発時にコンポーネントのみを確 認するような⽤途で利⽤している • ほぼ全てのコンポーネント/ページをStorybook化して いる •
Storyshots で Snapshot testing を⾏っている
18 • Sentry • 当初よりエラートラッキングに利⽤ • Firebase Crashlytics • クラッシュレポート
• Firebase で記録しているイベント紐付けられる ので便利 エラートラッカー/クラッシュレポート
19 • Analytics • ⾏動ログは Firebase Analytics で収集 • react-navigation
の遷移イベントをフックにペー ジ遷移のトラッキングなども • Remote Config • 任意のタイミングで表⽰を切り替えたい場合 (ex. アドホックな⽂⾔の変更 • A/B テスト Firebase の他の機能
これから 3
21 TypeScript 移⾏ • 現状は Flow + JavaScript • そろそろ
Flow をサポートしないライブラリも出て きているので、⾝動きが取れなくなる前に TypeScript に移⾏したい • 変換ツールもあるが⼀筋縄では⾏かない感じがして いるので、泥臭い作業になりそう
22 デザイン連携の効率化 • 現状、実装とデザインの⼀致してない部分がある • ⼀貫したUIを素早く効率的に提供できるようにした い • Atomic Design
ベースでコンポーネントをデザイ ナーと共に認識を合わせながら整理している
まとめ 4
24 まとめ • Web の開発者ならば基本的に開発にはすぐ⼊れる • ただしハマったときはネイティブの知識がないとや はりしんどい • バンドルカードは都度ハマりながら進んできました
We are hiring!
おわり