目的

本連載では、React Nativeを使って下記のようなアプリを作っていく予定です。

リアルタイムに送受信可能なチャットアプリ
メッセージはサーバ(firebase)上に保存
認証機能によるログイン・ログアウト

筆者はReact Native開発が初めてなので、本稿ではエディタの導入から始めます。

環境

本記事では以下の環境で検証・開発を進めていきます。
（連載中、バージョンが変わった場合は逐次更新していきます）

OS: macOS High Sierra(10.13.2)
Editor: Atom(1.23.1)
Language: React Native(0.52-RC)
Other: Xcode(9.2)

Atomエディタ導入

Atomとは？

AtomはGitHubが開発した高性能コードエディタです。
拡張(パッケージ)を入れることで、オートコンプリートなど開発サポート機能を追加できます。

本体インストール

https://atom.io/
上記リンク先の「Download for Mac」からダウンロード
→ zipファイルを展開すればすぐさま利用することが可能です。

パッケージ追加

[command ⌘] + [,]キーから設定画面へ移動
→ 左メニューから「Install」を選択すればパッケージ検索画面が開きます。

「Search Packages」フォームに"React.js"などキーワードを入力しましょう！
世界中の開発者が提供してくれたパッケージを検索することができます。

vimの操作性を手に入れる

vimのようなカーソル移動や範囲選択を行えるよう、下記パッケージを導入しました。

※ 17/12/24現在、上記2パッケージの併用が推奨されているようです

React.jsを美しく

Reactソースコードのハイライトやオートコンプリート機能を持ったパッケージも入れます。

react

※ "react"ではパッケージ一覧に表示されず、"React.js"で検索したらヒットしました

ターミナル操作

react-nativeのインストールなど、次の章からターミナルを使った操作が発生します。
しかし、いちいちAtomとターミナルを行ったり来たりするのも面倒くさい…
そこで、Atomから直接ターミナルを開き操作できるパッケージを入れることにました。

platformio-ide-terminal

[control] + [`]キーによって画面下にターミナルを開くことができます。
（カレントディレクトリはProjectで開いている所になるようです）

サンプルプロジェクトの作成

https://facebook.github.io/react-native/docs/getting-started.html
基本的にはこちらの公式ドキュメントに沿って進めていきます。

Node.jsインストール

React NativeクライアントはNode.js(以下、node)パッケージとして提供されています。
nodeはHomebrewからもインストールできますが、バージョン管理が面倒です。

そこで、Macでのnodeバージョン管理を手助けしてくれるnodebrewを入れましょう。
参考記事：Node.jsのバージョンを管理する

# 事前にHomebrewパッケージとして入れていたらアンインストールしましょう
$ brew uninstall node

$ curl -L git.io/nodebrew | perl - setup
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source ~/.bashrc

# nodebrewが起動することを確認
$ nodebrew help

続いて、node本体をインストールします。

# 提供バージョンを確認
$ nodebrew ls-remote

# 執筆時点で最新のバージョンをインストール
$ nodebrew install-binary v9.3.0

# 利用バージョンを指定
$ nodebrew use v9.3.0
use v9.3.0
$ node -v
v9.3.0

また、ファイル監視パッケージWatchmanのインストールが推奨されています。
こちらはHomebrewでインストールしましょう。

$ brew install watchman

# Watchmanのインストールを確認
$ watchman -v
4.9.0

React Nativeインストール

続けて、React Native本体をインストールします。
今度はnodeに付属したパッケージマネージャnpmを使ってインストールします。

$ npm install -g react-native-cli

# React Nativeのインストールを確認
$ react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

アプリケーションの作成・実行

今回はiOSアプリとして動かしてみます。
好きなディレクトリ配下で下記コマンドを実行しましょう。

# 本稿ではDocument以下で実行しています
$ react-native init AwesomeProject

# プロジェクト配下に移動し実行コマンドを入力すると…
$ cd AwesomeProject/
$ react-native run-ios

しばらくすると、iOSシミュレータとサンプルアプリが起動します！
(体感20分以上かかりました…)

次回について

次回は、サーバとして利用するFirebaseの構築やチャットアプリの開発に取り掛かります。
また、React Nativeのビルドにかなりの時間を要するので、短縮する術がないか調査してみたいと思います。

React Native開発をしてみよう！ - Ph.1 Atomエディタの導入 〜 Hello, world実行まで

目的

環境