簡単なリファクタリング

作業を始める前に、インポートを最適化して簡単なリファクタリングを行いましょう。パート1では、コンポーネントと画面が必要になったときに、それぞれ別の行にインポートしました。アプリの規模が大きくなると、importステートメントが増えてコードが読みにくくなる可能性があります。

importステートメントの数を減らすには、各フォルダにindex.tsファイルを作成し、各フォルダのコンポーネント／画面を一覧表示します。各コンポーネント／画面は名前付きエクスポートとして表示され、1行にインポートできます。これは、「react-native」からViewやTextなどのコンポーネントをインポートするために使用するのと同じ構文です（例：import { View, Text } from 'react-native'）。

Componentsフォルダにインデックスファイルを追加

まず、componentsフォルダーのindex.tsを作成します。

• componentsフォルダに移動し、index.tsという名前の新しいファイルを作成します。これはJSXが含まれていない単純なTypeScriptファイルであるため、拡張子は.tsを使用します。

src/
├── components/
│   ├── Header.tsx
│   ├── VideoCard.tsx
|   └── index.ts
└── App.tsx

• index.tsを開き、componentsフォルダのすべてのコンポーネントにimportステートメントを追加します。
• 各コンポーネントを一覧表示するexportステートメントを追加します。

index.tsファイルは次のようになります。

import Header from './Header';
import VideoCard from './VideoCard';

export {
    Header,
    VideoCard
}

コンポーネントのインポート

次に、新しいインポートアプローチを使用するために、LandingScreen.tsxを更新する必要があります。

• LandingScreen.tsxで、ヘッダーとビデオカードのインポートステートメントを削除します。
• index.tsからコンポーネントを追加するimportステートメントを1つ追加します。componentsフォルダからのインポートを指定するだけで、index.tsファイルがこのフォルダで読み込まれて名前付きエクスポート（Header、VideoCard）が検索されます。

LandingScreen.tsxのimportステートメントは次のようになります。

import React, {useState, useEffect} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {Header, VideoCard} from '../components';

Screensフォルダにインデックスファイルを追加

screensフォルダについても同じ手順を繰り返します。

• screensフォルダにindex.tsという名前のファイルを作成します。

src/
├── screens/
│   ├── LandingScreen.tsx
|   └── index.ts
└── App.tsx

• index.tsを開き、screensフォルダのすべてのコンポーネントにimportステートメントを追加します。
• 各コンポーネントを一覧表示するexportステートメントを追加します。

index.tsファイルは次のようになります。

import LandingScreen from './LandingScreen';

export {
    LandingScreen,
}

画面のインポート

次に、App.tsxのimportステートメントを更新する必要があります。

• App.tsxを開きます。
• LandingScreenのimportステートメントを削除します。
• screensフォルダからLandingScreen画面を追加するimportステートメントを1つ追加します。

App.tsxのimportステートメントは次のようになります。

import * as React from 'react';
import {LandingScreen} from './screens';

• アプリを再読み込みして、すべてが同じようにレンダリングされることを確認します。

このリファクタリングは、それほど大掛かりに見えないかもしれませんが、多くのコンポーネントや画面で構成される複雑なアプリをビルドする際に、各ファイルの先頭のimportステートメント数を減らすことができます。

次へ