React Native 入門

REACT NATIVE 入門

自己紹介

▸ 奥宮誠一

▸ リレーションズ株式会社／スマートメンテ

▸ インフラ（AWS）

▸ サーバサイド（Java, PHP, node）

▸ フロント（最近 React Native）

アジェンダ

▸ React Native とは

▸ React の仕組みでモバイルアプリが作れる

▸ ネイティブアプリと遜色ないパフォーマンス

▸ 実際に使ってみて…

▸ クロスプラットフォーム？

▸ React との共通化？

▸ まとめ

REACT NATIVE とは

REACT NATIVE とは

▸ Facebook が 2015年に発表したモバイルアプリ開発のた

めのフレームワーク（OSS）

▸ React の作法（Webの技術）で、iOS / Android のネイ

ティブアプリをクロスプラットフォーム開発できる

▸ “Learn Once, Write Anywhere”

▸ 現在 v0.32（2-week train release）

▸ 本家 Facebook のほかいろんなアプリで利用されている（RN 公式サイトに SHOWCASE あります）

REACT NATIVE とは

REACT NATIVE とは

▸ Netflix, Airbnb も React Native を採用（検討中？）

REACTの仕組みでモバイルアプリが作れる

特色１


▸ モダンJavaScript

▸ コンポーネント指向

▸ JSX

▸ CSS like な Style, Layout

▸ Fluxアーキテクチャ（Redux）




▸ JSX



・ES6 ・ES7

・Object Spread

・Async Functions .babelrc

{ "presets": ["react-native"] }




▸ JSX



・React同様、UIコンポーネントを組み合わせてアプリを実装・UIコンポーネントはJSXで記述できる

React：　・HTMLタグ（<div>, <span>, …）

　・DOMレンダラーReact Native：

　・Nativeコンポーネント（<View>, <Text>, <Navigator> …）

　・Nativeレンダラー


import React, { Component } from 'react';

import { AppRegistry, Text } from ‘react-native';

class HelloWorldApp extends Component {

render() {

return (

<View>

<Text>Hello world!</Text>

</View>

);

}

}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);




▸ JSX



・UIコンポーネントのスタイルやレイアウトは、style プロパティで指定することができる・syntax は CSS とほぼ同じ・レイアウトには flexbox を使うことができる（× float）

REACTの仕組みでモバイルアプリが作れるimport React, { Component } from 'react'; import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component { render() { return ( <View style={{ flex: 1, flexDirection: ‘column', // flexアイテムを上から下に並べる justifyContent: ‘space-between', // flexアイテムを均等の間隔で並べる }}> <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> ); } };

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);




▸ JSX



・データフローには Redux を使用することができる・React Redux（react-redux）: React Native でも動作する




▸ JSX



REACT が書ければ REACT NATIVE もだいたい書けそう！

ネイティブアプリと遜色ないパフォーマンス

特色２


▸ ReactNative !=「WebView上で動作するWebアプリ」

▸ JavaScript のコードをプラットフォームのJSランタイムで動かし、ネイティブのUIコンポーネントとやりとりを

行う→ JavaScriptで書くが、実際のUIはネイティブのコード

で実行

REACT NATIVECORDOVA


iOS Android

Code

WebView WebView

CodeiOS bundle Android bundle

iOS Android

- UI は WebView上で動作する。- ネイティブの機能も一部使えるが、基本 Webアプリ（HTML5）なので、そこがパフォーマンス面での制約となりがち。- 既存のWebアプリを基本そのまま WebView上で動かせる。

- React Nativeは JSのランタイムをもっている。- JSで書かれたコードを各プラットフォーム向けにビルドしてアプリにバンドルし、JSランタイムで動作させる仕組み。- UI は各プラットフォームのネイティブのコンポーネントをレンダリングしており、パフォーマンスはネイティブアプリと原理上同じ。


Platform

APIs

PlatformUI

Components

UIthread(main)

Shadowthread

JSthread

BRIDGE

Java Script Native


http://www.slideshare.net/ModusJesus/optimizing-react-native-views-for-preanimation

http://www.slideshare.net/ModusJesus/optimizing-react-native-views-for-preanimation


https://speakerdeck.com/frantic/react-native-under-the-hood

https://speakerdeck.com/frantic/react-native-under-the-hood


▸ React Native で用意されているネイティブコンポーネント

▸ Navigator

▸ ListView, ScrollView, WebView, MapView …

▸ TabBar, StatusBar …

▸ DatePicker, Slider, Switch …

▸ CameraRoll, Geolocation, Vibration …

▸ PushNotificationIOS


▸ コンポーネントがデフォルトで用意されていない場合

▸ ネイティブモジュールを自作する

▸ RCTBridgeModule (iOS/Objective-C)

▸ ReactContextBaseJavaModule (Android/Java)

▸ サードパーティの npm を利用する


https://github.com/jondot/awesome-react-native

https://github.com/jondot/awesome-react-native


UI のパフォーマンスはネイティブと同等。ロジック部分（JS）は書き方によっては重くなるので注意。

各プラットフォームのネイティブコンポーネントを使う分

コーディングの手間が増えるのは確か。（× Write Once, Run Anywhere / ◯ Learn Once, Write Anywhere）

ただ、パフォーマンス的には

それをおぎなって余りある恩恵が得られる！

実際に使ってみて...

実際に使ってみて...

▸ 基本、いい感じ！

▸ ウェブエンジニアもそれっぽいネイティブアプリ作れる

▸ しんどい点

▸ 情報少ない（盛り上げていきましょう！）

▸ バージョンアップ、悩ましい…（npmが…）

▸ それなりの規模のアプリをちゃんと作ろうとすると、直面する課題がいくつかあった

クロスプラットフォーム？


▸ すべてのネイティブコンポーネントが React Native のライブラリに用意されているわけではない

▸ 基本、iOS のほうが整備されているので、両プラットフォームで同機能のアプリを作ろうとした場合、Android 側が…っていうケースがままある。

▸ サードパーティの npm で概ね対処できた。が、それでも個別に対応するのけっこう手間がかかる。

▸ シミュレータだと動いたのに実機だとダメ… という npm もあったりする（redux-api-middleware は Android 実機ではうごかなかった）


▸ View に関しても、OS・機種依存がそれなりにはある

▸ （とはいえ flexbox できちんと書けばほぼ問題ないレベルかな）

▸ 今回使わなかったが、react-native-material-kit 等の UI コン

ポーネントライブラリを使えば、実行環境の差異も吸収してくれ

るのかもしれない

▸ ナビゲーションまわりとか、UXをより各OSネイティブに寄せる

のであれば、View の実装は OS ごとに分けるべき

（ReactNative では OS 別に実装を簡単に分けられる仕組みに

なっている）

REACTとの共通化？


▸ 前提：

▸ アプリとウェブ、両方出したい

▸ View はアプリとウェブとで別物

▸ View も同じだったら、Cordova/WebView が手軽でよさげ

▸ 共通化できるものはなるべく共通化したい

▸ データモデル（Model層）

▸ API接続まわり（Service層）

▸ 表示用データ整形などのロジック（Logic層）


View

Store ReducersActionCreators

Container

Components

dispatch(action) (prevState, action)

(newState)(state)

(props)interaction

よくある Redux の構成


View


Container

Components

dispatch(action) (prevState, action)

(newState)(state)

(props)interaction

Services

Models

Logics

- API接続- JSON -> Model

- Viewまわりの共通処理

View に依存しない部分を切り出し


View


Container

Components

Services Models Logics

View


Container

Components

ウェブ（React）アプリ（React Native）

共通（npmモジュール化）

REACTとの共通化？▸ 共通部分をモジュール化した理由

▸ もともと、Web も Native も同じリポジトリで実装しようと思って

いた（共通化前提で）。

▸ React Native は頻繁にバージョンアップするため、そのたびに

npm パッケージの依存関係がコンフリクトしたりして、メンテの負

担が結構かかることが判明。

▸ メンテの負担を軽くするため、Web と Native とでリポジトリを分

けることに。

▸ Web / Native どちらのリポジトリからも利用できるように共通部分

はさらに別のリポジトリに切り出した。

まとめ▸ ウェブエンジニア（とくにReact経験者）が気軽にネイティブアプリを

作ることができるフレームワーク。

▸ WebViewベースのハイブリッドアプリより、各プラットフォームへ対

応させるための実装工数はかかる。が、その分レンダリングのパフォーマンスは高いし、ネイティブの機能もストレスなく使うことができる。

▸ React のコードが、そのまま React Native で使えるわけではない（Learn Once, Write Anywhere）。共通化するのであれば、どこが共

通化できるか、設計段階から検討しておいたほうがよい。（既存のReactコードをそのままアプリにしたいのであれば、Cordova/Webview のほうが工数的にはるかに楽だと思います）

ご静聴ありがとうございました

Engineering

React Native 入門