Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Nativeで始めるアプリ開発

3,728 views

Published on

簡単なReactNativeの紹介です

Published in: Technology
  • Be the first to comment

React Nativeで始めるアプリ開発

  1. 1. React Nativeで始める アプリ開発
  2. 2. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  3. 3. 自己紹介 ▸原 亮介 ▸長崎の人 ▸anect株式会社所属エンジニア ▸ネイティブアプリ(iOS, Android, ReactNative) ▸Webフロントエンド(React SPA) ▸iOS/Android5年, JavaScriptは半年
  4. 4. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  5. 5. React Nativeとは
  6. 6. JavaScriptで iOS, Androidアプリ開発ができる フレームワーク
  7. 7. クロスプラットフォーム アプリ開発
  8. 8. このあたりと同じ括り
  9. 9. 実績
  10. 10. https://facebook.github.io/react-native/
  11. 11. かなり大規模なアプリでも導入されている https://facebook.github.io/react-native/
  12. 12. Airbnb https://design.google/library/airbnb-communicating-clarity-and-charm/
  13. 13. Airbnb Full React Native Google Designで紹介されている https://design.google/library/airbnb-communicating-clarity-and-charm/
  14. 14. メルカリに入ろう
  15. 15. react-native-windows windows 10, windows 10 mobile, Xbox one
  16. 16. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  17. 17. 特徴
  18. 18. ReactJSを用いてNativeUIを構築
  19. 19. ReactJSとは?
  20. 20. UIを構築するJSライブラリ
  21. 21. 通常 <div> <div>Hara</div> <div>30</div> </div> { name: ‘Hara’, age: 30 } 初期値 View初期状態の定義
  22. 22. 通常 <div> <div>Hara</div> <div>30</div> </div> { name: ‘Hara’, age: 30 } 初期値 → name: ‘Ryosuke’ View初期状態の定義
  23. 23. 通常 <div> <div id=’n'>Hara</div> <div>30</div> </div> { name: ‘Hara’, age: 30 } 初期値 → name: ‘Ryosuke’ → find(’n’).set(‘Ryosuke’) View初期状態の定義
  24. 24. 通常 <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初期状態の定義
  25. 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. 26. 通常 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> コード上で表現出来ない
  27. 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. 28. 妄想 <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初期状態の定義
  29. 29. 妄想 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が増えると大変
  30. 30. Stateに対するViewの状態 <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Hara’, age: 30 } State → <div> <div>Hara</div> <div>30</div> </div> 状態更新→View全部更新
  31. 31. 状態更新→View全部更新 <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } State → <div> <div>Hara</div> <div>30</div> </div> Stateに対するViewの状態
  32. 32. <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } State → 状態更新→View全部更新 Stateに対するViewの状態
  33. 33. 状態更新→View全部更新 <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } State → <div> <div>Ryosuke</div> <div>30</div> </div> Stateに対するViewの状態
  34. 34. 状態更新→View全部更新 View <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } State → <div> <div>Ryosuke</div> <div>30</div> </div> 状態に対するViewを コーディングできる
  35. 35. 毎回全て書き直すのはパフォーマンス
  36. 36. <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Hara’, age: 30 } ↓ → div div Hara div 30 React Component Reactが内部でもつ データ構造 ↓ Real DOM
  37. 37. <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } ↓ → div div Ryosuke div 30 ↓ Real DOM React Component Reactが内部でもつ データ構造
  38. 38. <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } ↓ → div div Ryosuke div 30 React Component ↓ Real DOM React Component Reactが内部でもつ データ構造 前回との差分を計算し、 差分のみを更新
  39. 39. <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } ↓ → div div Ryosuke div 30 ↓ Real DOM React Component Reactが内部でもつ データ構造
  40. 40. <div> <div>{name}</div> <div>{age}</div> </div> { name: ‘Ryosuke’, age: 30 } ↓ → div div Ryosuke div 30 ↓ Real DOM div Ryosuke 更新 React Component Reactが内部でもつ データ構造
  41. 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. 42. ReactJSを使うことで、 シンプルな状態管理と パフォーマンスを得られる
  43. 43. iOS, AndroidのViewも ツリー構造
  44. 44. <View> <Text>{name}</Text> <Text>{age}</Text> </View> { name: ‘Hara’, age: 30 } ↓ → View Text Hara Text 30 ↓ Native View React Component Reactが内部でもつ データ構造
  45. 45. <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になるだけ
  46. 46. ReactJSから NativeのiOS, Android用の Viewを吐き出す
  47. 47. それが React Native
  48. 48. ネイティブブリッジ機能
  49. 49. iOS, Android ネイティブ React Native JavaScript Core JS Logic React
  50. 50. iOS, Android ネイティブ React Native JavaScript Core JS Logic React ↓ ↓
  51. 51. iOS, Android ネイティブ React Native JavaScript Core JS Logic React ↓ ↓JS<=>ネイティブのブリッジ機能
  52. 52. iOS, Android ネイティブ React Native JavaScript Core JS Logic React ↓ ↓ Java, Kotlin Objective-c Swift
  53. 53. iOS, Android ネイティブ React Native Javascript Core JS Logic React ↓ ↓ Java, Kotlin Objective-c Swift ネイティブで書いたコードを JSから簡単に呼び出せる
  54. 54. iOS, Android ネイティブ React Native JavaScript Core JS Logic React ↓ ↓ Java Kotlin Objective-c Swift Gradle CocoaPods
  55. 55. iOS, Android ネイティブ React Native Javascript Core JS Logic React ↓ ↓ Java Kotlin Objective-c Swift Gradle CocoaPods ネイティブのライブラリも利用可能
  56. 56. ネイティブ機能が必要な場合でも 簡単に実装できる
  57. 57. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  58. 58. 開発スタイル
  59. 59. 1.JavaScriptでコーディング
  60. 60. React Component
  61. 61. Pure JavaScript
  62. 62. npm, yarn
  63. 63. 必要に応じて
  64. 64. Objective-c, Swift
  65. 65. Java, Kotlin
  66. 66. 2.デバッグ
  67. 67. 高速UIプレビュー
  68. 68. ビルド待ち 0秒
  69. 69. Welcome toをHelloに変えたい
  70. 70. 変更
  71. 71. 一瞬で更新
  72. 72. 一瞬で更新 ビルド待ち時間を気にすること無く、 高速に実データ入りのプレビューが可能
  73. 73. iOS, Android同時デバッグ
  74. 74. 3.CSSライクのスタイリング
  75. 75. キャメルケースのCSSプロパティで スタイルが可能
  76. 76. Flexboxレイアウト
  77. 77. Viewのサイズを割合で定義可能
  78. 78. iOS, Androidの複数端末対応が とても簡単
  79. 79. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  80. 80. 導入コスト
  81. 81. 1.開発メンバー
  82. 82. JavaScript(React)エンジニア iOSアプリエンジニア Androidアプリエンジニア
  83. 83. JavaScript(React)エンジニア iOSアプリエンジニア Androidアプリエンジニア 必須 安心
  84. 84. 開発メンバー ▸JavaScriptエンジニア(作業量:大) ▸ReactNative側全般(UI構築、ロジック…) ▸iOS/Androidアプリエンジニア(作業量:小) ▸必要なネイティブ実装 ▸ライブラリの導入 ▸ブリッジ
  85. 85. 開発メンバー ▸JavaScriptエンジニア(作業量:大) ▸ReactNative側全般(UI構築、ロジック…) ▸iOS/Androidアプリエンジニア(作業量:小) ▸必要なネイティブ実装 ▸ライブラリの導入 ▸ブリッジ ネイティブ機能を使う場合は、 iOS/Androidアプリエンジニアがいると安心
  86. 86. eactに慣れたWebエンジニア向けだと
  87. 87. eactに慣れたWebエンジニア向けだと お仕事無くなっちゃう… (某ネイティブアプリエンジニア) Reactで ネイティブアプリが作れるなら Webエンジニア最強 (某Webエンジニア)
  88. 88. A. Reactに慣れたエンジニアな らスムーズに開発はできる。 が、困ることはNative絡みが 結構ある
  89. 89. Webアプリ開発で起こる ブラウザ対応やビルド周りを 考える必要がない
  90. 90. React Native Webpack Babel Flow Jest ECMAScript6,7 JavaScript Core
  91. 91. React Native Webpack Babel Flow Jest EcmaScript6,7 JavaScript Core 開発環境はReactNativeが すべてやってくれる
  92. 92. 私はiOS/Androidの ネイティブアプリエンジニアです jQuery触ったことある、くらい
  93. 93. React Nativeに興味を持ったのは iOS/Androidで同じ機能を 作るのがめんどくさかった
  94. 94. 「Webpack?Babel?」
  95. 95. 「(∩゚д゚)アーアーきこえなーい」
  96. 96. 最新のJavaScriptの文法と ReactJSの勉強なら そこまで難しくない
  97. 97. 2.設計
  98. 98. Flux
  99. 99. テキスト 設計 ▸Flux ▸データの流れが一方向 ▸Reactのメリットを活かせる ▸ReduxなどのFlux実装対応のライブラリも多い ▸開発コスト減 ▸学習コストが…
  100. 100. ▸Flux ▸データの流れが一方向 ▸Virtual DOMのメリットを活かせる ▸ReduxなどのFlux実装対応のライブラリも多い ▸開発コスト減 ▸学習コストが… テキスト 設計 設計は仕様次第だが、 検討する余地はある
  101. 101. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  102. 102. 利点
  103. 103. 1.開発速度向上
  104. 104. テキスト 利点 ▸1.開発速度向上 ▸ReactによるViewの管理 ▸高速プレビューによるデバッグ ▸Androidは実機上でも高速プレビュー可能 ▸ネイティブに依存しない処理の共通化 ▸多端末対応
  105. 105. 2.iOS/Androidへの最適化
  106. 106. Platform API select
  107. 107. Platform API select OSごとに細かいプロパティが設定可能
  108. 108. ファイル単位で最適化 Action.ios.js Action.android.js
  109. 109. 自作ネイティブブリッジ
  110. 110. 自作ネイティブブリッジ インターフェースを揃えておけば 呼び出し側は何も気にせず呼べる。
  111. 111. 3.ライブラリ
  112. 112. JS, iOS, Androidのライブラリが利用可能
  113. 113. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  114. 114. 欠点
  115. 115. 1.まだベータ版
  116. 116. version 0.46.4
  117. 117. バグもある
  118. 118. めちゃくちゃIssueあるからバグ踏んでも 誰か解決してくれているかも…
  119. 119. Breaking Change
  120. 120. 然、そのコンポーネントは非推奨にな
  121. 121. 2.エラーがわかりにくい
  122. 122. ?????
  123. 123. 欠点 ▸ エラーがわかりにくい ▸ 再読込すると違うエラー表示になっ たりする。 ▸ 行数で指摘してくれるときもあるけ ど、不親切な場合もある。 ▸ 辛い
  124. 124. 3.圧倒的Document不足
  125. 125. 公式Documentのあるページ
  126. 126. 公式Documentのあるページ ?????
  127. 127. 欠点 ▸ 圧倒的Document不足 ▸ 公式もまだ不十分 ▸ ソースコード読むしか無い ▸ ソースにしかないメソッド もある ▸ ソースみてみたらAndroid の実装がなかったりす
  128. 128. 欠点 ▸ 圧倒的Document不足 ▸ 公式もまだ不十分 ▸ ソースコード読むしか無い ▸ ソースにしかないメソッド もある ▸ ソースみてみたらAndroid の実装がなかったりする Settingsはデータの永続 化のためのAPIで、iOSの 実装しか存在しない
  129. 129. 欠点 ▸ 圧倒的Document不足 ▸ 公式もまだ不十分 ▸ ソースコード読むしか無い ▸ ソースにしかないメソッド もある ▸ ソースみてみたらAndroid の実装がなかったりする Settingsはデータの永続 化のためのAPIで、iOSの 実装しか存在しない 辛い
  130. 130. 4.圧倒的Component不足
  131. 131. 公式のComponent(一部)
  132. 132. 公式のComponent(一部) Androidオンリー iOSオンリー
  133. 133. 欠点 ▸ 圧倒的Component不足 ▸ 公式もまだ不十分 ▸ Nativebase等のUIライブラ リを使う ▸ 作る
  134. 134. 欠点 ▸ 圧倒的Component不足 ▸ 公式もまだ不十分 ▸ Nativebase等のUIライブラ リを使う ▸ 作る 辛い
  135. 135. と辛いことたくさんありましたけど、
  136. 136. アジェンダ 1. 自己紹介 2. ReactNativeとは 3. 特徴 4. 開発スタイル 5. 導入コスト 6. 利点 7. 欠点 8. まとめ
  137. 137. まとめ
  138. 138. ReactJSを用いた、UI構築は ネイティブアプリには無い 良さがある。
  139. 139. 慣れればそれなりに 開発速度は出る
  140. 140. 何でもできるわけではない。 向き不向きがある。
  141. 141. 仕様とメンバー構成などが 大丈夫なら導入はアリ。
  142. 142. ありがとうございました。
  143. 143. Expo
  144. 144. Snack.expo.io ブラウザ上でReact Nativeを使って コーディングできるサービス
  145. 145. Snack.expo.io ブラウザ上でReact Nativeを使って コーディングできるサービス Expoアプリをインストールすれば 実機で動作確認もできる
  146. 146. create-react-native-app

×