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
410
CSS ド入門ハンズオン/CSS beginner's hands-on
uutarou10
2
82
初心者による初心者のためのKubernetesハンズオン
uutarou10
4
3.2k
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
370
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
700
Discover Metal 4
rei315
2
110
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
250
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
6.6k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Language of Interfaces
destraynor
158
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Designing for humans not robots
tammielis
253
25k
A Modern Web Designer's Workflow
chriscoyier
694
190k
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してやっていけてる
ご静聴ありがとうございました