最近ネイティブアプリ開発をはじめたらーらです。
一昔前まではObjectiveCやJavaが書けないとアプリ開発は不可能でした。しかし、いまはReactNativeというFacebookが開発しているjavascriptでネイティブアプリを開発できるパッケージがあります。
FacebookアプリやInstagramアプリなど世界トップクラスのユーザー数を持つアプリでもReactNativeは採用されていて、わたしの身の回りのベンチャー企業もこぞってReactNativeを使用してプロダクト開発を行っています。
そして、わたし自身、WebのSPA(シングルページアプリケーション)をReactやVueでいくつも制作したことはあるので、ReactNativeでアプリづくりにも挑戦してみたいと思い立ったのであります！笑
本日は、アプリ開発で一番めんどくさい環境構築を自分への備忘録がてら紹介します。
なるべく、わかりやすく、さっくりと終わるようにしてますので、15分もあれば、アプリづくりの最低限の土台は作れますよ！
環境構築
環境構築に必要なもの
- XCode
- Node/NPM
- watchman
- 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のインストール
ターミナルで以下を入力してください。
|
1 |
brew install node |
正常にインストールが行われると、「node -v」コマンドでNodeのバージョンを確認できるようになります。
NPMのインストール
Nodeをインストールすると同時にNPMもインストールされます。
「npm -v」コマンドで、Node同様にバージョンを確認できます。
watchman
|
1 |
brew install watchman |
ReactやReactNativeを制作しているFacebookがインストールを強く勧めているので、とりあえず、入れておきましょう。
RN CLI(React Native Command Line Interface)
|
1 |
npm i -g react-native-cli |
これをすることで、React Nativeを制作するための土台をターミナルのコマンド一発で用意できたり、たくさんの便利機能が使えるようになります。
以上で、環境構築に必要なツールのインストールは完了です。
以下で、簡単なアプリを作りながら、実際にこれらのツールの使い方を説明します。
RN CLIでアプリの雛形をつくる
先程インストールしたRN CLIを使って、アプリの土台をインストールします。
ターミナルでプロジェクトを作成したいディレクトリに移動したら、
|
1 |
react-native init プロジェクト名 |
と入力してください。
インストールが完了すると、指定したプロジェクト名のディレクトリが作成され、
- ios
- android
- node_modules
- App.js
- index.js
といったアプリづくりに必要なファイル一式が入っています。
iOSシミュレータを立ち上げる
ターミナルで、RN CLIでインストールしたプロジェクトの中に移動して、
|
1 |
react-native run-ios |
コマンドを叩いてください。
※初回だけ、インストールに時間がかかります。
上記コマンドを入力すると、以下のようにiphoneのシミュレーターが起動します。
ソースを修正して、表示してみる
以上で環境構築が完了し、プロジェクトのコードがiphoneシミュレーターで表示されるようになりました。
そこで、少しだけソースを変更して、ReactNativeのプログラムの書き方を紹介したいと思います。
「react-native init プロジェクト名」で出来たファイル群のindex.jsを
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React from 'react'; import { View, Text, AppRegistry } from 'react-native'; const App = () => { const { textStyle, viewStyle } = styles; return ( <View style={viewStyle}> <Text style={textStyle}>Hello RARA World!</Text> </View> ); }; const styles = { viewStyle: { backgroundColor: '#ebebeb', justifyContent: 'center', alignItems: 'center', height: "100%", }, textStyle: { fontSize: 40 } }; AppRegistry.registerComponent(プロジェクト名, () => App); |
に変更してください。
このソースはReactNativeでアプリを立ち上げるために最低限必要なライブラリをインポートし、１つのコンポーネントをスタイルで装飾しただけの非常に簡易的なものです。
この状態で、先程立ち上げたシミュレーターを再表示すると
と表示されます。
おめでとう！これでiphoneアプリのトップページが作れました！
ReactNativeを使うと、こんなに簡単にアプリ制作が出来るのです。今回の記事では、ReactNativeというjavascriptでネイティブアプリを作る環境構築を紹介しました。
これから、いろいろな記事で、実際にアプリを作る様子やコツを執筆していこうと思います。
是非、また、読みに来てくださいね！
