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

対象読者
----
- JavaScriptを使える人
- 何かアプリを作りたい人

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

### 話すこと
- React/ReactNativeでどんなアプリが作れるのか
- React/ReactNativeの開発環境の作り方

### 必要な環境
- npmコマンドが使える環境
  - 参考：[Macにnode.jsをインストールする手順](https://qiita.com/akakuro43/items/600e7e4695588ab2958d)

何が作れるのか？
------
- 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

```jsx:例
style={{martinTop: 10}}
```

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

Reactの開発環境
-----
### [create-react-app](https://github.com/facebook/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](https://github.com/react-community/create-react-native-app)と[Expo](https://expo.io/learn)を使います
- Expo (https://expo.io/learn) とは？
    - 参考：[ExpoでReactNativeアプリを開発するメリット5選](http://ducklings.hateblo.jp/entry/2018/04/09/142341)
        - シミュレータと実機ですぐ動作確認できる
        - バージョン上げずにすぐに本番に反映できる
        - ビルドがコマンド一発（Xcode不要）
        - Apple申請時に証明書などが不要（Expoで管理してくれる）
        - プッシュ通知が楽
    - デメリット
        - Expoが提供していないアプリ内課金などが使えません
        
#### create-react-native-appをインストールして、アプリの作成

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

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

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

```
$ cd my-app
$ npm start
```

何を作ればいいかわからない
----------
- 参考までに私のはじめては、ボタンクリックでカウントを増やすものを作りました
- 既存のモジュールを調べ、それをベースに作るとクオリティの高いものが簡単に作れます
   - 例えば、[react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat)を使うと簡単にチャットアプリが作れます
       - 参考： [ReactNativeで超速簡単チャットUI実装](https://qiita.com/Yorinton/items/b029df0713a471d4569a)
   - 特にiOSアプリはUIでリジェクトされる可能性があるため、[Native Base](https://nativebase.io/)を使うのがオススメです

### オススメのUI
- たくさんあるけど下記が頭一つ抜き出てる感じです
    - [Material UI](https://material-ui.com/)（React）
    - [Native Base](https://nativebase.io/)（ReactNative）

### 無料の開発補助ツール
- [Firebase](https://firebase.google.com/?hl=ja)
  - 参考： [Firebaseの各機能を3行で説明する](https://qiita.com/shibukk/items/4a015c5b3296563ac19d)

### [Expoのツール](https://docs.expo.io/versions/v28.0.0/sdk/)の一部
- 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の人気のモジュール一覧
https://github.com/jondot/awesome-react-native#components

### ReactNativeのコードが公開されているアプリ一覧
https://github.com/ReactNativeNews/React-Native-Apps

### ゲーム作る時にオススメのWebフォントアイコン
http://nagoshiashumari.github.io/Rpg-Awesome/

ReactNativeのアニメーション
---------
### ReactNative版Animate.css
https://github.com/oblador/react-native-animatable

### Illustratorを持っていて絵を描ける人はLottie
https://github.com/react-community/lottie-react-native

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

完成したら公開
----
- React
    - [Firebase Hosting](https://firebase.google.com/docs/hosting/?hl=ja)（無料）
- ReactNative
    - iOSアプリ（$99/年）
    - Andoridアプリ（$25）
    - 参考：[非iOSエンジニアがExpoのReactNative(CRNA)で作ったアプリを初めてAppleに申請するまで](https://qiita.com/HorieH/items/9d4a19377c0f0ab014ba)

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

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