UnsplashのDenys Nevozhaiが撮影した写真

はじめに

この記事はNodeをインストール済みであることを前提としています。

　

もしインストールしていない場合は、先に以下を記事を参考にNodeをインストールしてください。

【WSLに環境構築する場合】
　https://tekutekku.com/node_express_react_next_on_wsl/

【Windowsに直接環境構築する場合】
　https://tekutekku.com/node_prepare_development_environment_on_windows/

動作確認した環境

OS：Windows11 Pro/WSL2(Ubuntu 22.04.4)
Node：v20.11.1
npm：10.2.4
expo：50.0.14
react：18.2.0
react-native：0.73.6

新規プロジェクトの作成

さっそく新規プロジェクトを作成します。

　

■手順１．プロジェクトの作成

以下コマンドを実行します。

npx create-expo-app --template

質問されるので以下の通り選択及び入力してください。

? Choose a template: Blank(TypeScript)
? What is your app named?: my-app　⇐任意のアプリ名を入力する

参考：https://reactnative.dev/docs/typescript

　

■手順２．必要なパッケージのインストール

プロジェクトのルートで以下コマンドを実行する

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

　

■手順３．ブラウザで表示させるためのパッケージのインストール

ブラウザで動作確認できた方が便利なので、以下パッケージを導入します。

npx expo install react-native-web react-dom @expo/metro-runtime

　

デフォルトのディレクトリ、ファイル構成

.expo：
　ExpoCLIのプロジェクト設定ファイルやキャッシュなどが含まれるディレクトリ
assets：
　画像やフォントなどの静的リソースを配置する場所
node_modules：
　npmパッケージの格納先
.gitignore：
　gitの管理外にするディレクトリ、ファイルを指定するファイル
app.json：
　Expoプロジェクトの設定（アプリの名前やアイコンなど）を定義するJSONファイル
App.tsx：
　プロジェクトのエントリーポイント。アプリのメイン画面を定義します。
babel.config.js：
　Babelの設定ファイル
package-lock.json：
　インストール済みのnpmパッケージ情報が記載されたファイル
package.json：
　アプリで使うnpmパッケージを指定するファイル
tsconfig.json：
　TypeScriptコンパイラの設定ファイル。ビルドやTypeScriptの設定のカスタマイズ用ファイル。

動作確認

ここまでできたら動作確認をします。

「Android端末」と「PCのブラウザ」で確認する方法それぞれについてご紹介します。

Android端末で動作確認

■手順１．Webサーバーを起動する

以下コマンドでWebサーバーを起動します。

npx expo start --tunnel

※以下のような質問がきたらYesでOKです！
　? The package @expo/ngrok@^4.1.0 is required to use tunnels, would you like to install it globally?

　

■手順２．Android端末に「Expo」をインストールする

Android端末にて「Google Play ストア」を開き「Expo」をインストールします。
↓このアイコンのアプリです↓

■手順３．Android端末のExpoアプリでQRコードを読み取る

Android端末でExpoを開くとホーム画面に「Scan QR Code」と書いてあるので、タップします。

続いて、コマンドプロンプトに表示されたQRコードを読み取ります。

　

読み込みに数十秒ほど時間が掛かりますが、以下のように真っ白な画面の中央に「Open up App.tsx to start working on your app!」表示されればOKです！

PCのブラウザで動作確認する

PCのブラウザでの動作確認はとても簡単で、Webサーバーを起動してブラウザで開くだけです。

　

以下コマンドでWebサーバーを起動します。

npx expo start

※http://localhost:8081でWebサーバーが起動します。

　

Webサーバーが起動したらブラウザで「http://localhost:8081」にアクセスしてください。

コードをいじってみる

先程動作確認した際、ブラウザに表示された画面のコードはApp.tsxに記述されています。

　

App.tsxを以下のように赤字部分を編集してみてください。

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>はじめてのReactNative</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

テキストとスタイルを編集したので、以下のように表示されるかと思います。

　

アプリの新規作成については以上です。