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.9k
React Nativeを活用したアプリ開発体制/sapuri meetup
@hotchemi
July 19, 2018
Tweet
Share
More Decks by @hotchemi
See All by @hotchemi
kompile-testing internal
hotchemi
0
250
The things we’ve learned from iOS×React Native hybrid development
hotchemi
2
5.2k
Type-Safe i18n on RN
hotchemi
2
1.1k
Navigation in a hybrid app
hotchemi
3
1.3k
PermissionsDispatcher × Kotlin
hotchemi
0
3.1k
kotlin compiler plugin
hotchemi
1
740
Rx and Preferences
hotchemi
2
150
Introducing PermissionsDispatcher
hotchemi
1
150
khronos
hotchemi
4
1.9k
Other Decks in Programming
See All in Programming
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
260
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
Swift Updates - Learn Languages 2025
koher
2
470
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
250
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
310
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Why Our Code Smells
bkeepers
PRO
339
57k
Bash Introduction
62gerente
615
210k
Automating Front-end Workflow
addyosmani
1370
200k
Making Projects Easy
brettharned
117
6.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Tale of Four Properties
chriscoyier
160
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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…ハイブリッドに適したものを社内で試行錯誤開発中
ご清聴ありがとうございました