いんでぃーづ

ゲームメインのブレブレブログ。ゲーム,Unity,デザイン,UI/UX

React と ReactNative のプロジェクト生成方法まとめ

{スポンサーリンク}

最近Reactでアプリ作って遊んでいるのですが、Webフロントエンド界隈の混沌は まじで吐き気がするなあ と思いつつハマって抜け出せなくなりつつあります(ダブルミーニング)。

特に自分にとっては、プロジェクトを作る方法が名前が似てるけど全然別物だったり、前準備が多すぎでげんなりしていたので、もう迷わないようにまとめておくことにしました。

本来ReactとReactNativeは一緒にして見るようなものでもないですが、意外とやりたいことがかぶっていたりするし、Reactで使っているライブラリをそのままRNに使おうとしてあれっとなったりするので、逆に一緒に勉強したほうがいいんじゃないかと思っています。

開発マシンについて

Mac一択です。

ReactNativeでiOS開発するならどっちにしろMac必須ですし、各種コマンドの親和性を考えるとどうやってもMacになります。

以下、全部Mac前提の手順です。

あと node とか npm、yarn を使えるのも前提です。

※実装を始める前に覚えなくてはいけないツールが多いのは、最近のJavascript開発の闇だと思います。本当に。(npm, webpack, typescript, babel, etc...)

React

Webブラウザで動かすJSアプリを書くためのFacebookフレームワークです。
Fluxの概念がかっこよくて 内心マウントとりやすい ので人気があります。(違)

Create a New React App – React

CDNからReact本体のJavascriptを読み込む

HTMLをブラウザで読み込んだあと、scryptタグでReactのJSを読み込む方法です。

最初に紹介しといてアレですが まず使わない ので、できますよってことだけ書いて起きます。

試したい場合は公式サイトのチュートリアルをどうぞ。

Add React to a Website – React

nodeを使ったことがない方はこの方法を使うしかないけど、今後のためを考えるならnpm使えるようにしておきましょう。

create-react-app コマンド

必要なライブラリからディレクトリ構造、果ては PWAのmanifestファイル まで一発生成してくれる、

まさに「私、React始めました!」のFacebook公式コマンドツール。

npm 5.2.0 以上を使っているなら、npx を通してすぐ使うことができます。

npx create-react-app MyReactApp

npm 6 以上なら npm init コマンドも使えます。

npm init react-app MyReactApp

yarn を使いたい人はどうぞ。

yarn create react-app MyReactApp

作ったアプリは即実行!

cd MyReactApp
npm start

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

type-script を使う

「いやーJS生とかないっしょ型前提っしょー」という方も一定数いらっしゃると思う。
もちろんReactでTypeScriptを導入する方法もあります。

まず、TypeScriptの公式サイトでやりかたが載っています。

React & Webpack · TypeScript

他にも、MicrosoftGithubに、--scripts-version オプションを指定して create-app する方法が載っています。

GitHub - Microsoft/TypeScript-React-Starter: A starter template for TypeScript and React with a detailed README describing how to use the two together.

create-react-app my-app --scripts-version=react-scripts-ts

www.npmjs.com

このライブラリはサードパーティ? なのかよくわかりませんが、使えるものは使っときましょう。

Next.js

サーバサイドレンダリング をするReactアプリを作るフレームワーク。使ったことない。いつか使って見る。

Next.js

Gatsby

静的サイトでReactを使うときのフレームワーク

GatsbyJS

create-react-app となんか違うのかな?
使ったことない。いつか使ってみる。

ReactNative

Reactのプログラム手法でクロスプラットフォームモバイルアプリを作れるという、一見して神のようなフレームワーク
しかし民泊アプリのAirbnbがアプリでのReactNative利用をやめたり、何かときなくさいモノだったりします。

expo-cli (旧 create-react-native-app)

GitHub - expo/expo-cli: Tools for making Expo apps

元はcreate-react-native-app というコマンドラインでしたが、こちらはアーカイブされて expo-cli がメインになったようです。

元のほうの名前が create-react-app と同じような名前なので勘違いしてしまいますが、Facebook公式ではないっぽい(?)。

Expo というSDKの上で動くReactNativeプロジェクトが生成されます。

expo.io

モバイル端末実機で動かす際もちょっと特殊で、アプリストアからExpoアプリをインストールし、プロジェクトから npm run して表示されるQRコードを読み込んでアプリを動かします。

Xcodeの設定とかもいらないので、この方法なら MacでなくてもiOSで動くアプリを作れます

ただし、Expoフレームワークの上で動いているので当然 Expoが対応していない端末機能は使えない し、 最新バージョンのReactNativeではないと考えたほうがいい 。(2018/11/02現在の最新バージョン30では、RN最新0.57ではなく0.55.4がベースになっている。)

ちょろっと動かすにはいいが、OSの最新機能をバリバリ使いたいなら選択肢から外れる方法だと思います。

eject

Expo用に生成したプロジェクトを eject すると、XcodeやAndroidStudio用のプロジェクトが生成され、Expoに縛られない開発ができるようになります。

最初はExpoで画面遷移を作り、ejectしてプラットフォーム依存プラグインを書いて作り込んでいくというフローもアリかもしれない。

eject操作は不可逆 なので気をつけましょう。

react-native-init

AndroidStudio, Xcode用ファイルが含まれるプロジェクトが生成されます。(Expo eject した後と同じです)
ネイティブコードを書く必要がある場合はこちらを選択します。

react-native init MyReactNativeProject

ReactNative + TypeScriptについて

MicrosftがGitHubにサンプルを公開している。

github.com

試してない。

react-native-dom

Webフロントエンドフレームワークの概念をReactが昇華させた後、ReactNativeによってモバイルアプリへ黒船来航。
そしてReactNativeが Webへと逆輸入 されました。

github.com

ReactNativeのコードをブラウザで動かす という、もう

おまえら何したいねん

と言いたくなるようなプロダクトですが、おおむね好評のようです。よかったですね。(なぜか上から)

使う場合、ReactNativeのプロジェクトを作ったあと、npmでインストールします。

npm install --save-dev rnpm-plugin-dom
# or
yarn add --dev rnpm-plugin-dom

# Add DOM support to your React Native project
react-native dom

Expoではないので注意。


ということでReact, ReactNativeの始め方ということでまとめたのですが、
昨今の流れの早さを見ていると 一ヶ月後には使い物にならなくなっていてもおかしくはない です。

こういうの追ってると Unityっていいな と思えてしまうのは錯覚でしょうか。

Amazon.co.jpアソシエイト