Chapter 02無料公開

React Native構築

はる@フルスタックエンジニア
はる@フルスタックエンジニア
2022.10.05に更新

React Native とは?

React Native はモバイルアプリケーションフレームワークです。

React を使用して、Android、iOS アプリを開発することができます。

Java や Swift が書けなくても React が分かれば、Android と iOS 同じコードでスマホアプリが開発できてしまいます。

今回は、React Native CLI を使用してアプリ開発をしていきます。

Windows の方は WSL 上ではなく、Windows 上で動かすようにしてください。

Mac の方はそのまますすめてください。

node/npm インストール

node と npm がインストールされていることを確認します。

$ node -v
$ npm -v

まだインストールされていない方は、インストールしてください。

https://nodejs.org/ja/download/

yarn インストール

yarn をインストールします。

yarn は npm 同様の node で動作するパッケージマネージャーです。

npm よりもインストール速度は早いです。

npm install -g yarn

環境セットアップ

下記の公式ドキュメントを参考にしてください。

https://reactnative.dev/docs/environment-setup

Android シミュレーター(Windows/Mac)

開発環境をセットアップしていきます。

Android で開発する場合は、Android Studio をインストールします。

https://developer.android.com/studio

インストールが完了したら、Android Studio を開きます。

More Actions の SDK Manager を開きます。

SDK Platforms で開発する Android のバージョンにチェックをします。

SDK Tools で画面のようにチェックをします。

チェックをしたら Apply ボタンをクリックするとインストールが始まります。

次に Virtual Device Manager を開きます。

Create Device で開発するデバイスをインストールします。

Device Manager を確認すると、インストールしたデバイスが表示されますので、スタートボタンをクリックします。

これで Android シミュレーターが動くようになりました。

詳しくは Expo の公式ドキュメントをご覧ください。

https://docs.expo.dev/workflow/android-studio-emulator/

iOS シミュレーター(Mac)

iOS で開発する場合は、Xcode をインストールします

Preferences の Locations で Command Line Tools を指定します。

Open Developer Tool から Simulator を実行します。

iOS シミュレーターが起動します。

詳しくは Expo の公式ドキュメントをご覧ください。

https://docs.expo.dev/workflow/ios-simulator/