Ubuntu20.04LTSでReact NativeとExpoを試す

#はじめに
React Nativeを業務で使うことになったのですが、Macが届くまでUbuntuでReact Nativeの勉強をする必要が出てきたました。そのためwebやモバイル上での勉強環境構築と動作確認を行っていきたいと思います。

#前提
nodejsをインストール済み
unixコマンドを扱える
Reactが一通り扱える

#環境
nodejs v16.13.0
npm 8.1.0

#React Nativeとは
Facebookが開発したクロスプラットフォームのアプリ開発用フレームワーク。Reactでios、android両方書けて嬉しいよねってやつです。Flutterなども人気が出てきていますが、React NativeはReactの知識をベースにして書けるので、webのノウハウをある程度流用できて開発効率が良いのかなと思います。

#Expoとは
ReactNativeを使ったアプリケーション開発をサポートしているフレームワークです。windows,macOS,Linux関係なくiOS,AndroidどちらもQRコードを介して実機での動作確認が可能です。またwebでの簡単な動作確認も可能です。web上でのシミュレーションも可能なようですが、その場合iosはxcodeが必要となるのでmacOSでないと意味は薄れるかなと思います。EXPOを使わない場合はReact Native CLIを使うようです。

今回はこのwebとQRコードを介した動作確認を通してReact Nativeについて学んでいきます。

#必要なツールやパッケージ
nodejs
ローカルで動かすために必要。

Expo
PCで開発してその動作確認をwebやios端末、android端末で可能にするフレームワーク。

#その他のパッケージ
実際の開発などでは他にも使うものがあるようなのでまとめておきます。あくまで今回は仕組みを理解して本格的な開発に備えよう的な立ち位置なので今回は使いません。

react-native-cli
react-native関連のコマンドを使うためのCLI用パッケージ。今回はexpoで全部やっちゃうのでインストールしていません。

create-react-native-app
react-native版のテンプレート生成コマンド。react-native-cli、このコマンド、expoを用いた３つの方法でテンプレートの生成が可能なよう。今回はexpoでテンプレート生成しているので利用していません。

watchman
ReactNativeのアプリをビルドするのに使用。

JDK
Java Development Kitの略。AndroidアプリケーションはJavaかkotlinで開発されているので、Androidアプリケーションを開発してシミュレータで確認する際に必要です。

Android Studio Emulator
Android デバイスでの動作確認に必要。

xcode
iosのシミュレータによる動作確認に必要。mac製品以外では利用できないためmacを買う理由の一つにもなっている。

#事前準備
インストールの前に諸々の準備をします。まずは公式サイト[[1]]からExpoのアカウント登録を行ってください。次にモバイル端末側でExpo Goというアプリをダウンロードします。アプリ側でもログインをしておいてください。

#インストール
nodejsは最新のLTSバージョンにしてあることを前提とします。

expoのインストール。

npm install -g expo-cli

一応バージョンの確認

expo --version

プロジェクトと連携する場合はログインが必要ですが、今回は必要ないです。

expo login

また、ログイン後にパブリッシュ（デプロイ）することでURLによって動作確認が可能になります。しかし、開発サーバーとバンドラーはローカルマシンで動いているため、その動作を停止すると見れなくなります。

expo publish

#動作確認
プロジェクトを作成。templateを聞かれるのでblank (TypeScript)を選択。

expo init test

作成したディレクトリに移動し、下記コマンドを打つとウィンドウが立ち上がる。

expo start

立ち上がったウィンドウを利用して動作確認することが出来ます。

左側にいくつか項目がありますが、その中のRun in Web browserをクリックするとweb上での動作確認が可能です。ホットリロードが効いているので、変更が保存するとすぐに反映されます。試しにApp.tsxでHello,Worldをしてみます。

App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello,World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

反映されたことを確認したら次はモバイルで動作確認をしていきます。左側のサイドバーにあるCONNECTIONの部分をTunnelにしてQRコードを読み取り、Expo Goで開いてください。そうするとアプリケーションが反映されるはずです。モバイル側もホットリロードに対応しており、コードを更新するだけで変更が反映されます。

#おわりに
モバイルとウェブが同時にホットリロード出来るのはかなり便利だ！と感じました。React Nativeの文法などについても書いていましたが、長くなりそうなので別記事にしようと思います。

#参考文献
[1]:https://expo.dev/
[2]:https://zenn.dev/kai/articles/reactnative-typescript-expo-devlop-env
[3]:https://www.cresco.co.jp/blog/entry/12928/
[4]:https://www.techomoro.com/how-to-install-and-setup-react-native-on-ubuntu-18-04-1-lts-bionic-beaver/
[5]:https://www.mitsue.co.jp/knowledge/blog/frontend/202104/12_1712.html
[6]:https://shizenkarasuzon.hatenablog.com/entry/2021/04/21/004014
[7]:https://reactnative.dev/docs/typescript
[8]:https://docs.expo.dev/workflow/publishing/

[[1]]:expo公式
[[2]]:React Native,Expo,TypeScriptの開発環境構築をする
[[3]]:React Native Expo CLI で始めるクロスプラットフォーム開発 はじめの一歩編
[[4]]:How To Install And Setup React Native On Ubuntu
[[5]]:React Native + ExpoでWindowsからHello World
[[6]]:【Ubuntu】React Nativeの環境構築 →WebとAndroidでHello World!
[[7]]:Using TypeScript
[[8]]:Publishing updates