Expo で絶対パスを使って import できるようにする

Expo を使って React Native アプリを作成する際に、コンポーネントの import を行う際、 デフォルトの状態では以下のように相対パスで指定することになります。

import { Header } from "../../Header"

通常の状態だと絶対パスを使って指定できないため相対パスで指定する必要があります。
ディレクトリの階層が浅いとそれほど気にならないですが、大きなソースコードになった場合や、import が増えてきた時に見通しがつきにくくなります。

今回は Expo を使用した React Native アプリについて、import の時に絶対パスを利用できるようにする方法を紹介します。

概要

• babel のプラグインをインストール
• babel.config.js にパスの定義
• tsconfig.json にパスの定義
• 応用: パスのエイリアスを複数登録

babel のプラグインをインストール

babel-plugin-module-resolver というプラグインをインストールします。いつも通り npm でインストールしましょう。

npm install --save-dev babel-plugin-module-resolver

babel.config.js にパスの定義

babel の設定ファイルにプラグインの追加と設定を記載します。 alias として src を追加しています。今回のプロジェクトでは基本的なプログラムは src/ 以下に入っているので、そこを絶対パスの開始点にします。

module.exports = function (api) {
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [        "module-resolver",        {          alias: {            src: "./src",          },        },      ],    ],
  };
};

tsconfig.json にパスの定義

以下を TypeScript の設定に追加します。 baseUrl と使いたい絶対パスのエイリアスを記述します。babel.config.js の内容と合わせる必要があります。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"],
    }
  }
}

上記を対応することで、絶対パスでの指定が行えるようになりました。 src から始める必要がありますが階層が増えた場合でも../ で何度も遡るよりはだいぶわかりやすくなります。

import { Header } from "src/components/atoms/Header"

応用: パスのエイリアスを複数登録

上記の応用として、エイリアスは複数登録できます。開始点となるベースのディレクトリ以外にも、よく使うアセットとかのパスを登録しておいてもいいですね。

babel.config.js

module.exports = function (api) {
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {            src: "./src",            asset: "./src/asset",          },        },
      ],
    ],
  };
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"],      "asset/*": ["./src/asset/*"],    }
  }
}

上記設定を追加すれば、直接 asset を指定できるようになります。 ベースとなるディレクトリが 1 つあれば、そこから指定できるのでそれほど便利でも無いですが、何度も指定するのであれば用意しておくと快適になります。

import { Header } from "src/components/atoms/Header";
import { Icon } from "asset/Icon";

おわりに

他言語や React の開発経験などから、やっぱり絶対パスで指定できる方が便利だと感じることも多いです。

ディレクトリの設計を見直すことで、相対パスでの指定でも便利に開発できるのですが、どちらも使えるようにしておいて損することは無いですよね。

大きく遡って model を import しなければならない時は絶対パス、同じ要素のコンポーネントを import する場合は相対パスなど、ルールを決めてもいいですね。 もちろん全部絶対パスで指定しよう、というのもありです。チームで設計ルールを決めて取り組むようにしましょう。