javascriptでネイティブアプリが作れるReact Nativeの環境構築

最近ネイティブアプリ開発をはじめたらーらです。

一昔前まではObjectiveCやJavaが書けないとアプリ開発は不可能でした。しかし、いまはReactNativeというFacebookが開発しているjavascriptでネイティブアプリを開発できるパッケージがあります。

FacebookアプリやInstagramアプリなど世界トップクラスのユーザー数を持つアプリでもReactNativeは採用されていて、わたしの身の回りのベンチャー企業もこぞってReactNativeを使用してプロダクト開発を行っています。

そして、わたし自身、WebのSPA(シングルページアプリケーション)をReactやVueでいくつも制作したことはあるので、ReactNativeでアプリづくりにも挑戦してみたいと思い立ったのであります!笑

本日は、アプリ開発で一番めんどくさい環境構築を自分への備忘録がてら紹介します。

なるべく、わかりやすく、さっくりと終わるようにしてますので、15分もあれば、アプリづくりの最低限の土台は作れますよ!

 

環境構築

環境構築に必要なもの

  1. XCode
  2. Node/NPM
  3. watchman
  4. RN CLI(React Native Command Line Interface)

 

XCode

Mac上でiPhoneやiPadをシミュレートしながら、iOSアプリを作れるツールです。これがないとアプリづくりは始まりません。

普通にAppStoreからダウンロードできるので、AppStoreで「Xcode」と入力して検索してください。

※Xcodeは定期的にupdateして最新版にしておく必要があります。

 

Node/NPM

次は、パソコンにNodeとNPMをインストールします。

  • Node・・・Node.jsのこと。サーバーサイドで動くjavascriptです。
  • NPM・・・パッケージ管理ツール。ReactやReactNative、Babelなどのjsの拡張機能を管理するツール

Nodeのインストール

ターミナルで以下を入力してください。

正常にインストールが行われると、「node -v」コマンドでNodeのバージョンを確認できるようになります。

NPMのインストール

Nodeをインストールすると同時にNPMもインストールされます。

「npm -v」コマンドで、Node同様にバージョンを確認できます。

 

watchman

ファイルの変更を監視してくれるツールです。

ReactやReactNativeを制作しているFacebookがインストールを強く勧めているので、とりあえず、入れておきましょう。

 

RN CLI(React Native Command Line Interface)

React Nativeに関するコマンドをインストールします。

これをすることで、React Nativeを制作するための土台をターミナルのコマンド一発で用意できたり、たくさんの便利機能が使えるようになります。

 

以上で、環境構築に必要なツールのインストールは完了です。

以下で、簡単なアプリを作りながら、実際にこれらのツールの使い方を説明します。

 

RN CLIでアプリの雛形をつくる

先程インストールしたRN CLIを使って、アプリの土台をインストールします。

ターミナルでプロジェクトを作成したいディレクトリに移動したら、

と入力してください。

インストールが完了すると、指定したプロジェクト名のディレクトリが作成され、

  • ios
  • android
  • node_modules
  • App.js
  • index.js

といったアプリづくりに必要なファイル一式が入っています。

iOSシミュレータを立ち上げる

ターミナルで、RN CLIでインストールしたプロジェクトの中に移動して、

コマンドを叩いてください。

※初回だけ、インストールに時間がかかります。

上記コマンドを入力すると、以下のようにiphoneのシミュレーターが起動します。

 

ソースを修正して、表示してみる

以上で環境構築が完了し、プロジェクトのコードがiphoneシミュレーターで表示されるようになりました。

そこで、少しだけソースを変更して、ReactNativeのプログラムの書き方を紹介したいと思います。

「react-native init プロジェクト名」で出来たファイル群のindex.jsを

に変更してください。

このソースはReactNativeでアプリを立ち上げるために最低限必要なライブラリをインポートし、1つのコンポーネントをスタイルで装飾しただけの非常に簡易的なものです。

この状態で、先程立ち上げたシミュレーターを再表示すると

と表示されます。

おめでとう!これでiphoneアプリのトップページが作れました

ReactNativeを使うと、こんなに簡単にアプリ制作が出来るのです。今回の記事では、ReactNativeというjavascriptでネイティブアプリを作る環境構築を紹介しました。

これから、いろいろな記事で、実際にアプリを作る様子やコツを執筆していこうと思います。

是非、また、読みに来てくださいね!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。