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

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

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

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

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

- OS: macOS High Sierra(10.13.2)
- Editor: [Atom](https://atom.io/)(1.23.1)
- Language: [React Native](https://facebook.github.io/react-native/)(0.52-RC)
- Other: [Xcode](https://itunes.apple.com/jp/app/xcode/id497799835)(9.2)

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

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

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

![スクリーンショット 2017-12-24 15.05.34.png](https://qiita-image-store.s3.amazonaws.com/0/226076/bf0fa598-a49d-67e8-24d9-42e082e777fe.png)

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

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

- [vim-mode-plus](https://atom.io/packages/vim-mode-plus)
- [ex-mode](https://atom.io/packages/ex-mode)

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

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/226076/f0a494fd-30cd-8a56-2f6f-856f4b220fe6.gif)

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

- [react](https://atom.io/packages/react)

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

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

- [platformio-ide-terminal](https://atom.io/packages/platformio-ide-terminal)

[control] + [`]キーによって画面下にターミナルを開くことができます。
（カレントディレクトリはProjectで開いている所になるようです）
![スクリーンショット 2017-12-24 22.19.56.png](https://qiita-image-store.s3.amazonaws.com/0/226076/a1279ae3-f6bb-0410-a3b8-d539399e7308.png)

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

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

そこで、Macでのnodeバージョン管理を手助けしてくれるnodebrewを入れましょう。
**参考記事：[Node.jsのバージョンを管理する](https://qiita.com/hosoyama-mediba/items/62076628799bddb6ec24)**

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

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

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

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

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

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

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

また、ファイル監視パッケージ[Watchman](https://facebook.github.io/watchman)のインストールが推奨されています。
こちらはHomebrewでインストールしましょう。

```sh
$ brew install watchman

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

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

```sh
$ 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アプリとして動かしてみます。
好きなディレクトリ配下で下記コマンドを実行しましょう。

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

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

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

![スクリーンショット 2017-12-24 23.53.28.png](https://qiita-image-store.s3.amazonaws.com/0/226076/1c091331-b92e-0fe7-1852-48394e51eb51.png)


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