Re-Natalの始め方（for iOS）


[Re-Natal](https://github.com/drapanjanas/re-natal)とはClojureScriptでReact Nativeアプリを開発するためのユーティリティです。

Re-Natalをインストールして、アプリのスケルトンを生成し、それをXcodeのシミュレータで動かすところまでのメモです。

### 事前準備

まずは、React Nativeでアプリが開発できる環境を構築するのですが、Nodeをインストールするところから書くと、本編に入る前に挫折しそうなので割愛します。

React Nativeの[Quick Start](https://facebook.github.io/react-native/docs/getting-started.html)を参考に`create-react-native-app`パッケージをインストールして動作を確認しました。

その際、`npm start`を実行した時に「Unable to start server
  See https://git.io/v5vcn for more information, either install watchman or ...」というエラーが発生したので、brewでwatchmanをインストールしました。

インストールしたもの:

* Node v8.11.2
* watchman 4.9.0
* Python anaconda3-5.1.0
* Xcode Version 9.4

### Re-Natalのインストール

```
$ npm install -g re-natal
$ ndenv rehash   # ndenvを使用している場合
```

### プロジェクトの作成

`re-natal init`コマンドを実行します。引数のプロジェクト名はキャメルケースだそうです。

```
$ re-natal init HelloNatal
```

実行すると次のようなメッセージが出力されます。`Compiling ClojureScript`のところで多少時間がかかります。

気の利いたメッセージが和ませてくれます。

```
Creating HelloNatal
☕  Grab a coffee! Downloading deps might take a while...
Creating Leiningen project
Updating Leiningen project
Creating React Native skeleton.
Creating Re-Natal config
Compiling ClojureScript

To get started with your new app, first cd into its directory:
cd hello-natal

Run iOS app:
react-native run-ios > /dev/null

To use figwheel type:
re-natal use-figwheel
lein figwheel ios

Reload the app in simulator (⌘ + R)

At the REPL prompt type this:
(in-ns 'hello-natal.ios.core)

Changes you make via the REPL or by changing your .cljs files should appear live.

Try this command as an example:
(dispatch [:set-greeting "Hello Native World!"])

✔ Done
```

### アプリの起動

`re-natal init`の出力メッセージに書かれているように、次のコマンドを実行します。

```
$ re-natal use-figwheel
$ lein figwheel ios
```

次のようなメッセージが出力され、アプリとの接続を待機している状態になります。まだREPLのプロンプトが返ってきません。

```
Figwheel: Cutting some fruit, just a sec ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid ;)
Figwheel: Starting server at http://0.0.0.0:3449
Figwheel: Watching build - ios
Figwheel: Cleaning build - ios
Compiling "target/ios/index.js" from ["src" "env/dev"]...
Successfully compiled "target/ios/index.js" in 37.598 seconds.
Launching ClojureScript REPL for build: ios
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
          (figwheel.client/set-autoload false)    ;; will turn autoloading off
          (figwheel.client/set-repl-pprint false) ;; will turn pretty printing off
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application

```

~~結局どうすればよいのか分からなかったのですが、以下の手順で動かすことができました。（自己流なので正しいやり方がわかったら記事を更新する予定）~~

~~プロジェクト直下のios/HelloNatal.xcodeprojをダブルクリックしてXcodeを起動します。次に「▶」ボタンを押してビルド&実行します。~~


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

```
$ re-natal use-ios-device simulator
$ react-native run-ios

# シミュレータのバージョンを指定して起動する場合はこちら
$ react-native run-ios --simulator="iPhone 8 Plus"
```

`react-native`コマンドを実行するには、あらかじめ`react-native-cli`パッケージをインストールしておきます。

```
$ npm install -g react-native-cli
```

ビルドが終わると、自動的にTerminalが起動し`Metro Bundler`が実行されます。その後にiOSシミュレータが起動してアプリが実行されました。

![Screen Shot 2018-06-01 at 1.23.19.png](https://qiita-image-store.s3.amazonaws.com/0/34793/42386533-11f8-869d-547e-287d4c2261ef.png "Screen Shot 2018-06-01 at 1.23.19.png")

アプリの`push me`ボタンを押すと、アラートでメッセージが表示されます。

### コードの編集と自動リローディング

ソースコード`src/hello_natal/ios/core.cljs`を編集すると自動的にアプリに変更が反映されました。

毎回、Xcodeからビルドをやり直さなくてよいので助かりそうです。後は実機でも試さないと。