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)をインストール
  • この3つ。

    1.Node.jsをインストール

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

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

    https://nodejs.org/

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

    ダブルクリックで開く

    Next

    チェックを入れてNext

    Next

    Next

    Install

    ポップアップが表示されたらYes

    Finish

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

    PowerShellを開いて、

    node --version

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

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

    2.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。

    3.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コードを読み込めば、実機での動作確認が可能になる(最初の1回目の読み込みは時間がかかる)

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

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

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

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

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