React Nativeをこれから始めるために：最新の環境構築 ー react-nativeはインストールしないで下さい！

投稿者: | 2020年4月20日
0件のコメント

React Nativeを始めよう：環境構築編

Flutterが次第に注目を集める中、今さらながらReact Nativeを始めなければならなくなった。やるからにはしっかり学習したいのでここに学習記録を残すことにした。

正直に言うとReact Nativeの案件は断ったつもりだったのだが、仲介業者の手違いで引き受けることになってしまった。

少しやってみてNativeのAndroidやiOSのプログラミングとは全く勝手が違うことに驚いた。

React Nativeがどんなものか、という事に関して書いているときりがないので、端的にまとめると

JavaScriptやTypeScriptを使って書いたプログラムをAndroidやiOSのネイティブコードに変換しそれぞれのプラットフォームでネイティブなアプリとして動かすようにするフレームワークである。

大抵のことはフレームワーク内で用意された部品で間に合わせることが出来るが、そうでないものも少なくないので、そういったものを必要とするアプリを作る場合には別途工夫が必要になる。

また、書籍やブログの情報は古いものが多く、現在の本家サイトの情報からずれていることが少なくない。まず、今から始めるために必要な環境構築について書くことにした。

開発の流れ

サーバーと通信して、情報を持ってくる、ユーザー認証をする、といったよくあるエンタープライズアプリのようなものを作ることを考えると、まずは標準で用意されているもので作成できるようにするのが普通だろう。

その場合、まずはExpoというかんたん作成ツールの利用を考えるべきである。事実、React Nativeのサイトでもそれを勧めている。

そしてそれでどうしてもそれぞれのプラットフォームの特色あるものを利用せざるを得なくなった段階でEjectという方法を利用し、素のReact Nativeへ移行するというのが開発の流れである。

Expoで開発する場合にはそれぞれのプラットフォームで動くExpoアプリケーションと合わせて動く形になるのでコードエディタを除き、他の開発関連ツールは不要である。

開発環境

本格的にストアアプリを作成するなら、結局はmacが必要になるだろうから最初からmacで開発を行った方がいいだろう。

必要なもの

  1. node.js　色々動かすためのエンジンと考えればいいだろう。頻繁にアップデートされるのでnodebrewという管理ツールでインストールするのがいいだろう。

  2. watchman　ファイルシステム上での変更を見張って自動リビルドのようなことを手助けしてくれる。

  3. ブラウザ　Chromeが推奨される。デバッグなどにも利用。

  4. Android Studio ExpoからEjectしたり、最初から素のReact Nativeで開発する場合には必要。

  5. Xcode 11.x ExpoからEjectしたり、最初から素のReact Nativeで開発する場合には必要。この場合、iOS 13 SDKを使わなくてはいけないというアップルの要件に対応する必要があるかも知れないのでバージョンは11以降になるだろう。

  6. cocoapods iOS対応の物件は多くがPODの形で組み込まれることになるのでこれが必須となる。

  7. Visual Studio Code (Editor)　テキストエディタなら何でもいいのだが、ソースコードレベルでのデバッガなど、プラグインが充実しているのでお勧めできるのはこのエディタ。

  8. JDK　Android開発で必要なもの。公式サイトでOpenJDK8のインストール方法を公開している。これを使えばいいだろう。

と色々上げたところでmacOSマシンでの開発環境構築手順を以下に記す。

開発環境構築手順

  1. （入れていなければ）homebrewをインストール　https://brew.sh/　を参照
  2. nodebrewのインストール 公式サイトは　https://github.com/hokaccha/nodebrew　にある。インストールは
 % curl -L git.io/nodebrew | perl - setup
  1. nodeのインストール　公式サイト　https://nodejs.org/en/　で最新版等の確認を行っておく。

    インストール、使用するバージョンを決めたら以下ののようにしてインストールし、使うものを選択する。

 % nodebrew install 12.16.2
 % nodebrew use 12.16.2
  1. watchmanのインストール　React Nativeのサイトに記載されている。それを再掲すると
 % brew install watchman
  1. Xcode 11.x （とコマンドラインツール）
    Eject後の物件をビルドするのに必要。
    現在Mojaveなら11.3.1, Catalinaなら11.4.1が最新となる。これをApp Storeから持ってくればいいだろう。Xcodeをインストールするとコマンドラインツールのインストールも聞かれるのでインストールする。シミュレーターはXcodeと一緒にインストールされる。

  2. JDK(8以降とされてはいるものの、JDK 13などを使ってAndroid開発を行っている所は殆どないのでは？)

    Android開発に必要なもの。OracleのものかOpenJDK8。後者は入手方法がReact Nativeのサイトに記載されている。それを再掲すると

% brew cask install adoptopenjdk/openjdk/adoptopenjdk8

  1. Android StudioとAndroidエミュレータ

    GoogleかJet Brainsから持ってくる。
    Android StudioのToolsの中にAVD Managerがあるので、それを使ってエミュレータを作成、管理する。

  2. Visual Studio Codeとプラグイン https://code.visualstudio.com/ で本体が取得できる。
    お役立ちプラグイン

    React Native Tools: ソースコードレベルでのデバッグを可能にしてくれるなど是非入れておきたいプラグイン by Microsoft

    ESLint（ECMAScript）TSLint(TypeScript)のLint系プラグイン。自分の使う方言に合わせて入れておきたい。TSLintはMicrosoft版を入れる。

    ES7 React/Redux/GraphQL/React-Native snippets 文字通りReact Nativeでよく使うコードスニペットを提案してくれるもの。.ts .tsxのソースコードではTypeScriptにも対応。

Expoをいれる場合は次のコマンドを使う。

npm install -g expo-cli

現在はReact Native本体をインストールせず、次のコマンドで実行することになっている。だから標題の「react-netiveはインストールしないで下さい！」となる。

npx react-native コマンド

更なる詳細については https://reactnative.dev/docs/environment-setup を参照すればいい。

まとめ

React Nativeを本格的に始めるに当たって必要なものはCatalinaの走るMac。AndroidやiOSの実機があった方がいいだろう。

インストールする必要のあるものは上に挙げた。繰り返すがReact Nativeの本体は入れる必要がない。本家サイトでは入っていたら削除せよ、とあるくらいだ。

コメントを残す