React Native 入門
•
14 gostaram•7,212 visualizações
2016.08.25 ヒカラボ「React/Redux勉強会」で使用した資料です。 https://career.levtech.jp/hikalab/event/detail/59/
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (9)
Semelhante a React Native 入門
Semelhante a React Native 入門 (20)
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. ご静聴 ありがとうございました