React Nativeとは
公式サイト：https://reactnative.dev/
React Nativeの詳細はこちらの記事で紹介しています！
React と React Native は何が違うのか？それぞれのメリットや用途を解説
React Nativeを利用したアプリケーション開発は、Expoというフレームワークを利用します。
ExpoはReact NativeとiPhone機能の橋渡しをしてくれるだけではなく、ディレクトリの管理や、設定の管理を行ってくれる優れたフレームワークです。Expoを使うメリット・デメリットはありますが、素早く実装を行いたい人は使うことをおすすめします。
Expoを使ったiPhoneアプリ制作手順
下記の手順でReact Nativeの準備を行います。
- brewコマンドをインストール
- Expoコマンドをインストール
- Expoコマンドで、雛形アプリケーションを作成
- 実装を行う
brewコマンドをインストール
Expoのインストールには、homebrewを利用します。
homebrewとはコマンドを管理するコマンドで、brewコマンドを使ってコマンドをインストールすることが可能です。
このhomebrewはエンジニアには広く使われており、開発も活発に行われているため、是非利用しましょう。
homebrewの公式サイト
さっそくhomebrewのコマンドをインストールします。
ターミナルを起動して、下記コマンドを打ち込みます。
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"エンターを押すとコマンドが走るので、必要に応じて『Yes』を選択してください。
Homebrewのよく使うコマンド
- brew install パッケージ名…パッケージのインストール
- brew uninstall パッケージ名…パッケージのアンインストール
- brew doctor…brew インストールしたコマンドの状態を確認
nodeコマンドを入れる
expoはnpmというNodeJSのパッケージコマンドでインストールします。
そのため、まずはnodeをインストールします。
$ brew install nodebrew次に設定を追加します。
// 最新の安定版をインストール
$ nodebrew install-binary stable
// 安定版のバージョンを確認
$ nodebrew --version
// 確認したバージョンを利用するようにセット
$ nodebrew use vX.X.XExpoコマンドをインストール
ここからReact Nativeの開発が始まります。
環境構築で行うことは、コマンドのインストールと、expoのアカウント作成です。
環境構築で行うこと
- Expoコマンドのインストール
- expoのアカウントを作成
Expoコマンドのインストール
次にExpoコマンドをインストールします。
Expoコマンドは、ReactNativeのアプリケーションの雛形アプリを作成してくれるコマンドで広く開発に使われているコマンドです。
以下のコマンドを打ち込んでください。
// (1) expoのコマンドを入れる
$ sudo npm install -g expo-cli
// (2) バージョン確認（小文字のvだとエラーになる）
$ expo -V
4.0.15エラーが起きなければインストール完了です。
expoアカウントの作成をしましょう
expoは雛形のアプリを作成できるコマンドとは別に、アプリをiPhoneで確認できるサービスがあります。そのサービスに登録して実機確認ができるようにします。
こちらのサイトからアカウントを作成してください。
Expoコマンドで、雛形アプリケーションを作成
Expoコマンドを使って、アプリケーションを作成していきましょう。
Expoコマンドを使ったアプリケーションの作成は下記になります。
アプリケーション作成の流れ
- initコマンドを使う
- 設定項目を決める
- アプリを開く
initコマンドでテンプレートを作成
打ち込んだあとは設定項目があるので、しばらく待ちます。
// (叩くコマンド)
$ expo init <アプリケーション名>
// 例. コピペ用（アプリケーション名 ... rss-application）
$ expo init rss-applicationこちらのコマンドでアプリケーションの雛形が作成されます。
設定項目を決める
次にテンプレートを作成する設定を決めていきます。
----- Managed workflow -----
・blank … 何も設定されていない状態からスタート
・blank (TypeScript) … TypeScriptで記述する設定以外、なにも設定されていない状態からスタート
・tabs (TypeScript) … TypeScriptで記述する設定と、タブによるページ遷移の設定が済みからスタート
----- Bare workflow -----
・minimal … 何も設定されていない状態からスタート（bare workflow）
・minimal (TypeScript) … TypeScriptで記述する設定以外、なにも設定されていない状態からスタート（bare workflow）設定を進めると、以下のようになります。
$ expo init rss-application
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ There is a new version of expo-cli available (4.0.17). │
│ You are currently using expo-cli 4.0.15 │
│ Install expo-cli globally using the package manager of your choice; │
│ for example: `npm install -g expo-cli` to get the latest version │
│ │
└─────────────────────────────────────────────────────────────────────────┘
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. You can pass --npm to use npm instead.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following yarn commands.
- cd rss-application
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn webエラーが発生してなければ、これで初期設定が終了です。
アプリを開く
作成したアプリケーションに移動して、アプリを動かしてみましょう。
// 作成したアプリケーションへ移動する
$ cd （アプリケーションの名前）
// 作成したアプリケーションを動かす
$ yarn iosアプリケーションが問題なく動作すれば完了です。
まとめ
今回は、Expoを用いたReact Nativeでアプリを作成する方法を解説しました。
React Nativeを用いたアプリ作成は簡単に、早く、webの技術で作成できるためおすすめです。
５分で作成可能ですので、是非作成してみてください。