kdnakt blog

hello there.

React Native開発環境をセットアップした話とか

何とかブログ三日坊主にならずに済んだ。

とはいえ、毎日更新するのは今年の目標ではない。

あ、2018年の抱負の記事書かなきゃ……。

 

[予備調査]

stackoverflow.com

適当にググって見つけたStack Overflowによると……

なるほど。

 

DecoはMacオンリーのようなので、将来的にAndroid版の開発をやることとかも考えて除外。

Atom + NuclideはReact開発元のFacebookオススメのようなのでこれが良さそう。

Webstormは有料なのでパス。前の部署で使ってた人もいたから、JavaScriptの開発に有用なのは知ってるけれど。

Sublimeも悪くはなさそう。

Visual Studio Code + VSCodeも悪くはなさそう。

 

どれでも良かったので、とりあえずリストの上から選ぶ事に。

Atom + Nuclideで始めてみる。

 

[インストール作業]

atom.io

Atomをインストール。

Windows版は少しだけ使ったことがある。

フロー図を作る場面があったので、プレビューしながら書けるやつが便利だった。

qiita.com

 

Nuclideさんも、公式サイトに従ってインストールしてみる。

nuclide.io

 

そう言えば、React Nativeとかそもそもnode/npmをインストールしてなかった。

これまたググると、MacではHomebrewというパッケージマネージャを使うらしい。パッケージマネージャでパッケージマネージャをインストールするという何かアレな感じ……。

 

brew.sh

サイトに記載されているおまじないのコマンドでインストール成功。

brew install npm
npm install react-native-cli -g

これで準備完了。

 

[Hello Worldしてみる]

react-native init helloworld

コマンドを入力する。なんかガリガリファイルが作られていく。

react-native run-ios
xcrun: error: unable to find utility "instruments", not a developer   
tool or in PATH

なんかエラーがでる。こんな時はグーグル先生だ!

 

stackoverflow.com

なんかXCodeの設定が足りてないっぽい。パスが通ってないのか。

言われた通りに設定を済ませて、再度run-ios

f:id:kidani_a:20180102114531p:plain

おお、起動した。めちゃくちゃ簡単だ。

早速コードを書き換えて、指示どおりCmd+Rで再読み込みしてみる。

f:id:kidani_a:20180102114701p:plain

反映された!

 

[まとめ]

今年は「アウトプット駆動学習」していくぞ!

(あれ、Nuclideはどこ行った?)