簡単なReactNativeの紹介です

1. React Nativeで始める
アプリ開発

2. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

3. 自己紹介
▸原 亮介
▸長崎の人
▸anect株式会社所属エンジニア
▸ネイティブアプリ(iOS, Android, ReactNative)
▸Webフロントエンド(React SPA)
▸iOS/Android5年, JavaScriptは半年

4. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

5. React Nativeとは

6. JavaScriptで
iOS, Androidアプリ開発ができる
フレームワーク

7. クロスプラットフォーム
アプリ開発

9. このあたりと同じ括り

10. 実績

11. https://facebook.github.io/react-native/

12. かなり大規模なアプリでも導入されている
https://facebook.github.io/react-native/

13. Airbnb
https://design.google/library/airbnb-communicating-clarity-and-charm/

14. Airbnb
Full React Native
Google Designで紹介されている
https://design.google/library/airbnb-communicating-clarity-and-charm/

15. メルカリに入ろう

16. react-native-windows
windows 10, windows 10 mobile, Xbox one

17. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

18. 特徴

19. ReactJSを用いてNativeUIを構築

20. ReactJSとは?

21. UIを構築するJSライブラリ

22. 通常
<div>
<div>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
View初期状態の定義

23. 通常
<div>
<div>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
View初期状態の定義

24. 通常
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
View初期状態の定義

25. 通常
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
→
<div>
<div id=’n'>Ryosuke</div>
<div>30</div>
</div>
View初期状態の定義

26. 通常
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
→
<div>
<div id=’n'>Ryosuke</div>
<div>30</div>
</div>
View初期状態の定義

27. 通常
View定義
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
→
<div>
<div id=’n'>Ryosuke</div>
<div>30</div>
</div>
コード上で表現出来ない

28. コーディングする範囲
View初期状態の定義
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
→
<div>
<div id=’n'>Ryosuke</div>
<div>30</div>
</div>
通常

29. 妄想
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
→
<div>
<div id=’n'>Ryosuke</div>
<div>30</div>
</div>
通常
View初期状態の定義

30. 妄想
View定義
<div>
<div id=’n'>Hara</div>
<div>30</div>
</div>
{
name: ‘Hara’,
age: 30
}
初期値
→ name: ‘Ryosuke’
→
find(’n’).set(‘Ryosuke’)
→
<div>
<div id=’n'>Ryosuke</div>
<div>30</div>
</div>
通常
状態とViewが増えると大変

31. Stateに対するViewの状態
<div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Hara’,
age: 30
}
State
→
<div>
<div>Hara</div>
<div>30</div>
</div>
状態更新→View全部更新

32. 状態更新→View全部更新
<div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
State
→
<div>
<div>Hara</div>
<div>30</div>
</div>
Stateに対するViewの状態

33. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
State
→
状態更新→View全部更新
Stateに対するViewの状態

34. 状態更新→View全部更新
<div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
State
→
<div>
<div>Ryosuke</div>
<div>30</div>
</div>
Stateに対するViewの状態

35. 状態更新→View全部更新
View
<div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
State
→
<div>
<div>Ryosuke</div>
<div>30</div>
</div>
状態に対するViewを
コーディングできる

36. 毎回全て書き直すのはパフォーマンス

37. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Hara’,
age: 30
}
↓
→
div
div
Hara
div
30
React Component
Reactが内部でもつ
データ構造
↓
Real DOM

38. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
↓
→
div
div
Ryosuke
div
30
↓
Real DOM
React Component
Reactが内部でもつ
データ構造

39. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
↓
→
div
div
Ryosuke
div
30
React Component
↓
Real DOM
React Component
Reactが内部でもつ
データ構造
前回との差分を計算し、
差分のみを更新

40. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
↓
→
div
div
Ryosuke
div
30
↓
Real DOM
React Component
Reactが内部でもつ
データ構造

41. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
↓
→
div
div
Ryosuke
div
30
↓
Real DOM
div
Ryosuke
更新
React Component
Reactが内部でもつ
データ構造

42. <div>
<div>{name}</div>
<div>{age}</div>
</div>
{
name: ‘Ryosuke’,
age: 30
}
↓
→
div
div
Ryosuke
div
30
↓
Real DOM
div
Ryosuke
更新
React Component
Reactが内部でもつ
データ構造
変更は最小限

43. ReactJSを使うことで、
シンプルな状態管理と
パフォーマンスを得られる

44. iOS, AndroidのViewも
ツリー構造

45. <View>
<Text>{name}</Text>
<Text>{age}</Text>
</View>
{
name: ‘Hara’,
age: 30
}
↓
→
View
Text
Hara
Text
30
↓
Native View
React Component
Reactが内部でもつ
データ構造

46. <View>
<Text>{name}</Text>
<Text>{age}</Text>
</View>
{
name: ‘Hara’,
age: 30
}
↓
→
View
Text
Hara
Text
30
React Component
↓
Native View
React Component
Reactが内部でもつ
データ構造
Virtual DOM自体はデータ構造なので、
ViewがNativeになるだけ

47. ReactJSから
NativeのiOS, Android用の
Viewを吐き出す

48. それが
React Native

49. ネイティブブリッジ機能

50. iOS, Android ネイティブ
React Native
JavaScript Core
JS Logic React

51. iOS, Android ネイティブ
React Native
JavaScript Core
JS Logic React
↓
↓

52. iOS, Android ネイティブ
React Native
JavaScript Core
JS Logic React
↓
↓JS<=>ネイティブのブリッジ機能

53. iOS, Android ネイティブ
React Native
JavaScript Core
JS Logic React
↓
↓
Java, Kotlin Objective-c Swift

54. iOS, Android ネイティブ
React Native
Javascript Core
JS Logic React
↓
↓
Java, Kotlin Objective-c Swift
ネイティブで書いたコードを
JSから簡単に呼び出せる

55. iOS, Android ネイティブ
React Native
JavaScript Core
JS Logic React
↓
↓
Java Kotlin Objective-c Swift
Gradle CocoaPods

56. iOS, Android ネイティブ
React Native
Javascript Core
JS Logic React
↓
↓
Java Kotlin Objective-c Swift
Gradle CocoaPods
ネイティブのライブラリも利用可能

57. ネイティブ機能が必要な場合でも
簡単に実装できる

58. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

59. 開発スタイル

60. 1.JavaScriptでコーディング

61. React Component

62. Pure JavaScript

63. npm, yarn

64. 必要に応じて

65. Objective-c, Swift

66. Java, Kotlin

67. 2.デバッグ

68. 高速UIプレビュー

69. ビルド待ち
０秒

71. Welcome toをHelloに変えたい

72. 変更

73. 一瞬で更新

74. 一瞬で更新
ビルド待ち時間を気にすること無く、
高速に実データ入りのプレビューが可能

75. iOS, Android同時デバッグ

76. 3.CSSライクのスタイリング

78. キャメルケースのCSSプロパティで
スタイルが可能

79. Flexboxレイアウト

80. Viewのサイズを割合で定義可能

84. iOS, Androidの複数端末対応が
とても簡単

85. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

86. 導入コスト

87. 1.開発メンバー

88. JavaScript(React)エンジニア
iOSアプリエンジニア
Androidアプリエンジニア

89. JavaScript(React)エンジニア
iOSアプリエンジニア
Androidアプリエンジニア
必須
安心

90. 開発メンバー
▸JavaScriptエンジニア（作業量：大）
▸ReactNative側全般（UI構築、ロジック…）
▸iOS/Androidアプリエンジニア（作業量：小）
▸必要なネイティブ実装
▸ライブラリの導入
▸ブリッジ

91. 開発メンバー
▸JavaScriptエンジニア（作業量：大）
▸ReactNative側全般（UI構築、ロジック…）
▸iOS/Androidアプリエンジニア（作業量：小）
▸必要なネイティブ実装
▸ライブラリの導入
▸ブリッジ
ネイティブ機能を使う場合は、
iOS/Androidアプリエンジニアがいると安心

92. eactに慣れたWebエンジニア向けだと

93. eactに慣れたWebエンジニア向けだと
お仕事無くなっちゃう…
(某ネイティブアプリエンジニア)
Reactで
ネイティブアプリが作れるなら
Webエンジニア最強
（某Webエンジニア）

94. A. Reactに慣れたエンジニアな
らスムーズに開発はできる。
が、困ることはNative絡みが
結構ある

95. Webアプリ開発で起こる
ブラウザ対応やビルド周りを
考える必要がない

96. React Native
Webpack
Babel
Flow
Jest
ECMAScript6,7
JavaScript Core

97. React Native
Webpack
Babel
Flow
Jest
EcmaScript6,7
JavaScript Core
開発環境はReactNativeが
すべてやってくれる

98. 私はiOS/Androidの
ネイティブアプリエンジニアです
jQuery触ったことある、くらい

99. React Nativeに興味を持ったのは
iOS/Androidで同じ機能を
作るのがめんどくさかった

100. 「Webpack？Babel?」

101. 「(∩ﾟдﾟ)ｱｰｱｰきこえなーい」

102. 最新のJavaScriptの文法と
ReactJSの勉強なら
そこまで難しくない

103. 2.設計

104. Flux

106. テキスト
設計
▸Flux
▸データの流れが一方向
▸Reactのメリットを活かせる
▸ReduxなどのFlux実装対応のライブラリも多い
▸開発コスト減
▸学習コストが…

107. ▸Flux
▸データの流れが一方向
▸Virtual DOMのメリットを活かせる
▸ReduxなどのFlux実装対応のライブラリも多い
▸開発コスト減
▸学習コストが…
テキスト
設計
設計は仕様次第だが、
検討する余地はある

108. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

109. 利点

110. 1.開発速度向上

111. テキスト
利点
▸1.開発速度向上
▸ReactによるViewの管理
▸高速プレビューによるデバッグ
▸Androidは実機上でも高速プレビュー可能
▸ネイティブに依存しない処理の共通化
▸多端末対応

112. 2.iOS/Androidへの最適化

113. Platform API
select

114. Platform API
select
OSごとに細かいプロパティが設定可能

115. ファイル単位で最適化
Action.ios.js
Action.android.js

116. 自作ネイティブブリッジ

117. 自作ネイティブブリッジ
インターフェースを揃えておけば
呼び出し側は何も気にせず呼べる。

118. 3.ライブラリ

120. JS, iOS, Androidのライブラリが利用可能

121. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

122. 欠点

123. 1.まだベータ版

124. version 0.46.4

125. バグもある

127. めちゃくちゃIssueあるからバグ踏んでも
誰か解決してくれているかも…

128. Breaking Change

129. 然、そのコンポーネントは非推奨にな

130. 2.エラーがわかりにくい

132. ？？？？？

133. 欠点
▸ エラーがわかりにくい
▸ 再読込すると違うエラー表示になっ
たりする。
▸ 行数で指摘してくれるときもあるけ
ど、不親切な場合もある。
▸ 辛い

134. ３．圧倒的Document不足

135. 公式Documentのあるページ

136. 公式Documentのあるページ
？？？？？

137. 欠点
▸ 圧倒的Document不足
▸ 公式もまだ不十分
▸ ソースコード読むしか無い
▸ ソースにしかないメソッド
もある
▸ ソースみてみたらAndroid
の実装がなかったりす

138. 欠点
▸ 圧倒的Document不足
▸ 公式もまだ不十分
▸ ソースコード読むしか無い
▸ ソースにしかないメソッド
もある
▸ ソースみてみたらAndroid
の実装がなかったりする
Settingsはデータの永続
化のためのAPIで、iOSの
実装しか存在しない

139. 欠点
▸ 圧倒的Document不足
▸ 公式もまだ不十分
▸ ソースコード読むしか無い
▸ ソースにしかないメソッド
もある
▸ ソースみてみたらAndroid
の実装がなかったりする
Settingsはデータの永続
化のためのAPIで、iOSの
実装しか存在しない
辛い

140. 4．圧倒的Component不足

141. 公式のComponent（一部）

142. 公式のComponent（一部）
Androidオンリー
iOSオンリー

143. 欠点
▸ 圧倒的Component不足
▸ 公式もまだ不十分
▸ Nativebase等のUIライブラ
リを使う
▸ 作る

144. 欠点
▸ 圧倒的Component不足
▸ 公式もまだ不十分
▸ Nativebase等のUIライブラ
リを使う
▸ 作る
辛い

145. と辛いことたくさんありましたけど、

146. アジェンダ
1. 自己紹介
2. ReactNativeとは
3. 特徴
4. 開発スタイル
5. 導入コスト
6. 利点
7. 欠点
8. まとめ

147. まとめ

148. ReactJSを用いた、UI構築は
ネイティブアプリには無い
良さがある。

149. 慣れればそれなりに
開発速度は出る

150. 何でもできるわけではない。
向き不向きがある。

151. 仕様とメンバー構成などが
大丈夫なら導入はアリ。

152. ありがとうございました。

154. Expo

155. Snack.expo.io
ブラウザ上でReact Nativeを使って
コーディングできるサービス

156. Snack.expo.io
ブラウザ上でReact Nativeを使って
コーディングできるサービス
Expoアプリをインストールすれば
実機で動作確認もできる

157. create-react-native-app