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.2k
Other Decks in Programming
See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
140
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
3
270
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
130
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
190
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
280
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why Our Code Smells
bkeepers
PRO
336
57k
It's Worth the Effort
3n
185
28k
RailsConf 2023
tenderlove
30
1.1k
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してやっていけてる
ご静聴ありがとうございました