React エンジニアのための React Native 入門

1. React エンジニアのための React Native 入門 2016/08/08 Node 学園 22 時限目 by janus_wel
2. しゃべるひと janus_wel やぬす tech lead@CureApp iOS, Android ともにネイティブ経験あり React Native を product 投入中 シン・ ゴジラこれから 世界樹の迷宮 5 もこれから : janus_wel : januswel
4. LT のゴー ル before React を使ってアプリを作れる after React Native を使ってアプリを作りたくなる ※ 時間がないのでかけあしです ※ 実際に作る際に必要になるだろう資料は最後に紹介します
5. React Native ? Facebook 製モバイルアプリ用フレー ムワー ク 今年 4 月に Windows10, Tizen 対応を発表 Microsoft と Samsung を巻きこんで https://techcrunch.com/2016/04/13/facebooks-react- native-open-source-project-gets-backing-from- microsoft-and-samsung/ 要するに本気 最近安定しつつ、 こなれてきている
6. React Native ? 2 週間ていどで新バー ジョンがリリー スされている バー ジョン リリー ス日 0.31.0 08/05 0.30.0 07/24 0.29.0 07/06 少しずれることもある 使えるコンポー ネントが増えたり ow のバー ジョンがあがって 型チェックできる領域が増えたりする
7. React Native のうれしい点
8. Learn once, write anywhere React の考え方でモバイルアプリを作成できる JSX ・ 仮想 DOM でビュー を記述 コンポー ネント指向 CSS の感覚でコンポー ネントを配置できる exbox でマルチデバイス対応もばっちり position + top | bottom + left | right も問題なし ux 系ライブラリー もそのまま使える ow による型チェックにも対応
9. // ロゴコンポー ネントの実装 import React from 'react' import { Image,StyleSheet,Text,View } from 'react-native' const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', padding: 32, }, text: { fontSize: 32, }, }) export default class Logo extends React.Component { render() { return ( <View style={styles.container}> <Image source={{uri: 'icon'}} /> <Text style={styles.text}> 東京 Node 学園 {this.props.classes} 時限目 </Text> </View> ) ) }
10. 開発速度が速い 再コンパイル不要 ネイティブ開発と違いソー スを書き換えても再コンパイ ルが走らない 専用 bundler が該当箇所をバンドルしなおすだけ Universal JS な npm の資産は使える !! ネイティブ API を知らなくてもなんとかなる 最近公式ドキュメントが丁寧になってきた ネイティブ側のドキュメントも参考になる
11. デバイスの機能が使える ブリッジ経由でネイティブの機能を呼び出せる カメラ Bluetooth 位置情報 加速度センサー etc... たいていの機能は標準サポー トもしくは定番がある
12. ブリッジ ? React Native では JavaScript からネイティブを、 ネイティブから JavaScript を、 ブリッジ経由で相互に呼び出し可能 標準提供の機能・ コンポー ネントはほとんどがネイテ ィブコー ドを呼び出している おかげで実行速度がボトルネックになりにくい
13. ブリッジの詳細については… Bridging in React Native http://tadeuzagallo.com/blog/react-native-bridge/ Facebook の中のひとによるブリッジの解説記事 [ 翻訳] Bridging in React Native http://qiita.com/janus_wel/items/93de843cc224337 0fce4 ↑ 日本語訳 Objective-C の知識も必要なのでじっくりどうぞ
14. マルチプラットフォー ム import MyPackage from './my-package' このように書くとプラットフォー ムごとに適切なファ イルを読んでくれる プラットフォー ム ファイル名 iOS ./my-package.ios.js Android ./my-package.android.js iOS では <TabBarIOS> を、 Android では <ToolBarAndroid> を使うといったことが可能
15. まとめ React Native は 1. ほぼ React そのままなので学習コストが低い 2. コンパイル不要 & 既存資産使用で開発速度が速い 3. ブリッジのおかげでデバイスの機能を使える 実行速度が担保されているので UI に影響が出に くい 4. 拡張子で切り分けることでマルチプラットフォー ム対応
16. その他、 参考になる資料
17. React Native 公式ドキュメント https://facebook.github.io/react-native/docs/getting- started.html まず真っ先に確認すべき資料 1. Getting Started 2. Tutorial 3. コンポー ネント一覧を眺めつつやりたいことのイ メー ジをつかむ
18. React Native Non-React Tips http://qiita.com/janus_wel/items/d3c5b695015cb54344ff はじめるにあたって必要な React 以外の知識詰め合わせ React Native で development, staging, production など環境を切り替える http://qiita.com/janus_wel/items/750ffd1ae912e67d7df8 Bitrise と DeployGate で React Native アプリの評価 環境を構築する http://qiita.com/janus_wel/items/83996325920f62a684eb ステー ジング環境アプリの配布自動化
19. マルチプラットフォー ム時代の JavaScript x React 戦略 https://speakerdeck.com/januswel/marutipuratutohuomushi- dai-false-javascript-x-react-zhan-lue マルチプラットフォー ム対応するならもやっと考えたいこと React Native 製アプリ https://github.com/builderscon/session-timer/ Builderscon session timer
20. 謝辞 power-assert React Native 対応 https://twitter.com/t_wada/status/748731657478287360 翻訳時に textlint https://textlint.github.io/ スライド作成に Marp https://yhatt.github.io/marp/