IT

1. 【事前資料】令和元年・
５月４日開催
React Native
勉強会＠WeB Bench原宿

2. ReactNativeとは
https://facebook.github.io/react-native/
ReactとJSを使用して、iOSとAndroidのネイティブアプリ開発を行う
ことができるフレームワーク
→最初にReactのおさらいと、環境設定など説明していき
ます。

3. React Nativeインストール手順続き
インストール
$ brew install node brew install watchman
$ npm install -g react-native-cli
→アンドロイド開発か、iOS開発かを選び、
それぞれに、Xcode/Android Studioのセットアップ
を行います。＊ここでは割愛し、順次追加していきます
Expoを活用しても大丈夫です。
＊アンドロイド（スマホ、タブレット）か、iPhone（実機）が入
ります

4. 環境設定
• ①ブラウザ、Google ChromeのDL
• ② Node.jsのインストール
自分のPCのターミナルで $ node –vでバージョン確認できます
【Mac】 Homebrewを使う場合→brew –vでバージョン確認
$ brew update
$ brew install node.js
【Windows】http://nodejs.org/ja/から最新版をDL

5. 環境設定
• npmコマンドのインストール
• $ npm –vでバージョンを確認できるので最新のものにす
る
• npm パッケージのインストール
$npm install react react-dom
$npm install -g create-react-app
＊webpackやbabelを使いたい場合
$npm install webpack webpack-dev-server –save-dev

6. React環境
• 任意のフォルダで$ create-react-app my-appを実行
・ターミナルで$ npm startを実行
Compiled successfully!と表示されれば成功
http://localhost:3000/でHello worldを確認してくださ
い
＊Webpackの場合も同様。
ここまでで何か質問あれば事前に連絡してください

7. React Nativeインストール手順続き（アンドロ
イド）
*Android スタジオ インストール後、
環境変数の設定など注意
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
プロジェクト作成
react-native init AwesomeProject
アプリ実行（シュミレーター）
cd AwesomeProject react-native run-ios or react-native run-
android

8. React Nativeインストール手順続き（iOS）
Xcodeインストール後、
react-native init hogeapp
と打つと、hogeappというアプリを作成できます（アプリ名はもちろん
後で変えられます）
Simulatorで起動
Xcodeをインストールした際に、Simulatorという、Mac上で動く
iPhoneやiPadの仮想環境のようなものがインストールされています。
react-native run-ios

9. 環境設定が難しい方向け
• 参考URL
React native環境手順（ioS)
• https://qiita.com/kangyoosam/items/dc9d11112
7c9ee55c9c8
• https://qiita.com/takaishota/items/4db36a806a
257582fa1f (アンドロイド）
• Code sandboxというサービスを利用
https://codesandbox.io/

10. 作成するアプリの例
• Reactを活用したジャンケンアプリ
• メモ帳やTodoアプリなど
• React NativeでGPSの位置情報を活用した地図アプリ
• 参照URL:https://qiita.com/mikan3rd/items/20152cdd63a708264a9e

11. 参考書籍&記事URL&（当日、一部持ってい
きます
・React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフ
ロントエンド開発 Kindle版
https://gihyo.jp/book/2018/978-4-7741-9706-7
・React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによ
るアプリ構築の実際~
https://blog.nabettu.com/entry/expo-book