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
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
旅行プランAIエージェント開発の裏側
ippo012
2
920
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
AIコーディングAgentとの向き合い方
eycjur
0
280
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Producing Creativity
orderedlist
PRO
347
40k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Side Projects
sachag
455
43k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Six Lessons from altMBA
skipperchong
28
4k
Site-Speed That Sticks
csswizardry
10
820
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…ハイブリッドに適したものを社内で試行錯誤開発中
ご清聴ありがとうございました