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
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Software Architecture
hschwentner
6
2.1k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
A Tale of Four Properties
chriscoyier
158
23k
Embracing the Ebb and Flow
colly
84
4.6k
Documentation Writing (for coders)
carmenintech
67
4.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Automating Front-end Workflow
addyosmani
1367
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Unsuck your backbone
ammeep
669
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
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してやっていけてる
ご静聴ありがとうございました