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を活用したアプリ開発体制/sapuri meetup
Search
@hotchemi
July 19, 2018
Programming
3
7.8k
React Nativeを活用したアプリ開発体制/sapuri meetup
@hotchemi
July 19, 2018
Tweet
Share
More Decks by @hotchemi
See All by @hotchemi
kompile-testing internal
hotchemi
0
230
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
5.1k
Type-Safe i18n on RN
hotchemi
2
1.1k
Navigation in a hybrid app
hotchemi
3
1.2k
PermissionsDispatcher × Kotlin
hotchemi
0
2.9k
kotlin compiler plugin
hotchemi
1
700
Rx and Preferences
hotchemi
2
140
Introducing PermissionsDispatcher
hotchemi
1
140
khronos
hotchemi
4
1.8k
Other Decks in Programming
See All in Programming
テストをしないQAエンジニアは何をしているか?
nealle
0
130
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
SwiftUI Viewの責務分離
elmetal
PRO
0
140
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
ARA Ansible for the teams
kksat
0
150
Writing documentation can be fun with plugin system
okuramasafumi
0
120
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Building Your Own Lightsaber
phodgson
104
6.2k
Building an army of robots
kneath
302
45k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Speed Design
sergeychernyshev
25
780
Why Our Code Smells
bkeepers
PRO
335
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Docker and Python
trallard
44
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Transcript
Product Meetup #1 React Nativeを活用したアプリ開発体制 @hotchemi
01 02 03 04 05 Agenda | 自己紹介 なぜReact Nativeなのか
Quipperにおけるアプリ開発 ハイブリッド開発への挑戦 振り返り・まとめ
01 自己紹介
自己紹介 • Shintaro Katafuchi | @hotchemi • Mobile Developer |
Engineering Manager ◦ Android/iOS/React Nativeの開発や採用、マネジメントを担当 • 2013年株式会社リクルートテクノロジーズ入社 ◦ 旧受験サプリのQuipper移管に伴い2016年Quipperに異動
02 なぜReact Nativeなのか
React Nativeとは • Facebookが開発するクロスプラットフォーム用フレームワーク • 端的に言うとReactでNativeアプリのUIを作れる ◦ “Learn Once, Write
Anywhere” • Facebook, Instagram, Pinterest, Skype, Microsoft, Discord等が採用 ◦ Quipperでは2017年秋より検証、導入を開始
なぜReact Nativeなのか • 急増するモバイル開発の需要に対応する為の手段 ◦ サプリユーザーのアクセスの半数以上はモバイルから • フロントエンド開発のクロスファンクショナル化 ◦ 全社的にReact/TypeScript化を進める中でWeb/Appの垣根を無くす
• 新技術への挑戦、より良い開発環境を求めていく
Daily Active User
よくある誤解 • 「React Nativeだからアプリは本気じゃないんでしょ?」 ◦ No! Nativeと同等のクオリティでなければ出しません。超本気です • 「React NativeだからNativeエンジニアは採用しないんでしょ?」
◦ No! React Nativeを真に使い倒すにはNativeの知識が不可欠です • 「ずっとReact Native使っていくんです?」 ◦ チームとプロダクトの状況次第なのでこだわりません!
03 Quipperにおけるアプリ開発
None
forCOACHES • 合格特訓コースのコーチ専用業務ア プリ • DeployGateとApple Developer Enterprise Programを用いて配信 •
100% React NativeアプリをCode Pushを用いてOTA配信を実現 ※ 参考: QuipperでのCodePushを使ったOTA配信とその自動化
開発体制 • ほぼWebエンジニアのみで開発/運用を回している ◦ NativeエンジニアはCIスクリプトやライブラリを書いたりする ◦ Nativeアプリのビルドは面倒な事が多いが徹底した自動化で対応 • 100%TypeScriptなので特別な事はしていない ◦
いわゆる普通のReact+Redux構成 ◦ Navigationやpushは3rd partyライブラリを利用
ライブラリ • Navigation: react-native-navigation • Push: react-native-fcm • Redux: typescript-fsa,
redux-persist, redux-thunk, redux-throttle • UI: native-base • i18n: react-native-i18n • Others: react-native-code-push, react-native-sentry, react-native-config
Code Pushを用いたRelease • 開発期間終了後にリリース向けの Pull Requestを自動で作成 • テスト後、プロダクトマネージャーが Pull Requestをマージすると自動で
OTA配信が実行される • コーチがアプリを起動するといつの 間にか更新されている
スタディサプリ高校・大学受験 • 日本中の中学・高校生が日常的に 学習に利用 • iOSはSwift、AndroidはKotlin/Java で開発を進めてきた • 今年から徐々にReact Nativeを混ぜ
たハイブリッド開発スタイルに移行中
スタディサプリ高校・大学受験 • メッセージ、プロフィール、宿題機能 など幾つかのコンポーネントをReact Nativeでリプレース中 • Nativeに違和感なく溶け込む実装を 実現できるかにこだわっている
04 ハイブリッド開発への挑戦
ハイブリッド開発への挑戦 -チーム体制- • iOS: 2名(JP) • Android: 2名(JP) • React
Native: 2名(PH) • iOS/Android/RN全部合わせたMonorepoで開発 ◦ CircleCI 2.0のworkflow, cacheを利用して効率的なCIを実現 ◦ 詳しくは弊社ブログを参照
ハイブリッド開発で鍵になるのは データの同期戦略とUIの一貫性
ハイブリッド開発への挑戦 -データの同期戦略- • Reduxを使ってもNative側にもインフラストラクチャ層があるので実際には Single Storeにならない • NativeとRNで双方向のデータ同期を考え始めると破綻する(した) • データの同期が必要な設計を可能な限り避ける。やむを得ない場合は単方
向で同期するように設計する事 ◦ スタディサプリではUserに関するデータだけNative→RNのフローで同 期している
None
ハイブリッド開発への挑戦 -UIの一貫性- • WebViewではないのでOS標準のコンポーネントを扱う ◦ iOSはHuman Interface Guideline、AndroidはMaterial Design Guidelineをしっかり理解する
• 画面遷移は”Native感”を出す為にとても重要。色々なライブラリを試したが 結局ViewController/Activityベースの自作モジュールを利用 ◦ iPhone X対応やCustom Transition等の要件に対応しやすい ◦ JSで書けるCustomViewをアプリに乗せていくイメージ
None
05 振り返り・まとめ
振り返り -Good Part- • (iOSでは) Nativeと見分けがつかないUIを実現できた ◦ パフォーマンスについて良く聞かれるがJS専用のthreadで処理を行う 為全然良い。初期化時間はまだ問題になっていない •
Webエンジニアを開発に巻き込み開発をスケールできた • ロジック層やTypeScriptのinterfaceをWebと共有できそう • React+Reduxの疎な設計のおかげでテストが書きやすい&実行しやすい
振り返り -Bad Part- • Androidで問題が多発... ◦ Fragmentを使用しているとAPI設計的に順次導入しづらい ◦ WebKitをNDKとしてbundleするのでAPKサイズが増加 •
(そもそも) クロスプラットフォーム開発は難しい ◦ 両OSで動作確認しながら開発していくのは専業開発者でも辛い ◦ Bridgeを書くとブラックボックス化しがち
React Nativeは「アリ」? • (個人的には)「アリ」。ただNativeの事を勉強しなくていいという事にはならな い。Nativeの知識とWebのプラクティスを組み合わせる事で開発をスケール させる事ができる技術 • ハイブリッド開発は知見が殆ど出回っていないので設計は慎重になった方が 良い。チームの状況も組み合わせて考える ◦
QuipperではiOSでハイブリッド開発を続けていく予定 ▪ 良いAndroidエンジニアが入ってきてくれたので(小声)
まとめ • QuipperでのReact Native活用事例についてご紹介させて頂きました ◦ 細かい点は懇親会や弊社ブログで! • 今回はRNの話でしたがiOS/Android開発もしっかりやっています • 伝えたかったのはQuipperは新技術への挑戦と知見の公開を恐れない会社
だという事 ◦ 前例が無くても挑戦するし、逆にしがみつかない
知見の公開 • BlogにてReact Nativeの記事を絶賛公開中 • 必要なモジュールは自社で作ってどんどんOSS化 ◦ quipper/react-native-td…Treasure Data Client
◦ quipper/react-native-i18n-ts…型安全にi18nを取り扱うヘルパー ◦ quipper/redux-rn-misc-enhancer…NetInfo, AppStateをreduxと繋ぐ ◦ navigation…ハイブリッドに適したものを社内で試行錯誤開発中
ご清聴ありがとうございました