03. 失敗から学ぶ「React Nativeモバイルアプリ」の開発準備

React Nativeを使ってモバイルアプリをつくることに挑戦しています。第三回目は、失敗から学ぶ開発環境の構築についてまとめたいと思います。

1. オンライン学習プラットフォーム「Udemy」

現在、Udemyの講座「React Native – The Practical Guide [2023]」を受講しながら、React Nativeを使ったモバイルアプリの開発を進めています。(→プログラミング言語コースはこちら)英語の講座ですが、JavaScriptとReactの基礎知識があれば、Android(Java)やiOS(Swift、Objective-C)のモバイルアプリの開発経験がなくても取り組める内容となっています。

過去の記事は下記をご覧ください。
第一回:01. React Nativeでモバイルアプリをつくる
第二回:02. React Nativeでモバイルアプリをつくる

2. Expo CLIのバージョンアップデートに失敗した話

Expo CLIの最新バージョンをコマンド「npm show expo-cli」で確認したところ「6.0.8」となっていました。自分の環境のバージョンは「4.11.0」だったため、コマンド「npm install –global expo-cli@6.0.8」を実行してアップデートしようとしましたが、エラーになってしまいました。

Expo CLI エラー

上記のエラーは「WARNING: expo-cli has not yet been tested against Node.js v18.12.1.」です。つまり、インストールされているNode.jsのバージョンが「v18.12.1」で、Expo CLIでサポートされていないものであるため、最新バージョンのインストールに失敗したようでした。直前にNode.jsの最新バージョンをインストールしたことが原因だったのですが、やはりバージョンのアップデートには慎重にならないとダメですね。

3. Node.jsをNodebrewでインストールする

私の環境の場合、Node.jsを公式サイトからインストールしていたため、バージョンの管理や変更が出来ないようでした。色々と調べていると、複数のバージョンを管理する便利なツール「Nodebrew」というものがあることが分かったので、そちらを使ってインストールすることにしました。実行した手順は下記の通りです。

① Node.jsのアンインストール(macOS)

Node.jsの実行ファイルの場所を確認して、ファイルの削除を行います。コマンドは下記の通りです。

$ which node
/usr/local/bin/node
$ sudo rm -rf  /usr/local/bin/node

② Nodebrewの導入(macOS)

Nodebrewの導入手順については、こちらのサイト(→MacにNode.jsをnodebrewでインストールして環境構築【決定版】)を参考にさせていただきました。

I. Homebrewのインストール

Homebrewのサイトに記載されているコマンドを実行します。インストールが成功したことを確認するために、下記のコマンドでバージョン確認も行います。

$ brew -v
Homebrew 3.6.11
Homebrew/homebrew-core (git revision 30e801065ba; last commit 2022-11-19)

Ⅱ. Nodebrewのインストールと有効化

下記のコマンドを順番に実行し、セットアップが完了したことを確認します。

$ brew install nodebrew
$ nodebrew
$ nodebrew setup
Nodebrewのインストールと有効化

「export PATH=$HOME/.nodebrew/current/bin:$PATH」とPATHの指定が表示されているので、成功したことが分かります。

Ⅲ. PATHの追加(zsh/bash)

自身の環境で使用しているシェル(zsh/bash)によってPATHの追加方法が変わります。私の環境はzshだったため、下記の方法で行いました。

$ vim ~/.zshrc

「i」を押してインサートモードにし、「export PATH=$HOME/.nodebrew/current/bin:$PATH」を貼り付けて「esc」を押してから「:wq」と入力してエンターを押し、下記のコマンドを実行します。

$ source ~/.zshrc

Ⅳ. Node.jsのインストールと有効化(Nodebrew)

インストール可能なNode.jsのバージョンを確認して、一覧の中からインストールしたいバージョンを指定してインストールを行います。今回私は、バージョン「14.21.1」をインストールしました。

$ nodebrew ls-remote
$ nodebrew install v14.21.1
$ nodebrew use v14.21.1

上記完了後、「node -v」を実行して「v14.21.1」と表示されれば成功となります。

4. React Nativeモバイルアプリの作成と起動

モバイルアプリの新規作成に関しては、「【手順②】コマンド実行でアプリを作成する」をご覧いただければと思います。今回はExpo CLIのバージョンを「6.0.8」にアップデートしてアプリを作成しました。バージョンはコマンド「expo –version」で確認できます。また、プロジェクトをスタートするには下記のコマンドを実行してください。(※「rn-first-app」は作成したアプリのフォルダ名です。)

$ cd rn-first-app
$ npm start
Expo CLI

ターミナルに上記のように表示されるQRコードを、手持ちのスマートフォンで読み込んで「Expo Go」のアプリで開くと、アプリの表示を確認することができます。また、プロセスの実行をストップしたい時は、ターミナルで「CTRL + C」を、再開したい時は「npm start」を実行します。

今回は環境構築と第1回の復習がメインとなりました。次回以降、再びReact Nativeを使ったモバイルアプリの開発を進めていきたいと思います。

amiko
編集者、デザイナー、宣伝のお仕事などを経験。現在は「デザインライター」として活動中。プログラマーとしてもお仕事をしています。好きなことは、読書、音楽(主にジャズ)、旅行。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください