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

対象読者

• 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はまだ発展途上で、バージョンが落ち着きません。
そのため、バージョンによっては書き方が違っていたりエラーになったりします