【React】jsconfig.jsonファイルを作成して絶対パスでimportをできるようにする

今回は、Reactでアプリケーションを構築する際に使ってみると便利な設定の一つをご紹介します。

なお、今回紹介する設定はReact Create Appでプロジェクト構築を行った場合に利用できる設定となります。

webpackを利用するNext.jsやその他フレームワークなどは設定方法が異なりますのでご注意ください。

アプリケーション構築中のジレンマ

ファイルのネストが複雑でないシンプルなアプリケーションであれば、そこまで気になることはないと思うのですが、様々な機能をもつアプリケーションであれば自ずとファイルの配置が深くなり、コンポーネント内でモジュールファイルや他コンポーネントファイルをimportする際に「../../../~」というようにどんどん参照が深くなっていってしまうことに不便さを感じるようになると思います。

インストールしたライブラリのように「import { React } from ‘react’;」というようにどの階層でもシンプルに記述できるようになるといいですよね。

今回設定するjsconfig.jsonの設定により、指定したパスをスタート地点としてimportを実行できるようになります。

設定方法

jsconfig.jsonファイルの作成

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

上記を記述したjsconfig.jsonという名前の設定ファイルをドキュメントルート直下に配置します。
やることはこれだけです！

配置した設定を適用するためには、サーバを再起動することでこの設定ファイルを読み取ってくれます。

簡単に設定内容について説明すると、
baseUrlの設定パスが絶対パスのスタート地点となります。
なので、上記の設定であれば、どの階層のファイルでimportを実行してもsrcフォルダからスタートしてファイル参照の記述を行えるようになります。

次にincludeの設定は、compilerOptionsの設定を適用するパスを指定します。
この設定のように[“src”]とすることで、srcフォルダ配下にある全ファイルに対して設定を適用するよう指定しています。

このincludeの設定は必須ではありませんが、includeの設定を定義しない場合はプロジェクト全体に設定が適用されてしまうため、予期せぬファイル参照の失敗につながってしまう可能性がありますので指定しておいた方が無難です。

コンポーネントファイル内でのimport

jsconfig.jsonファイルの設定が適用された状態になれば、srcフォルダ配下のコンポーネントファイルは以下のようなパス指定でモジュールや他のコンポーネントをimportできるようになります。

import { moduleA } from 'modules/moduleA';
import { ChildComponent } from 'components/ChildComponent';

まとめ

というわけで今回は、React Create Appで構築したReactプロジェクトで使える絶対パスの設定方法についてご紹介しました。

今回の設定でsrcフォルダ配下の全ファイルで絶対パスでのimportができるようになりますので、ファイル階層の変更にも対応しやすくなります。