Edited at

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

More than 1 year has passed since last update.


対象読者


  • JavaScriptを使える人

  • 何かアプリを作りたい人


話さないこと


  • React/ReactNativeの基礎や使い方


    • 公式のドキュメントや検索すればたくさん出てくるので省略




話すこと


  • React/ReactNativeでどんなアプリが作れるのか

  • React/ReactNativeの開発環境の作り方


必要な環境


何が作れるのか?


  • React


    • SPAのWebアプリが作れます



  • ReactNative


    • スマホアプリ(iOS、Android)がまったく同じ1つのプログラムで2つ同時に作れます




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


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


  • シンプルなものであればでブラウザで作業/確認できます




ローカル環境


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

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

$ create-react-native-app my-app


動作確認

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



  • Expo XDEをインストールして、デスクトップシミュレータで確認する


    • my-appフォルダを選択して右上のDeviceで開く



  • 自分のスマホにExpoアプリをインストールして確認する


    • 下記のコマンドで出てきたQRコードを読み込む



$ cd my-app

$ npm start


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


  • 参考までに私のはじめては、ボタンクリックでカウントを増やすものを作りました

  • 既存のモジュールを調べ、それをベースに作るとクオリティの高いものが簡単に作れます




オススメのUI


  • たくさんあるけど下記が頭一つ抜き出てる感じです




無料の開発補助ツール


Expoのツールの一部


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/

ボタン押して何かアクションするだけで立派なアプリです


完成したら公開


Vue.js

日本だとVue.jsの方が流行っている雰囲気ですが

Reactのメリットは、その知識をそのままReactNativeにも活かせることとモジュールが多いことです

Vue Nativeもありますが、結局はReactNativeを使っているらしいです


注意点

個人的な感想ですが、React/ReactNativeはまだ発展途上で、バージョンが落ち着きません。

そのため、バージョンによっては書き方が違っていたりエラーになったりします