こんばんは。今日は、MacでReact Native開発を行うための環境構築を行いましたので、その手順について備忘のため残しておこうと思います。
Contents
必要なツールをインストールする
MacでReact Native開発をするためには、事前に以下のツールをインストールしておく必要があります。一つ一つ見ていきましょう。
Home Brewをインストールする
Home BrewはMac向けのパッケージ管理ソフトです。以下の公式ページのコマンド一つでインストールすることができます。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-40.png?resize=728%2C458&ssl=1)
NodeJSをインストールする
続けて、Node JSのインストールです。以下コマンドで完了します。
## Node JSのインストール
brew install nodejs
node -v
npm -v
Watchmanをインストールする
こちらは、React Native開発元であるFacebookが開発しているファイル監視ツールです。ファイルの更新を検知し、アクションを実行することができます。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-41.png?resize=728%2C422&ssl=1)
React Native CLIをインストールする
React Native CLI (Command Line Interface)は、React Native御本家ではなく、React Native Communityにより開発されているツールのようで、React Nativeの開発を手助けしてくれるようです。とりあえず、後のために入れておきます。
npm install -g react-native-cli
(追記)いろいろな記事を読んでいると、React Native CLIよりも、Expoを使う方法の方が開発は簡単とされているようです。私もReact Native CLIをインストールしたものの、最初はExpoを使って開発を進めていこうと思います。
https://qiita.com/kaba/items/569aafd80889bb5d9328
https://qiita.com/zaburo/items/b47bfe27d0b8910a1488
(追加)Expoをインストール
上の流れを受けて、Expoのインストール方法についても載せておきます。ExpoはReactのフレームワークです。
npm install -g expo-cli
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-50-1.jpg?resize=728%2C291&ssl=1)
VS Code+拡張機能をインストールする
コードエディタにはVS Codeが最適です。VS Codeは、Microsoftが提供するコードエディタで、無料で利用できます。インストールはこちらから。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-83.png?resize=728%2C183&ssl=1)
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
さらに、TypeScriptでReact Nativeアプリ開発をする場合には、以下の拡張機能はオススメです。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-82.png?resize=728%2C279&ssl=1)
XCodeをインストールする
iPhoneアプリ開発のためには、XCodeという公式のIDEが必要ですので、こちらもインストールしておきます。MacのApp Storeからインストール可能です。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/01/image-41.jpg?resize=728%2C410&ssl=1)
Android Studioをインストールする
もし、Android版のアプリリリースを検討されている場合は、XCodeのAndroid版と言える、Android Studioが必要になってきます。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/02/image-13.png?resize=728%2C336&ssl=1)
以上で、初期に必要なツールは全て揃いました!それでは、次の記事では、早速サンプルアプリを構築してみたいと思います!
今日も最後までご覧いただきありがとうございました!
[番外編] ReactNativeをもっと学ぶなら・・・
React Nativeをもっとちゃんと学びたい!という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・!
土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。