【Next.js+TypeScript】import @で階層が深いモジュールのインポートを簡潔に書く方法【Module Path Mapping】
目次
こんにちは。
今回はディレクトリの構造が複雑になったNext.js+TypeScriptのアプリケーションにおいて、モジュールインポートを簡単に書く方法をまとめておきます。
TypeScriptによる解決策なので、Next.jsでなくとも使える方法です。
【結論】tsconfig.jsonを編集する
以下のようにtsconfig.jsの中に書きます。pathsの中身は自分のディレクトリ構造に応じて編集すればOKです。
tsconfig.jsonの書き方
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/components/*": ["components/*"],
"@/lib/*": ["lib/*"],
...
}
},
...
}
importする側の使用例
ルートディレクトリから見てcomponents/hoge.tsからHogeをimportする場合
import { Hoge } from "@/components/hoge"
今までの問題点 : 階層が深いとimport {} from '../../' が長くなってしまう
大規模なアプリを作っていると、関数やコンポーネントはモジュールとして別ファイルに切り離すのが普通です。これはES2015からJavaScriptの仕様に入ったES Modulesと呼ばれる仕組みで容易になりました。ES ModulesはJSから別のJSファイルの読み込みを可能にするexportやimport構文によるモジュールの仕組みです。
参考 : MDN Web Docs | JavaScript モジュール
個々の役割を持つモジュールファイルはcomponentsやlibなど役割に応じて別のディレクトリに置くことで、構造の見通しがよくなり、管理・編集がしやすくなります。
しかし、ディレクトリの階層が深くなっていくにつれ、他のディレクトリからimportしたい場合、以下のようにimportのパスが長くなってしまいます。
import { Hoge } from "../../../../components/hoge"
これだと、新たにモジュールをインポートしたい場合、非常に面倒で読みにくいです。別の階層に同じ名前のディレクトリがある場合は、間違えてインポートしてバグになりかねません。
tsconfigのbaseUrlとpathsでインポートパスを簡潔に書く
そこでTypeScriptのモジュール解決にはPath mappingという機能を使うと、パスを短く簡潔に書くことができるようになります。
tsconfig.jsonのコンパイラオプションに、以下のような書き方で使用します。
{
"compilerOptions": {
"baseUrl": ".", // pathsを書く場合は必須
"paths": {
"hoge": ["components/model/hoge"] // baseUrlを基点として相対パスで書く
}
}
}
参考 : TypeScript | Module Resolution
baseUrl
pathsの基点となる相対パスを書きます。
.はカレントディレクトリで、つまりこの場合tsconfig.jsonが置かれているディレクトリパスを指します。
すべてsrcというディレクトリを基点にしたい場合は、./srcとします。
paths
ここにインポートパスのマッピングを書くことができます。baseUrlを基点とした相対パスで書きます。
"paths": {
"@/components/*": ["components/*"],
}
*はワイルドカードで、すべてのファイル・ディレクトリを指します。
@などの目印をつけておくことで、importするファイルを読むときに「tsconfigで指定したルートディレクトリからインポートしているんだな」とわかるよう明示できます。
import { Hoge } from "./components/hoge" // 同一ディレクトリを見ている
import { Hoge } from "@/components/hoge" // ルートディレクトリを見ている
（そもそも、こんなにややこしい構成・命名にしないのが、第一だと思います）
まとめ
というわけで今回はディレクトリ階層が深くなってimportパスが長くなってしまった場合の対処法をまとめてみました。
tsconfigの設定のひとつとして、baseUrlとpathsを使うことで、インポート側にスマートにパスを書くことができるようになります。
プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
