初心者向け！WindowsでReactNative入門～アプリ開発編～ 2日目

えにあです。

WindowsでReactNative入門～アプリ開発編～の2日目です。

前回は空のアプリケーションを作成し、エミュレータ上で以下の画面が表示されるようにしました。

今回はプロジェクト構成の理解と、ディレクト構成の変更を行っていきます。

目次

環境

Windows10 HomeEdition
expo 4.11.0
node.js 4.17.6
VSCode
Typescript

プロジェクト構成の理解

expo initでプロジェクトを作成すると、自動的に以下のファイルが生成されます。 このうち、開発者が意識する必要のあるファイル／ディレクトリに番号を振りました。 これらのファイルについて、一つずつ説明していきます。

.
├── .expo
│   ├── README.md
│   ├── packager-info.json
│   └── settings.json
├── .expo-shared
│   └── assets.json
├── .gitignore
├── App.tsx // 1
├── app.json // 2
├── assets  // 3
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash.png
├── node_modules // 4
│   ├── ....
│   ├── ....
│   └── ....
├── babel.config.js // 5
├── package.json // 6
├── tsconfig.json // 7
└── yarn.lock

1. App.tsx

アプリケーションのエントリーポイントとなるファイルです。前回空のアプリを起動した際、

Open up App.tsx to start working on your app!

という文字列が画面に表示されていました。

App.tsxファイルをVSCodeで開いてみます。以下のように画面に表示されていたものと同じ文字列が記載されていまね。

      <Text>Open up App.tsx to start working on your app!</Text>

試しに、この文字列を以下のように変更してみます。

      <Text>Hello World!</Text>

以下のように、自動的に画面の文字列が更新されたと思います。App.tsxの内容がアプリケーションの内容を決めているということがわかります。

NOTE:
expoを使うメリットの一つとして、このようにソースの修正が自動で反映されるホットリロード機能を備えていることが挙げられます。これにより、開発効率が上がります。うまく更新されない場合はexpoやエミュレータを再起動すると反映されるはずです。

2. app.json

app.jsonの中身は以下のようになっています。スマホにインストールした際に表示されるアイコンやスプラッシュ画面、カメラの仕様許可等のユーザに求めるパーミッションなどの設定を行うファイルです。 この時点ですべてを覚える必要はありません。必要に応じてドキュメントを調べながら設定すればよいでしょう。 　

{
  "expo": {
    "name": "news-app",
    "slug": "news-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

NOTE: スプラッシュ画面
ソフトウェアを起動した際に表示されることのある画面のことです。 スプラッシュ画面は、プログラムの立ち上げ中に表示され、立ち上げが完了した時点でメイン画面に切り替わります。

3. assetsディレクトリ

アプリケーションのアイコンや、スプラッシュ画面用の画像を格納します。ちなみにデフォルトのアイコンは以下のようになっています。さすがにこれでは寂しいので、アイコンを作成する必要があります。

4. node_modules

ReactNativeの開発では、すべての機能を自分で作るのではなく、世の中にある便利なライブラリを再利用して開発を進めていきます。node_modulesディレクトリには、プロジェクトで利用しているライブラリ群が格納されます。expoが自動で標準的なライブラリをインストールしているため、既に大量のディレクトリが存在するはずです。プロジェクトに新たなライブラリを追加した場合にはディレクトリが増えていきます。

5. babel.config.js

babelというトランスパイラ用の設定ファイルです。トランスパイラは、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラのことです。
ReactNativeの記法(TSX)をJavascriptに変換するために使用します。この後の手順で実際にこのファイルを変更します。

6. package.json

package.jsonの中身は以下のようになっています。 dependencies／devDependenciesにプロジェクトで使っているライブラリ群のバージョン情報が記載されています。devDependenciesは開発時にしか使わないライブラリが、dependendiesには本番・開発の両方で使ライブラリが記載されています。 例えば、react-nativeはアプリケーションを実行するために必須なためdependenciesに記載されていますが、babelはトランスパイルのためにしか使わないため、devDependendiesの方に記載されています。

scriptsはコマンドのエイリアス（別名）です。今までexpo startと実行していたものを"start"コマンドに割り当てています。ここに記載したコマンドはyarn run コマンド名で実行できます。 expo startならyarn run startで実行できるということです。この例だとexpo startの方が短いので効果が感じられませんが、オプションのパラメータが増えた場合や複数のコマンドを連続で実行したい場合など、別名を付けておくと簡単に実行できるようになります。

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

7. tsconfig.json

typescriptの型チェックのための設定ファイルです。

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

以上、空のプロジェクトを作成した際に自動で作られたファイル／ディレクトリを見てきました。

ソースコードのディレクトリを変更する

デフォルトで作られた構成のままだと、App.tsxがプロジェクトルートに置かれています。 今後追加するソースコードもプロジェクトルートに置かれるため、ソースコードの量が少ないうちは良いのですが、ファイル数が多くなってくると見通しが悪くなります。 もちろん、ディレクトリを分けて整理することは可能ですが、一般的にディレクトリは名前順で表示されますので、ソースコードと、ソースコード以外のディレクトリが混在して整列されることになります。
そこで、ソースコードはsrcディレクトリの下にまとめるように設定を変更していきます。

package.jsonの変更

mainフィールドを以下のように修正します。これにより、読み込みの起点がsrcディレクトリの下のApp.tsxに変更されます。

  "main": "src/App.tsx",

ソースコードの移動と修正

App.tsxをsrcディレクトリの下に移動します。

├── src
│   └── App.tsx

そして、App.tsxの中身を以下のように修正します。修正箇所は★の3行です。

import { registerRootComponent } from "expo"; // ★追加
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

function App() { // ★修正
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

export default registerRootComponent(App); // ★追加

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

さて、この状態で再度アプリケーションを起動してみます。expoとemulatorを止めて起動しなおしてみましょう。問題なく表示されますね。

まとめ

• 空のプロジェクトの構成を確認しました。
• 空のプロジェクトではApp.tsxがエントリポイントになっていました
• エントリポイントの位置を変更する方法を学びました

今回はここまで！