目的
本連載では、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.js"で検索したらヒットしました
ターミナル操作
react-nativeのインストールなど、次の章からターミナルを使った操作が発生します。
しかし、いちいちAtomとターミナルを行ったり来たりするのも面倒くさい…
そこで、Atomから直接ターミナルを開き操作できるパッケージを入れることにました。
[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のビルドにかなりの時間を要するので、短縮する術がないか調査してみたいと思います。