React Nativeの開発環境構築の設定・準備

以前にReact Nativeの開発環境構築の設定に関しては、一度記事にしていたのですが、

いろいろと手違いがあって、記事内の画像などが全て消えてしまったため、今回再度簡単に分かりやすくまとめておきます。

とはいってもやり方は、エラーさえ出なければとてもシンプルで簡単です。

React Nativeの開発環境構築の設定・準備

React Native＝フレームワークでスマホアプリの作成が可能になるというもので、

通常だとスマホのアプリを作る際には、iPhoneとAndroidだと使用する言語が変わってくるのが、

React NativeならこれだけでOKというもの(厳密にいうとこれだけではダメ)

なので、まずやる事としては、

Node.jsというJavaScriptの実行環境をインストール

Expo-clのインストール(React Nativeの開発を助けてくれるプラットフォーム兼ライブラリ)

Visual Studio Code(VS Code)をインストール

この３つ。

１．Node.jsをインストール

まずはNode.jsというJavaScriptの実行環境をインストールする。

Node.jsをダウンロードする場合はここから。

https://nodejs.org/

ファイルをダウンロードしたら、

ダブルクリックで開く
↓
Next
↓
チェックを入れてNext
↓
Next
↓
Next
↓
Install
↓
ポップアップが表示されたらYes
↓
Finish

そうしたら次にインストールがきちんと出来ているかを確認。

PowerShellを開いて、

node --version

と入力し、エンター(Macであればターミナル)

画面に無事にバージョンが表示されれば、きちんとインストールが完了しているという事。

２．Expo-clのインストール

まずはプロジェクトを作るためのフォルダを作成する(ファイル名はこれから作るアプリの名前など、分かりやすければ何でもOK)

フォルダを開いて中でShift＋右クリックで、PowerShellウィンドウをここで開くを選択し、

npm install expo-cli --global

ここでエラーが出る場合、PowerShellを管理者権限として実行する必要がある。

例えば今回、仮にデスクトップ上にSampleというプロジェクトフォルダを作った場合は、

Set-Location -Path c:\Users\user\Desktop\React-Native\Sample

というコマンドを入力し、任意のフォルダの中まで移動する必要がある。

そして再度、

npm install expo-cli --global

Expoのアカウントを作成

次にExpoのアカウントを作成する。

https://expo.dev/

アカウントを作成する際には、画面上右上の「Sign Up」から、メールアドレスとパスワードを登録すればOK。

そうしたらPowerShellに戻って、

expo init プロジェクト名

今回は試しにプロジェクト名を「my-new-project」というものにしてみる。

expo init my-new-project

そうするといくつかの選択肢が表示され、どのテンプレートを使うかを聞かれるので、一番上を選択しそのままエンターキーでOK。

Your project is ready! と表示されたら次に、

cd my-new-project

で、my-new-projectのフォルダ内に移動し、次に、

expo login

で、Expoに登録したメールアドレスを入力し、エンター。

そして次にパスワードを入力し、エンターキーでOK。

３．Visual Studio Code(VS Code)をインストール

そうしたら次に、Visual Studio Code(VS Code)をインストール。

ファイルのダウンロードはここから。

https://code.visualstudio.com/download

ダウンロードからインストールが終わったらPCを再起動し、作ったプロジェクトを立ち上げる。

プロジェクトを立ち上げる際には、my-new-projectのフォルダをVisual Studio Codeにドラッグ＆ドロップし、

画面上のターミナルからNew Terminalを選択し、ターミナルに、

expo start --tunnel

そうするとターミナルにQRコードが表示される。

スマホにExpo Goをダウンロード

スマホでアプリのExpo Goをダウンロードし、そのアプリのカメラで、

Visual Studio Codeに表示されたQRコードを読み込めば、実機での動作確認が可能になる(最初の１回目の読み込みは時間がかかる)

今までだとパソコンの環境によっては、パソコンのエミュレータを使って動作確認をする必要があったので、

パソコンのスペックに依存して、場合によっては動作確認が非常に重くて、

動作確認が大変で萎えるという事があったのですが、これがあればもっと簡単になります。

ここまでで開発環境の設定は終わりです。

後はプロジェクトに変更を加えて保存をする度に、自動的にスマホ側でも変更が反映されるようになります。