format_list_bulleted
【React Native】expoを用いたプロジェクトの作成~実行までやり方について解説
最終更新日時:2021-07-25 02:25:52



アプリ開発にはSwiftやJavaなど言語がありますが,Reactでもアプリ開発ができます.本記事では,Reactでスマホアプリが開発できるReact Nativeについて紹介していきます.ちなみに,プロジェクトの作成から実際のシミュレータの起動前の導入部分を解説していきます.

React Nativeとは?

Facebookが開発したJavaScriptのアプリ開発用のフレームワークです.つまり,JavaScriptでアプリが開発できてしまうんです.

また,クロスプラットフォームのアプリ開発用フレームワークなのでiOSとAndroidの両方で開発ができます.

expoとは?

React Nativeでの開発をより簡単に行うことができるツール

しかし,作れるものに制限がある(react-native-cliを使えばより作れる範囲は広がる)が大抵はexpoでの範囲内でアプリ開発が可能

expoのインストール方法

npmでイントールします.(事前にNode.jsをインストールしておいてください.また,Node.jsのインストール方法は【Vue.js】npmを用いたVueのインストール方法を解説(CDNを用いたインストール方法等も紹介)で少し解説しています)

$ npm install -g expo-cli

expoのプロジェクトの作成

では早速,expoでプロジェクトを作成しましょう.ターミナルを起動しましょう.(本記事では,デスクトップ画面でプロジェクトを作成しようと思いますので,以下のコマンドを入力し,デスクトップに移動します.)

$ cd Desktop

そして,以下のコマンドを入力するとプロジェクトが作成できます.

$ expo init [プロジェクト名]

今回はプロジェクト名をcode-databaseにしています.

$ expo init code-database


ここで,choose a templeteと出てきますが,blankで問題ないかと思います.blankがJavaScriptで記述するかblank(TypeScript)はTypeScriptで記述するかの違いとなっています.

しばらく時間が経つと,プロジェクトが作成されます.そして,以下のコマンドを入力しcode-databaseのフォルダに移動します.

$ cd code-database

またcode-databaseフォルダの中身を見てみると,,画像のようにたくさんのファイルができているかと思います.

ちなみに,このApp.jsの中身を編集することで,画面のレイアウトや文章などを変更することができます.

実行(アプリの立ち上げ)

今回は何もいじらずに実行してみましょう!

以下どちらかのコマンドを入力することで実行ができます

$ npm start
$ expo start

実行すると,ターミナル上では以下のような画面が出てきます.

ここで,http://localhost:19002/を開いてみると,以下の画像のようなexpoのDeveloper toolsが出てきます.

ここから, Run on iOS simulatorを押す(ターミナルでiを入力する)と,iOSのシミュレータが出てきます(Xcodeをインストールしていれば出ます).以下のような画面が確認できるはずです.

iOSアプリの画像

ちなみに今回は,Xcodeのシミュレータを使いましたが,「Expo」というアプリをApp storeもしくはPlay storeからダウンロードすることでモバイルの実機でも試すことができます.ダウンロードした後,QRコードを読み込むとすぐアプリが開き試せます.

本記事のまとめ

  • React Nativeを用いることで,iOSやAndroidのアプリ開発が可能に!
  • また,expoを用いれば,React Nativeでの開発がより簡単に!
  • expoはnpmでインストールできる!

今後は,React Nativeを用いた,アプリ開発で使うライブラリやツールについて解説していきます!