kakueki61's dev history

備忘録的に記録を残しています

React Nativeでアプリを作ってみる（導入編）

React Native

React NativeはJavaScriptでiOS/Androidアプリを開発するためのフレームワークです。 Facebook社のJavaScriptライブラリであるReactを基礎としています。
基本的にはJavaScriptで書くことができますので、ワンソースでiOSアプリとAndroidアプリを同時に開発できるのが大きな利点です。
JavaScriptでマルチプラットフォームというと、WebViewアプリであったりハイブリッドアプリを思い浮かべたりしますが、ReactNativeではWebView上でアプリを動かすというわけではありません。
JavaやSwiftで開発したものにかなり近いものを開発することができます（もちろん限界もありますが）。

The React Native CLI

create-react-native-appを使ってお手軽に開発をスタートさせることができますが、ここではより広範な開発をできるReact Native CLIを使った方法を紹介します。
なお、紹介するのはMac環境での手順となります。

インストール

1. HomeBrewをインストール（もししてなかったら）

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. nodeをインストール

brew install node

3. watchmanをインストール

開発時のコード変更を監視するのに使います。コード修正を素早くデバッグ中のアプリに反映させたりするのに使います。

brew install watchman

4. react-native-cliをインストール

npm install -g react-native-cli

どこでも使えるようにグローバルに置いときます。 インストールはsudoが必要かもしれません。

プロジェクト作成

react-native init HogeProject

このコマンドで以下のようなファイル郡が生成されます。

.
├── App.js
├── __tests__
│   └── App.js
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── app.json
├── index.js
├── ios
│   ├── HogeProject
│   ├── HogeProject-tvOS
│   ├── HogeProject-tvOSTests
│   ├── HogeProject.xcodeproj
│   └── HogeProjectTests
├── node_modules
│   ├── ...
├── package-lock.json
└── package.json

/androidと/iosディレクトリ内には各プラットフォーム用の雛形が作成されます。 index.jsがReactのコードになります。 node_modulesにはJavaScriptの依存パッケージが入っています。

起動してみる

iOS

事前準備

  1. Xcodeのインストール
  2. Command Line Toolsのインストール

起動

以下のコマンドを実行します。

react-native run-ios

ビルドが成功すると、このようにシミュレータが起動します。 f:id:kakueki61:20180122204836p:plain:w300

Android

事前準備

  1. Java Development Kit(JDK)のインストール
    JDK 8をDLしてインストールします。JDK 9だとビルドできないので注意してください。
  2. Android開発環境
    Android Studioをインストールし、Android SDK, Android SDK Platform, Performance (Intel ® HAXM), Android Virtual Deviceもインストールします。
    詳細は要件はこちらを参照してください。
  3. 環境変数の設定
    React NativeのコマンドラインツールがAndroid SDKを利用するので以下の内容を$HOME/.bash_profileに書いておきます。
  export ANDROID_HOME=$HOME/Library/Android/sdk
  export PATH=$PATH:$ANDROID_HOME/tools
  export PATH=$PATH:$ANDROID_HOME/platform-tools

source $HOME/.bash_profileで設定を読み込んでください。

起動

リアル端末をMacに接続、あるいはエミュレーターを立ち上げた状態で（エミュレーターの詳細はこちらを見て下さい）、以下のコマンドを実行します。

react-native run-android

ビルドに成功すると端末は以下のような画面になります。

f:id:kakueki61:20180122205525p:plain:w300

まとめ

今回はreact-nativeコマンドでのプロジェクト作成とビルド方法を紹介しました。

個人でアプリを作ろうと思ったのですが、その時にiOSとAndroidの両方を一人で書くのはツライなあと感じて興味をもったのがReact Nativeでした。
私も勉強中ですが、今後もその中で得られたことを紹介していければと思います。