React Native import を絶対パス（エイリアス）で参照する設定
はじめに
Reactで開発していると、コンポーネントや関数をインポートする際のパスの指定に苦しむことがよくあると思います。
相対パスで指定する場合、下記のように「..」がたくさん並んで読みにくくなります。
import { Component } from '../../../components/ComponentA'
これは単に読みにくいだけでなく、ファイル構造を変更した際にパスの修正が難しくなるという大きな問題を孕んでいます。
この問題を解決するために「＠」をプロジェクトルートからのエイリアスに設定します。
すると、下記のように常にimportは絶対パスで参照することができます。
import { Component } from '@/src/components/Component'
わかりやすいですね。
これならファイル構造を変更してもパスの修正は少なくて、直感的で苦しむことはなさそうです。
しかし、React Nativeでやろうとすると、ひと工夫必要なんです。
この記事では、React Nativeでパスエイリアスを設定する方法を紹介します。
セクション１： tsconfig.jsonの設定
TypeScriptのコンパイラ設定ファイル、tsconfig.jsonを下記のように設定します。
この設定により、TypeScriptのコンパイラがエイリアスパスを解決できるようになります。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
プロパティについて
- baseUrl: パス解決の基準となるディレクトリを指定します。
- paths: エイリアスのマッピングを定義します。
セクション2: metro.config.jsの設定
Metro bundler(React Nativeのビルドツール）もパスエイリアスを認識できるようにmetro.config.jsを下記のように設定します。
const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const config = {
resolver: {
extraNodeModules: {
'@': path.resolve(__dirname), // プロジェクトルートを指定
}
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
プロパティ、メソッドについて
- resolver.extraNodeModule: 「@」というエイリアスがプロジェクトルートを意味するようにマッピングしています。
- path.resolve(__dirname): プロジェクトルートの絶対パスを取得
- margeConfig: デフォルト設定と自分の設定を結合（デフォルト<自分の設定)
セクション3: babel.config.jsの設定
Babelのトランスパイル時にもエイリアスを解決できるように設定します。
- プラグインのインストール
npm install --save-dev babel-plugin-module-resolver
- babel.config.jsの設定
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'@': '.',
},
},
],
],
};
プロパティについて
- root: モジュール解決のルートディレクトリを指定します。
- alias: エイリアスとディレクトリをマッピングします。
キャッシュをクリアして起動
全ての設定が完了したら、キャッシュをクリアして開発サーバーを再起動します。
npx react-native start --reset-cache
Metro bundlerのキャッシュがクリアされ、新しい設定が適用されます。
設定が正しくできていれば、以下のようにimport文を書き換えられます。
// 変更前：相対パス
import { Avatar } from '../../../components/common/Avatar';
import { settings } from '../../../../config/settings';
// 変更後：エイリアスを使った絶対パス
import { Avatar } from '@/components/common/Avatar';
import { settings } from '@/config/settings';
まとめ
React Nativeでのパスエイリアスの設定は、複数の設定ファイルを作成する必要があります。
少し大変ですが、この設定により、コードの可読性、メンテナンス性が向上すると思います。
相対パスの苦しみはできるだけ初期段階で潰しておきたいですね。
Discussion