opengraph

React Native を試してみる

こんにちは、上野です。
週末開発合宿を行ってきました。
その中で React Native によるアプリ開発にチャレンジしてみました。
一部では既にReactは大変という声もあったりしますが、ネイティブアプリも作成できるツールはあまりないので結構期待しています。
(最近 Androidアプリ も作れるようになりました)

そんなわけで今回は React Native の環境構築について書いてみます。

事前準備

Macでのインストールを前提としています。

  • Xcode
    App Storeから最新版をインストールしましょう。
    Xcode をインストール後 Command Line Tools も入れてください(最新だと自動で入るようです)
  • Homebrew
    まだインストールしていない方は以下のコマンドを実行してください。

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

    既にインストール済みの方は以下のコマンドで最新化してください。

    brew update

React Native インストール

まずは Node をインストールしましょう。

brew install node

今回は割愛しますが Node のバージョン管理をしたい方は nodebrew を入れてください。

続いて、Watchmanflow を入れます。

brew install watchman

brew install flow

そして、react-native-cli を入れて完了です。

npm install -g react-native-cli

これで以下のコマンドが使えるようになっているはずです。

react-native

プロジェクトの作成

それではプロジェクトを作成しましょう。

react-native init [プロジェクト名]

実行すると Installing react-native package from npm… と表示され各種ファイルが生成されます。

iOSフォルダ内にある [プロジェクト名].xcodeproj を実行しましょう。
あとはシュミレータを実行するだけです。

スクリーンショット 2015-10-20 23.25.27

init で生成されたものが起動されましたね。

どんなコードかと言うと以下のような形です。
index.ios.js を開いてみましょう。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var testPj = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('testPj', () => testPj);

CSSも入っているのでちょっと長めですが、iOSのアプリ開発を知らなくてもこれをみればなんとなくわかりますよね。

createClass の中を修正して、シュミレータで Command+R をすると更新されます。
ブラウザで開発しているのと同じように開発できて便利ですね。
また、自動で更新するようにも変更が可能です。

いかがだったでしょうか。
React Native を使うとアプリ開発をしたことなかった人でも入りやすいのではないでしょうか。
興味を持たれた方はぜひ試してみてください。

ギルドワークスでも新しいチャレンジができるお仕事のご相談や、新しいチャレンジをしたいエンジニアと出会えることを楽しみにしています。
お気軽にお問い合わせください。