第16回 岡山モバイルアプリ開発もくもく回 ( #okamoba ) での発表資料です！ React Native とは？ と思いまして、一から調べてみました。 ・ React とは？ ・ React Nativeとは？ ・ React Native の メリット・デメリット ・ サンプルアプリを動かしてみる こんな感じの構成です！

1. ReactNative
はじめの一歩 👊
2017/07/23
第16回 岡山モバイルアプリ開発もくもく会
1

2. おしながき
2

3. 本日のお品書き
１． あばうとみー
２． ReactNativeとは
３． サンプルアプリ を 動かしてみる
3

4. １．あばうとみー
4

5. １．あばうとみー
高橋 一騎 ( @ikkitang )
・ 岡山の SIer 勤務
・ PHPer🐘、Swiftの人🐣
・ JPUG 中国支部長
5

6. １．あばうとみー
6

7. １．あばうとみー
結婚はいいぞ！
7

8. １．あばうとみー
第２１回 中国地方DB勉強会 in 山口
http://dbstudychugoku.github.io/
8

9. １．あばうとみー
第２１回 中国地方DB勉強会 in 山口
・ Amazon Web Services
・ Google Cloud Platform
・ Microsoft Azure
主要クラウドにおける
データベースマネジメントサービスを
最強の講師陣によってお伝えします！
9

10. ２．ReactNative とは
10

11. ２．ReactNative とは
React：
Facebookが開発したJavaScriptの
フレームワーク.
“Learn Once, Write Anywhere”
React Native：
React を モバイルで使えるようにしたもの.
11

12. ２．ReactNative とは
React：
Facebookが開発したJavaScriptの
フレームワーク.
“Learn Once, Write Anywhere”
React Native：
React を モバイルで使えるようにしたもの.
12

13. アプリ + JavaScript といえば・
・
13

14. 14

15. ハイブリッドアプリとの違い
15
Cordova
Monaca
React Native
動作 ローカルのWebView ネイティブ
UI作成 HTML・CSS
jsx形式で作成したコンポーネントを
組み合わせて定義
言語 JavaScript JavaScript

16. ハイブリッドアプリとの違い
16
Cordova
Monaca
React Native
動作 ローカルのWebView ネイティブ
UI作成 HTML・CSS
jsx形式で作成したコンポーネントを
組み合わせて定義
言語 JavaScript JavaScript

17. ２．ReactNative とは
React Native と ハイブリッドアプリ
ReactNativeはネイティブ上で動くので
UIのパフォーマンスはネイティブアプリと
ほぼ同レベルで かつ、
ハイブリッドアプリよりも 高速 に動作する。
17

18. ハイブリッドアプリとの違い
18
Cordova
Monaca
React Native
動作 ローカルのWebView ネイティブ
UI作成 HTML・CSS
jsx形式で作成したコンポーネントを
組み合わせて定義
言語 JavaScript JavaScript

19. コンポーネントを
組み合わせて定義？
19

20. ２．ReactNative とは
コンポーネント の 組み合わせ
※ 今回はLTなので
イメージだけ。
例えば、
右のようなUIの
アプリを作る時。
20

21. ２．ReactNative とは
コンポーネント の 組み合わせ
※ 今回はLTなので
イメージだけ。
例えば、
右のようなUIの
アプリを作る時。
21
TimeLine コンポーネント
TimeLine コンポーネント
TimeLine コンポーネント
TimeLine コンポーネント
TimeLine コンポーネント

22. ２．ReactNative とは
コンポーネント の 組み合わせ
※ 今回はLTなので
イメージだけ。
例えば、
右のようなUIの
アプリを作る時。
22
{
“icon”: “ikki_icon.png”,
“name”: “ikkitang”,
“tweet”: “中国地方DB勉強会〜”
}

23. ２．ReactNative とは
React Native のメリット
React を ベースに開発されているので
元々の React の 開発時のノウハウを
そのまま活かす事ができる。
23

24. React Native 最強じゃん！
24

25. っておもーじゃん！？
25

26. ２．React Native とは
React Native のデメリット
まだ、枯れていない。
・ バージョンアップの追従がつらい (らしい)
１ヶ月に１回、バージョンが上がる (今 0.45 )
・ まだまだ、情報量が少ない (らしい)
26

27. ２．ReactNative とは
まとめ
ReactNativeは Facebook 製の フレームワーク。
メリット
UIのパフォーマンスはネイティブアプリと
ほぼ同レベルで 高速 に動作する。
React で培ったノウハウをそのまま活かせる。
デメリット
バージョンアップ頻度が高く、枯れていない。
27

28. ３．サンプルアプリ 作成
28

29. まずは、環境構築
29

30. ３．サンプルアプリ 作成
環境構築 （Mac)
・ HomeBrew を 入れる
[HomeBrew インストール Mac] [検索]
・ パッケージを入れる
$ brew install node
$ brew install watchman
・ React Native CLI を入れる。
$ npm install -g react-native-cli
30

31. ３．サンプルアプリ 作成
アプリの新規作成
・ ターミナルで以下コマンド実行
$ react-native init HelloWorld
フォルダ構成はこんな感じ
31

32. ３．サンプルアプリ 作成
アプリの新規作成
・ ターミナルで以下コマンド実行
$ react-native init HelloWorld
フォルダ構成はこんな感じ
32
エントリポイントエントリポイント各OS用
ファイル

33. ３．サンプルアプリ 作成
アプリの実行
実行するには：
インストール後に表示される指示に従う
・ To run your app on iOS
具体的には
・ $ react-native run-ios を実行。
33

34. ３．サンプルアプリ 作成
アプリの実行
出来た！
(HelloWorld とはいっていない)
34

35. ちょっと、修正してみる
35

36. ３．サンプルアプリ 作成
コードの修正
プロジェクトフォルダ内の
index.ios.js を
開きます。
36

37. ３．サンプルアプリ 作成
コードの修正
37

38. ３．サンプルアプリ 作成
コードの修正
38
Hello World を
追加

39. コードの修正が完了した
=> シミュレーター で 確認
39

40. ３．サンプルアプリ 作成
コード修正の反映
右の画面で、
⌘ + R キーを押す！
40

41. ３．サンプルアプリ 作成
コード修正の反映
右の画面で、
⌘ + R キーを押す！
41
コード修正が
反映

42. ３．サンプルアプリ 作成
まとめ
・ 開発環境のセットアップが死ぬほど簡単だった。
・ コード修正の反映が XCode での 開発の時と違い
コマンドを入力するだけで出来る。
(しかも、高速)
42

43. 次回は
React Native を 使って
Todo 管理 アプリとかを
作ってみたいと思います！
43

44. ご清聴ありがとうございました
！
44