【React Native】基礎知識とExpoを使用した開発環境構築！

この記事の内容

1. React Nativeとは？
1. React Nativeのメリット
2. React Nativeのデメリット
2. React Nativeを試しましょう
3. React Nativeの開発環境設定
1. 開発環境
2. Node.jsとNpmのインストール
3. Expo-clのインストール
4. 最初のアプリを作ってみよう
1. セットアップ
2. アプリスタート
3. 修正してみよう
5. React Nativeのコードについて
6. 印象
7. 次回
8. 参考のリンク

1.React Nativeとは？

React NativeはJavaScriptでAndroidとiOSアプリを作るためのオープンソースのフレームワークです。AndroidとiOSのコードにコンパイルせずに、デバイスでJavaScriptを実行することができます。React NativeはReactJSを使いますが、ReactJSを知らなくてもReact Nativeでアプリが作れます。Facebookによって2015年3月にリリースされました。

i.React Nativeのメリット

• Facebook社が作っており、Facebook, Skype, Instagram, Uber Eatsなど人気なアプリはReact Nativeで作られているので未来的にサポートは続きそうです。
• 一つのプログラムを書いて、iOSアプリにもAndroidアプリにもなるのでOSを選ばずにみんなが使えるアプリになります。React Nativeは最初はAndroidとiOSのためのものでしたが、コミュニティーがサポートしているプラットフォームはWindows、macOS、ウェブ、tvOSなどもあります。
• JavaScriptと「JSX」というマークアップ言語だけでアプリが作れるのでJavaScriptができる人にはとても使いやすいです。
• React Nativeの開発のビルドは早いです。コードを更新した結果を早く見ることができます。
• node.jsの環境なのでnpmにあるパッケージが全部使えます。Node.jsはサーバーとして使われているJavaScriptを実行するものです。npmはnode.jsのパッケージマネージャで、色々な人によって作られたオープンソースの関数が使えます。日付フォーマットなどよく必要になるパッケージもReact Native向けのパッケージがあります。

ii.React Nativeのデメリット

• React Nativeはまだ歴史が浅いのでツールやパッケージはエラーがでる可能性があります。エラーをグーグルで検索してもまだだれも対応方法が分からない可能性があります。
• 歴史が浅いフレームワークなので、もし必要な特定の機能がReact Nativeで作れない場合、自分で作らなければいけません。React Nativeで使えるネイティブな機能は多いですが、特別な機能が必要ならiOSとAndroidのエンジニアが必要な時もあります。

2.React Nativeを試しましょう

開発環境構築をする前に、まずはReact NativeがどんなものかExpo Snackというサービスで試してみましょう。

Expo Snack はReact Nativeのコードを書くことができ、HTMLのcodepenと同じようにすぐに画面を確認できるサービスです。

Expo Snack のリンクをクリックしたら下記のような画面が見えます。右にあるWebのボタンをクリックして、コードを変更したら結果が見えます。

下のようにコードを書いたら右に見えます。snackはReact Nativeの勉強の時と早く結果みたい時も便利そうです。

自分の携帯でもテストができます。

まず携帯にExpoのアプリをインストールしていきます。

上の画面のRunをクリックして、iPhoneを使っている場合はGet iOS Appをクリックして、Androidを使っていたらGet Android Appをクリックしたら、必要なアプリが表示されます。

今回はiPhoneなのでアップストアから携帯にダウンロードします。アプリを開いて、左側「Projects」をタップすると下の画面のようにDevice IDがあります。そのIDを入れたら、携帯でブラウザーと同じようにコードの結果がすぐ確認できます。

3.開発環境設定

では、さっそく準備をしていきましょう。

今回はExpoというオープンソースのReact Nativeで開発するための無料ツールを使用します。

ExpoはXcode（iOSの統合開発環境）やAndroid Studio（Androidの統合開発環境）を使わなくてもアプリを作れる便利なツールです。React NativeのオフィシャルサイトでもExpoがすすめられています。

i.開発環境

今回の開発環境は下記の通りです。こちらはWindowsとiPhoneですが、MacとAndroidの開発との違いは大きくないと思います。

環境設定前の環境

• Windows 10
• iPhone 6S (iOS 12.4.1)
• VS Code 1.39.2 (テキストエディターはお好みで)

この記事でインストールするもの

• Expo モバイルアプリ
• Node.js 12.13.0
• Npm 6.12.0
• Expo-cli 3.4.1

ii.Node.js とNpmのインストール

node.jsからインストールできるのでLTS推奨版をダウンロードします。

許可にチェックしてください。

ここは保存先です。変更する場合は「Change」から変更してください。

CustomSetupは下記のようにデフォルトのままで大丈夫です。

下に書いていることは「C/C++からコンパイルが必要なnpmモジュールがあります。このようなパッケージが必要であればPython 2、Visual Studio Build Toolsなどツールが必要です。チェックしたらツールをインストールします。」という内容なので今回はチェックを外しても大丈夫です。

インストールが終わったらコマンドで確認できます。下記のコマンドを実行して、バージョンが表示されたら、インストールは成功です。

node --version

npm --version

 

iii.Expo-clのインストール

次は、npmを使ってexpo-cliをインストールしましょう。

管理者としてコマンドを開き下記のコマンドでインストールできます。

管理者ではない場合、エラーが出てくるので気を付けてください。

npm install expo-cli --global

これですべてインストールは完了です。

4.最初のアプリを作ってみよう

expo-cliのインストールが完了したらアプリを作りましょう。

i.セットアップ

使いたいフォルダに移動します

cd フォルダへのディレクトリ

下のコマンドを書いたらオプションが選べます。

expo init my-new-project

プロジェクトのテンプレートが選べます。どれを選択してもいいですが一番目のblankを選びました。

次に、アプリの名前が変更できます。

最後にnpmに必要なパッケージがダウンロードされて、セットアップ完了。

ii.アプリスタート

次に、新しく作られたダイレクトリーに移動したらアプリをスタートできます。パソコンと携帯のネットワークは同じであれば--tunnelが必要じゃないですが、--tunnelを追加したらネットワークの設定を考えずに接続できます。

cd my-new-project

expo start --tunnel

※エラーが出た場合

「Metro Bundler process exited with code 1」のエラーがでてきたら「~\my-new-project\node_modules\metro-config\src\defaults\blacklist.js」のファイルで14行目くらいにある コードを修正したらエラーがなくなります。このエラーはWindowsだけのエラーらしいです。

修正前のコード

var sharedBlacklist = [
    /node_modules[/\\]react[/\\]dist[/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/ ];

修正後のコード

var sharedBlacklist = [
   /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
   /website\/node_modules\/.*/,
   /heapCapture\/bundle\.js/,
   /.*\/__tests__\/.*/ ];

問題なければQR Codeが表示されます。Expoのアプリ（snackで使用した同じアプリ）は携帯にインストールしていればQR Codeをスキャンしたらアプリはビルドされて携帯で使えます。iOSは普通のカメラアプリで、AndroidはExpoのアプリでQR Code をスキャンできます。

携帯でこんな画面が見えます。

iii.修正してみよう

App.jsをVS Codeで開いてなにか変更し保存をすると、自動に携帯に再ビルドされて変更後のアプリがすぐ見えます。例えば、App.jsのbackgroundColorは#fffから”yellow”に変更したら黄色のアプリになります。

補足：　-wのフラグを使ったらウェブでもビルドできます！

expo start -w

5.React Nativeのコードについて

このコードを見たらJavascriptコードのように見えないですが、HTMLと似ている <view>と<text>があります。これはJSXというマークアップ言語です。React Nativeの開発のほとんどの場合はJSXを使います。ビルドしたら自動的にJavaScriptのコードになります。

JSXについては下記の記事で説明しています。

rocksystem6611.hatenablog.com

6.印象

モバイルアプリを作るときはReact NativeとExpoを使いたいと思います。XCodeとAndroid Studioを使うのはややこしいので自動に処理されるのは楽だと思いました。ビルドのスピードもいい印象があります。悪い印象はExpoのエラーがでてきたことだけです。まだ若いツールだから他のバグもあるかもしれません。

7.次回

次回はReact Nativeで簡単なアプリを作ります。

8.参考のリンク

• React Nativeのオフィシャルサイト： https://facebook.github.io/react-native/
• Expoのオフィシャルサイト：　https://expo.io/
• Snack：　https://snack.expo.io/
• React Nativeの説明の記事：　https://medium.com/@thinkwik/react-native-what-is-it-and-why-is-it-used-b132c3581df
• React Nativeで作られたアプリについての記事：　https://codeburst.io/top-mobile-apps-built-with-react-native-afeb24fa4c04
• Expoの説明の記事：　https://levelup.gitconnected.com/expo-vs-react-native-cli-a-guide-to-bootstrapping-new-react-native-apps-6f0fcafee58f
• Metro-configのエラー対応：　https://github.com/expo/expo-cli/issues/1074
• React Nativeの雑情報：　https://medium.com/magnetis-backstage/5-things-that-youll-learn-when-you-start-to-use-react-native-1ed601e6eac
• JSXの説明の記事：　https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918
• React Nativeのメリットとデメリット：　https://www.netguru.com/blog/react-native-pros-and-cons
• 日本語でExpoについて：　https://tech.maricuru.com/entry/2018/04/09/142341