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
350
TypeScript+Firebaseで作るサーバーレスアプリケーション/Create serverless app with TypeScript + Firebase
uutarou10
1
1.1k
GatsbyでPWAやってみた / Tried PWA using Gatsby
uutarou10
1
410
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
78
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
CI改善もDatadogとともに
taumu
0
110
Domain-Driven Transformation
hschwentner
2
1.9k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Writing documentation can be fun with plugin system
okuramasafumi
0
120
GAEログのコスト削減
mot_techtalk
0
110
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Designing for Performance
lara
604
68k
How STYLIGHT went responsive
nonsquared
98
5.3k
GitHub's CSS Performance
jonrohan
1030
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Your Own Lightsaber
phodgson
104
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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してやっていけてる
ご静聴ありがとうございました