React/ReactNativeでアプリを作ってみたいけど何をすればいいかわからない人向け #React

対象読者

JavaScriptを使える人
何かアプリを作りたい人

話さないこと

React/ReactNativeの基礎や使い方
- 公式のドキュメントや検索すればたくさん出てくるので省略

話すこと

React/ReactNativeでどんなアプリが作れるのか
React/ReactNativeの開発環境の作り方

必要な環境

npmコマンドが使える環境
- 参考：Macにnode.jsをインストールする手順

何が作れるのか？

React
- SPAのWebアプリが作れます
ReactNative
- スマホアプリ（iOS、Android）がまったく同じ１つのプログラムで２つ同時に作れます

アクション性が高いゲームも作れる

2048（React）
- https://github.com/IvanVergiliev/2048-react
Flappy Bird（ReactNative）
- https://snack.expo.io/@community/flappy-bird

ReactとReactNativeの開発する時の違い

React

HTMLタグが使えます
CSSが使えます
デバッグはブラウザがあればできます

ReactNatvie

HTMLタグは使えません
- ReactNativeが提供するcomponentを使います
  - ReactNative版のHTMLタグみたいなもの
CSSは使えません
- インラインstyle風の記述になります
  - {{}} で囲む
  - CamelCase

例

style={{martinTop: 10}}

デバッグ方法は色々あります
- ブラウザ（Expo Snack）
- デスクトップシミュレータ（Expo XDE）
- 実機（Expoアプリ）
基本的な書き方はReactと同じため、スマホアプリを作りたいなら、いきなりReactNativeでも問題ないと思います
- とはいえ、Reactの方がデバッグが楽なので最初はReactが無難です

Reactの開発環境

create-react-appをインストールして、アプリの作成、動作確認

$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app
$ npm start

ReactNativeの開発環境

Expo Snack

シンプルなものであればでブラウザで作業/確認できます
- https://snack.expo.io/ にアクセスし「Tap to play」ボタン

ローカル環境

create-react-native-appとExpoを使います
Expo (https://expo.io/learn) とは？
- 参考：ExpoでReactNativeアプリを開発するメリット5選
  - シミュレータと実機ですぐ動作確認できる
  - バージョン上げずにすぐに本番に反映できる
  - ビルドがコマンド一発（Xcode不要）
  - Apple申請時に証明書などが不要（Expoで管理してくれる）
  - プッシュ通知が楽
- デメリット
  - Expoが提供していないアプリ内課金などが使えません

create-react-native-appをインストールして、アプリの作成

$ npm install -g create-react-native-app
$ create-react-native-app my-app

動作確認

下記の２つのうちのどちらかで確認

Expo XDEをインストールして、デスクトップシミュレータで確認する
- my-appフォルダを選択して右上のDeviceで開く
自分のスマホにExpoアプリをインストールして確認する
- 下記のコマンドで出てきたQRコードを読み込む

$ cd my-app
$ npm start

何を作ればいいかわからない

参考までに私のはじめては、ボタンクリックでカウントを増やすものを作りました
既存のモジュールを調べ、それをベースに作るとクオリティの高いものが簡単に作れます
- 例えば、react-native-gifted-chatを使うと簡単にチャットアプリが作れます
  - 参考： ReactNativeで超速簡単チャットUI実装
- 特にiOSアプリはUIでリジェクトされる可能性があるため、Native Baseを使うのがオススメです

オススメのUI

たくさんあるけど下記が頭一つ抜き出てる感じです
- Material UI（React）
- Native Base（ReactNative）

無料の開発補助ツール

Firebase
- 参考： Firebaseの各機能を3行で説明する

Expoのツールの一部

AR: https://docs.expo.io/versions/v28.0.0/sdk/AR
QRコード: https://docs.expo.io/versions/v28.0.0/sdk/bar-code-scanner
歩数計: https://docs.expo.io/versions/v28.0.0/sdk/pedometer

ReactNativeの人気のモジュール一覧

ReactNativeのコードが公開されているアプリ一覧

ゲーム作る時にオススメのWebフォントアイコン

ReactNativeのアニメーション

ReactNative版Animate.css

Illustratorを持っていて絵を描ける人はLottie

クオリティ高いものを作る自信がない

ボタンをクリックしてカウントダウンするだけのアプリで広告収益4000万というのがあります
https://appmarketinglabo.net/100man-tamago/
ボタン押して何かアクションするだけで立派なアプリです

完成したら公開

React
- Firebase Hosting（無料）
ReactNative
- iOSアプリ（$99/年）
- Andoridアプリ（$25）
- 参考：非iOSエンジニアがExpoのReactNative(CRNA)で作ったアプリを初めてAppleに申請するまで

Vue.js

日本だとVue.jsの方が流行っている雰囲気ですが
Reactのメリットは、その知識をそのままReactNativeにも活かせることとモジュールが多いことです
Vue Nativeもありますが、結局はReactNativeを使っているらしいです

注意点

個人的な感想ですが、React/ReactNativeはまだ発展途上で、バージョンが落ち着きません。
そのため、バージョンによっては書き方が違っていたりエラーになったりします