reactnative はじめの一歩
TRANSCRIPT
ReactNative
はじめの一歩👊
2017/07/23
第16回岡山モバイルアプリ開発もくもく会
1
おしながき
2
本日のお品書き
１．あばうとみー
２． ReactNativeとは
３．サンプルアプリを動かしてみる
3
１．あばうとみー
4
１．あばうとみー
高橋 一騎 ( @ikkitang )
・岡山の SIer 勤務
・ PHPer🐘、Swiftの人🐣
・ JPUG 中国支部長
5
１．あばうとみー
6
１．あばうとみー
結婚はいいぞ！
7
１．あばうとみー
第２１回中国地方DB勉強会 in 山口
・ Amazon Web Services
・ Google Cloud Platform
・ Microsoft Azure
主要クラウドにおけるデータベースマネジメントサービスを最強の講師陣によってお伝えします！
9
２．ReactNative とは
10
２．ReactNative とは
React：Facebookが開発したJavaScriptのフレームワーク.
“Learn Once, Write Anywhere”
React Native：React をモバイルで使えるようにしたもの.
11
２．ReactNative とは
React：Facebookが開発したJavaScriptのフレームワーク.
“Learn Once, Write Anywhere”
React Native：React をモバイルで使えるようにしたもの.
12
アプリ + JavaScript といえば・・
13
14
ハイブリッドアプリとの違い
15
Cordova
MonacaReact Native
動作 ローカルのWebView ネイティブ
UI作成 HTML・CSSjsx形式で作成したコンポーネントを
組み合わせて定義
言語 JavaScript JavaScript
ハイブリッドアプリとの違い
16
Cordova
MonacaReact Native
動作 ローカルのWebView ネイティブ
UI作成 HTML・CSSjsx形式で作成したコンポーネントを
組み合わせて定義
言語 JavaScript JavaScript
２．ReactNative とはReact Native とハイブリッドアプリ
ReactNativeはネイティブ上で動くのでUIのパフォーマンスはネイティブアプリとほぼ同レベルでかつ、ハイブリッドアプリよりも高速に動作する。
17
ハイブリッドアプリとの違い
18
Cordova
MonacaReact Native
動作 ローカルのWebView ネイティブ
UI作成 HTML・CSSjsx形式で作成したコンポーネントを
組み合わせて定義
言語 JavaScript JavaScript
コンポーネントを組み合わせて定義？
19
２．ReactNative とはコンポーネントの組み合わせ
※今回はLTなのでイメージだけ。
例えば、右のようなUIのアプリを作る時。
20
２．ReactNative とはコンポーネントの組み合わせ
※今回はLTなのでイメージだけ。
例えば、右のようなUIのアプリを作る時。
21
TimeLine コンポーネント
TimeLine コンポーネント
TimeLine コンポーネント
TimeLine コンポーネント
TimeLine コンポーネント
２．ReactNative とはコンポーネントの組み合わせ
※今回はLTなのでイメージだけ。
例えば、右のようなUIのアプリを作る時。
22
{
“icon”: “ikki_icon.png”,
“name”: “ikkitang”,
“tweet”: “中国地方DB勉強会〜”
}
２．ReactNative とはReact Native のメリット
React をベースに開発されているので元々の React の開発時のノウハウをそのまま活かす事ができる。
23
React Native 最強じゃん！
24
っておもーじゃん！？
25
２．React Native とはReact Native のデメリット
まだ、枯れていない。・バージョンアップの追従がつらい (らしい)
１ヶ月に１回、バージョンが上がる (今 0.45 )
・まだまだ、情報量が少ない (らしい)
26
２．ReactNative とはまとめ
ReactNativeは Facebook 製のフレームワーク。
メリットUIのパフォーマンスはネイティブアプリとほぼ同レベルで高速に動作する。React で培ったノウハウをそのまま活かせる。
デメリットバージョンアップ頻度が高く、枯れていない。
27
３．サンプルアプリ作成
28
まずは、環境構築
29
３．サンプルアプリ作成環境構築（Mac)
・ HomeBrew を入れる[HomeBrew インストール Mac] [検索]
・パッケージを入れる$ brew install node
$ brew install watchman
・ React Native CLI を入れる。$ npm install -g react-native-cli
30
３．サンプルアプリ作成アプリの新規作成
・ターミナルで以下コマンド実行$ react-native init HelloWorld
フォルダ構成はこんな感じ
31
３．サンプルアプリ作成アプリの新規作成
・ターミナルで以下コマンド実行$ react-native init HelloWorld
フォルダ構成はこんな感じ
32
エントリポイントエントリポイント各OS用ファイル
３．サンプルアプリ作成アプリの実行
実行するには：インストール後に表示される指示に従う・ To run your app on iOS
具体的には・ $ react-native run-ios を実行。
33
３．サンプルアプリ作成アプリの実行
出来た！(HelloWorld とはいっていない)
34
ちょっと、修正してみる
35
３．サンプルアプリ作成コードの修正
プロジェクトフォルダ内のindex.ios.js を開きます。
36
３．サンプルアプリ作成コードの修正
37
３．サンプルアプリ作成コードの修正
38
Hello World を追加
コードの修正が完了した=> シミュレーターで確認
39
３．サンプルアプリ作成コード修正の反映
右の画面で、⌘ + R キーを押す！
40
３．サンプルアプリ作成コード修正の反映
右の画面で、⌘ + R キーを押す！
41
コード修正が反映
３．サンプルアプリ作成まとめ
・開発環境のセットアップが死ぬほど簡単だった。・コード修正の反映が XCode での開発の時と違いコマンドを入力するだけで出来る。(しかも、高速)
42
次回はReact Native を使ってTodo 管理アプリとかを作ってみたいと思います！
43
ご清聴ありがとうございました！
44