アプリ開発には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をインストールしていれば出ます).以下のような画面が確認できるはずです.
ちなみに今回は,Xcodeのシミュレータを使いましたが,「Expo」というアプリをApp storeもしくはPlay storeからダウンロードすることでモバイルの実機でも試すことができます.ダウンロードした後,QRコードを読み込むとすぐアプリが開き試せます.
本記事のまとめ
- React Nativeを用いることで,iOSやAndroidのアプリ開発が可能に!
- また,expoを用いれば,React Nativeでの開発がより簡単に!
- expoはnpmでインストールできる!
今後は,React Nativeを用いた,アプリ開発で使うライブラリやツールについて解説していきます!