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と半年間戦ってわかったコト / What I learned afte...
Search
Kota Nonaka
August 08, 2019
Programming
1
240
React Nativeと半年間戦ってわかったコト / What I learned after fighting React Native for half a year
Meguro.es #22 (2019/08/08) at メルカリの発表資料です。
Kota Nonaka
August 08, 2019
Tweet
Share
More Decks by Kota Nonaka
See All by Kota Nonaka
このあとからできる アクセシビリティ向上 / Accessibility improvements that can be made after this
uutarou10
0
380
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1.2k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
420
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
82
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.3k
Other Decks in Programming
See All in Programming
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
460
AIともっと楽するE2Eテスト
myohei
9
3.1k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
コーディングエージェント概観(2025/07)
itsuki_t88
0
160
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
230
構文解析器入門
ydah
7
1.8k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
260
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
750
テスト駆動Kaggle
isax1015
1
890
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A better future with KSS
kneath
238
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for Performance
lara
610
69k
4 Signs Your Business is Dying
shpigford
184
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Making Projects Easy
brettharned
116
6.3k
Done Done
chrislema
184
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
React Nativeと 半年戦って分かったコト 2019/08/08 Kota Nonaka @ Meguro.es
自己紹介 • 名前 野中 滉太(のなか こうた) • 所属 Fringe81株式会社
(2月からインターン/4月に新卒入社) • Twitter @mogamin3 • 好きな技術 TypeScript/React Native
自己紹介 • 名前 野中 滉太(のなか こうた) • 所属 Fringe81株式会社
(2月からインターン/4月に新卒入社) • Twitter @mogamin3 • 好きな技術 TypeScript/React Native 業務で触ってたら好きになったので布教しにきました
作っているアプリ • 従業員同士が少額の給与と感謝のことばを贈り合う 「Unipos」のスマホアプリ(Android/iOS) • https://unipos.me/ja • 技術スタック • TypeScript
• React Native • Redux • Firebase
戦って感じたメリット4選
①Reactの知識が転用できる • パフォーマンスチューニングの手法 • 状態管理の方法 • コンポーネントの粒度 • Hooksどう使う? この辺に関する知見や悩みはReactでもReact
Nativeでも変わらず。
▲つい最近新しくなったReact Native公式サイト
マジか? 結局分岐だらけになるのでは? ▲つい最近新しくなったReact Native公式サイト
マジか? 結局分岐だらけになるのでは? ▲つい最近新しくなったReact Native公式サイト 動きや起動が遅いんじゃないの?
②意外とちゃんとクロスプラットフォームだった。 • 疑ってごめんなさい ちゃんとクロスプラットフォームでした • 動きも軽快です • (少なくとも弊社アプリは) iOS/Android両OS同じコードで動いている •
一部のStyleにおいて Platform.OS を使って微調整したりしてるくらい
③StyleがCSSっぽく書ける! • React NativeはCSSとほぼ同じ感じで画面のレイアウト組みや装飾を行う プロパティ名がキャメルケースになったりするくらいの差 import React, { Component }
from 'react'; import { View } from 'react-native'; export default class FlexDirectionBasics extends Component { render() { return ( <View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } };
④ライブラリもたくさん • ブラウザAPIやNode.js組み込みのライブラリを叩くものでなければ npmのJSライブラリが普通に使える • OSネイティブの機能を使いたいときも探すと大体ある
戦って感じたデメリット4選
❶JavaScriptの知識だけでOK…ではない • 基本的に開発中はJSやReact/React Nativeの知識があれば困らない • ただし、ビルドやネイティブの依存ライブラリ管理(CocoaPods/gradle)に 対する知識は必要… • Expoを使うことでこの辺ももしかしたら要らなくなる…? (UniposアプリはExpoを使っていないReact
Nativeアプリ)
❷React Nativeバージョン追従辛い問題 • React Native本体は結構頻繁にアップデートされる。 現在の最新は0.60(2019/08/06現在) • まだまだ破壊的な変更が頻繁に起きる。 • 0.57
-> 0.59のアップデートは1日弱かかりました
❷React Nativeバージョン追従辛い問題 • rn-diff-purgeというリポジトリやupdateコマンドを使って バージョン間のテンプレート差分を見ながら手修正したりする必要がある
❸OSによって挙動違う問題 • 端末やOS間でたまに同じスタイルなのに表示が違ったりする。 InputにborderRadius & borderColor 当てるとおかしくなる。 でも、Viewなら大丈夫。 この手のバグはたまにある。アップデートで勝手に直ったりする。 (コントリビュータの方々に感謝)
❹見た目はよしなにしてくれない • Reactは見た目をよしなにするライブラリではない。 React Nativeも最低限の見た目を制御する方法を提供しているだけ。 • 「サクッとそこそこの見た目のアプリを作りたい」 みたいな用途には向かない。 • そのへんは多分Flutterの得意分野。
• デザイナがいるからいいものの個人開発だと大変そう…。
1. Reactの知識が転用できる 2. ちゃんとクロスプラットフォーム 3. CSSっぽいStyle 4. ライブラリ充実 1. JavaScript外の知識が必要
2. バージョンアップ辛い 3. OS間の挙動差異など 4. 見た目はよしなにしてくれない メリット デメリット
言いたいコト • 良し悪しは当然ある。 でも僕はReact Nativeを推したい⚡ • React Native自体の表現力不足で開発を諦めるケースは発生していない • Android/iOSアプリの開発を少人数チームで問題なく開発できている
• なにより、Webしかやってこなかった人(僕)が すんなりJoinしてやっていけてる
ご静聴ありがとうございました