ReactNative環境構築(mac ver)

さいしょに

iOSとAndroidの両方でアプリを出したい場合
iOSはSwift、AndroidはKotlinとどっちも勉強しなきゃいけないのは面倒ですよね。はい。私は面倒です。

そんな問題を解決してくれるのが、このReactNativeです。
こいつを使えばひとつの言語でiOS,Androidのふたつのアプリを作れるそうです。まさに一石二鳥！ということで、まずはReactNativeを動かせるような環境を構築していきます。

X Codeをインストール

X CodeはAppleが出してるアプリケーション開発ツールです。
結構色んなことができるそうです。
IDE(統合開発環境)と呼ばれています。
X codeをインストールすることでReactでiOSアプリの開発ができます。

‎Xcode

インストールしたら、Xcodeを開いてAgreeします。

HomeBrewをインストール

上の手順を踏んでからじゃないと、HomeBrewをインストールできません。
HomeBrewはバージョン管理システムです。
HomeBrewがすごいのは、ターミナルから色んなパッケージ（＝ソフト）をインストールできることです。
以下のパッケージは全てHomeBrewを使ってインストールします。

ターミナルに以下のコードを書くとHomeBrewをインストールできます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

あれ私、既にHomeBrewインストールしたかしら？
上のコードを入力したけどちゃんとインストールできてるかな？
と不安になったオトモダチは

brew -v

を入力すると現在のHomeBrewのバージョンが出力されます。
以下のように出力されればキチンんとインストール できてます。

Homebrew 2.7.6
Homebrew/homebrew-core (git revision 52381e; last commit 2021-01-27)

Node.jsをインストール

Node.jsとは
サーバーサイドで動くJavaScriptである

らしいです。サーバーサイドという謎のワードが出てきました。
とにかくJavaScriptのようです。Reactは元々JavaScriptと密接な関係があるらしいので、その影響でしょうか。わからない。。。。。。。
今はメンタルヘルスを重視して、一旦全てを無視します。

ターミナルに以下コードを入力して、インストールします。

brew install node

ちゃんとインストールされたかの確認方法はHomeBrewと同じです。
バージョンが表示されればOK！

node -v　/入力
v15.7.0 /出力

Watchmanをインストール

これはファイルやフォルダを監視して、変化があった場合、特定の何かしらを実行するソフトのようです。
よくわからんですが、ReactNativeはソースコードの追加・変更があった場合にこのWatchmanを使うようです。
やっぱりよくわからんですが、必要らしいので渋々インストールします。
※インストールするもん多くない？(涙)

brew install watchman

インストールできたかの確認はパッケージ名に-vを付ければOKです。

React Native CLIをインストールする

CLIはCommand Line Interfaceというらしいです。
またも意味不明ですが、これは名前にReactが入っているのでインストール すべきなのはわかります。

今まではbrew install 〇〇というふうにコードを書いて、HomeBrew経由でパッケージをインストールしてましたが、
Nodeをインストールしたことで、Node Package Maneger（通称npm）を使えるようになりました。めっちゃ余計はお世話ですが、これで二つのパッケージ管理ツールが使えるようになったわけです。できることなら一つに統一して欲しいですが。

React Native CLIはnpm経由でインストールします。

npm install -g react-native-cli

今まで使っていたbrewじゃなくなったので確認方法も変わります。

react-native --version

もし上手く行かない場合は以下のコードを実行！

curl -0 -L https://npmjs.org/install.sh | sudo sh

JDKをインストール

Java Develop kitの略です。こいつがあることでAndroidアプリの開発が可能になります。

以下のリンクから自身のOSに合うモノをインストールします。

https://www.oracle.com/java/technologies/javase-jdk15-downloads.html

Android Studioをインストール

JDKだけじゃダメなの！？
けど幸運なことにAndroid Studioは既にインストールしてたのでノープロです。

Download Android Studio & App Tools - Android Developers

さいごに

一応これで必要なパッケージは揃ったと思います。
正直多すぎてびっくりしてます。
もう既にあっぷあっぷですが、
次回はReactNativeを実際に動かすところをやってみようと思います。