React Native 入門
•
14 likes•7,219 views
2016.08.25 ヒカラボ「React/Redux勉強会」で使用した資料です。 https://career.levtech.jp/hikalab/event/detail/59/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to React Native 入門
Similar to React Native 入門 (20)
Recently uploaded
Recently uploaded (7)
React Native 入門
- 2. 自己紹介 ▸ 奥宮 誠一 ▸ リレーションズ株式会社 ／ スマートメンテ ▸ インフラ（AWS） ▸ サーバサイド（Java, PHP, node） ▸ フロント（最近 React Native）
- 3. アジェンダ ▸ React Native とは ▸ React の仕組みでモバイルアプリが作れる ▸ ネイティブアプリと遜色ないパフォーマンス ▸ 実際に使ってみて… ▸ クロスプラットフォーム？ ▸ React との共通化？ ▸ まとめ
- 5. REACT NATIVE とは ▸ Facebook が 2015年に発表したモバイルアプリ開発のた めのフレームワーク（OSS） ▸ React の作法（Webの技術）で、iOS / Android のネイ ティブアプリをクロスプラットフォーム開発できる ▸ “Learn Once, Write Anywhere” ▸ 現在 v0.32（2-week train release）
- 6. ▸ 本家 Facebook のほか いろんなアプリで利用されている （RN 公式サイトに SHOWCASE あります） REACT NATIVE とは
- 7. REACT NATIVE とは ▸ Netflix, Airbnb も React Native を採用（検討中？）
- 9. REACTの仕組みでモバイルアプリが作れる ▸ モダンJavaScript ▸ コンポーネント指向 ▸ JSX ▸ CSS like な Style, Layout ▸ Fluxアーキテクチャ（Redux）
- 10. REACTの仕組みでモバイルアプリが作れる ▸ モダンJavaScript ▸ コンポーネント指向 ▸ JSX ▸ CSS like な Style, Layout ▸ Fluxアーキテクチャ（Redux） ・ES6 ・ES7 ・Object Spread ・Async Functions .babelrc { "presets": ["react-native"] }
- 11. REACTの仕組みでモバイルアプリが作れる ▸ モダンJavaScript ▸ コンポーネント指向 ▸ JSX ▸ CSS like な Style, Layout ▸ Fluxアーキテクチャ（Redux） ・React同様、UIコンポーネントを組み合わせてアプリを実装 ・UIコンポーネントはJSXで記述できる React： ・HTMLタグ（<div>, <span>, …） ・DOMレンダラー React Native： ・Nativeコンポーネント（<View>, <Text>, <Navigator> …） ・Nativeレンダラー
- 12. REACTの仕組みでモバイルアプリが作れる 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);
- 13. REACTの仕組みでモバイルアプリが作れる ▸ モダンJavaScript ▸ コンポーネント指向 ▸ JSX ▸ CSS like な Style, Layout ▸ Fluxアーキテクチャ（Redux） ・UIコンポーネントのスタイルやレイアウトは、style プロパティで指定する ことができる ・syntax は CSS とほぼ同じ ・レイアウトには flexbox を使うことができる （× float）
- 14. 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);
- 15. REACTの仕組みでモバイルアプリが作れる ▸ モダンJavaScript ▸ コンポーネント指向 ▸ JSX ▸ CSS like な Style, Layout ▸ Fluxアーキテクチャ（Redux） ・データフローには Redux を使用することができる ・React Redux（react-redux）: React Native でも動作する
- 16. REACTの仕組みでモバイルアプリが作れる ▸ モダンJavaScript ▸ コンポーネント指向 ▸ JSX ▸ CSS like な Style, Layout ▸ Fluxアーキテクチャ（Redux） REACT が書ければ REACT NATIVE もだいたい書けそう！
- 18. ネイティブアプリと遜色ないパフォーマンス ▸ ReactNative !=「WebView上で動作するWebアプリ」 ▸ JavaScript のコードをプラットフォームのJSランタイム で動かし、ネイティブのUIコンポーネントとやりとりを 行う → JavaScriptで書くが、実際のUIはネイティブのコード で実行
- 19. 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 は各プラットフォームのネイティブのコンポー ネントをレンダリングしており、パフォーマンスは ネイティブアプリと原理上同じ。
- 23. ネイティブアプリと遜色ないパフォーマンス ▸ React Native で用意されている ネイティブコンポーネント ▸ Navigator ▸ ListView, ScrollView, WebView, MapView … ▸ TabBar, StatusBar … ▸ DatePicker, Slider, Switch … ▸ CameraRoll, Geolocation, Vibration … ▸ PushNotificationIOS
- 24. ネイティブアプリと遜色ないパフォーマンス ▸ コンポーネントがデフォルトで用意されていない場合 ▸ ネイティブモジュールを自作する ▸ RCTBridgeModule (iOS/Objective-C) ▸ ReactContextBaseJavaModule (Android/Java) ▸ サードパーティの npm を利用する
- 26. ネイティブアプリと遜色ないパフォーマンス UI のパフォーマンスはネイティブと同等。 ロジック部分（JS）は書き方によっては重くなるので注意。 各プラットフォームのネイティブコンポーネントを使う分 コーディングの手間が増えるのは確か。 （× Write Once, Run Anywhere / ◯ Learn Once, Write Anywhere） ただ、パフォーマンス的には それをおぎなって余りある恩恵が得られる！
- 27. 実際に使ってみて...
- 28. 実際に使ってみて... ▸ 基本、いい感じ！ ▸ ウェブエンジニアもそれっぽいネイティブアプリ作れる ▸ しんどい点 ▸ 情報少ない（盛り上げていきましょう！） ▸ バージョンアップ、悩ましい…（npmが…） ▸ それなりの規模のアプリをちゃんと作ろうとすると、直 面する課題がいくつかあった
- 29. クロスプラットフォーム？
- 30. クロスプラットフォーム？ ▸ すべてのネイティブコンポーネントが React Native のライブラリ に用意されているわけではない ▸ 基本、iOS のほうが整備されているので、両プラットフォームで同 機能のアプリを作ろうとした場合、Android 側が…っていうケース がままある。 ▸ サードパーティの npm で概ね対処できた。が、それでも個別に 対応するのけっこう手間がかかる。 ▸ シミュレータだと動いたのに実機だとダメ… という npm もあった りする（redux-api-middleware は Android 実機ではうごかなかっ た）
- 31. クロスプラットフォーム？ ▸ View に関しても、OS・機種依存がそれなりにはある ▸ （とはいえ flexbox できちんと書けばほぼ問題ないレベルかな） ▸ 今回使わなかったが、react-native-material-kit 等の UI コン ポーネントライブラリを使えば、実行環境の差異も吸収してくれ るのかもしれない ▸ ナビゲーションまわりとか、UXをより各OSネイティブに寄せる のであれば、View の実装は OS ごとに分けるべき （ReactNative では OS 別に実装を簡単に分けられる仕組みに なっている）
- 32. REACTとの共通化？
- 33. REACTとの共通化？ ▸ 前提： ▸ アプリとウェブ、両方出したい ▸ View はアプリとウェブとで別物 ▸ View も同じだったら、Cordova/WebView が手軽でよさげ ▸ 共通化できるものはなるべく共通化したい ▸ データモデル（Model層） ▸ API接続まわり（Service層） ▸ 表示用データ整形などのロジック（Logic層）
- 34. REACTとの共通化？ View Store Reducers Action Creators Container Components dispatch(action) (prevState, action) (newState) (state) (props) interaction よくある Redux の構成
- 35. REACTとの共通化？ View Store Reducers Action Creators Container Components dispatch(action) (prevState, action) (newState) (state) (props) interaction Services Models Logics - API接続 - JSON -> Model - Viewまわりの共通処理 View に依存しない部分を切り出し
- 36. REACTとの共通化？ View Store Reducers Action Creators Container Componen ts Services Models Logics View Store Reducers Action Creators Container Componen ts ウェブ（React） アプリ（React Native） 共通（npmモジュール化）
- 37. REACTとの共通化？ ▸ 共通部分をモジュール化した理由 ▸ もともと、Web も Native も同じリポジトリで実装しようと思って いた（共通化前提で）。 ▸ React Native は頻繁にバージョンアップするため、そのたびに npm パッケージの依存関係がコンフリクトしたりして、メンテの負 担が結構かかることが判明。 ▸ メンテの負担を軽くするため、Web と Native とでリポジトリを分 けることに。 ▸ Web / Native どちらのリポジトリからも利用できるように共通部分 はさらに別のリポジトリに切り出した。
- 38. まとめ ▸ ウェブエンジニア（とくにReact経験者）が気軽にネイティブアプリを 作ることができるフレームワーク。 ▸ WebViewベースのハイブリッドアプリより、各プラットフォームへ対 応させるための実装工数はかかる。が、その分レンダリングのパフォー マンスは高いし、ネイティブの機能もストレスなく使うことができる。 ▸ React のコードが、そのまま React Native で使えるわけではない （Learn Once, Write Anywhere）。共通化するのであれば、どこが共 通化できるか、設計段階から検討しておいたほうがよい。 （既存のReactコードをそのままアプリにしたいのであれば、 Cordova/Webview のほうが工数的にはるかに楽だと思います）
- 39. ご静聴 ありがとうございました