
はる
Astroは、高速な静的サイトジェネレーターで、モダンなWeb開発のためのツールです。
今回は、Astroプロジェクトでエイリアスを設定する方法を解説します。
エイリアス設定するとなにがいいのか
エイリアスを使うことで、相対パスを使わずにモジュールをインポートでき、コードの可読性とメンテナンス性が向上します。
2つの設定方法
- astro.config.mjsでの設定方法
- tsconfig.jsonでの設定方法
の2パターンがあります。
TypeScriptを使っている場合は、『astro.config.mjsでの設定方法』ではなく『tsconfig.jsonでの設定方法』で設定しないとエディターによっては記述のエラーが発生するので注意してください。
astro.config.mjsでの設定方法
設定方法
まず、Astroプロジェクトのルートディレクトリにastro.config.mjs
ファイルがあるか確認してください。もしファイルが存在しない場合は、新しく作成してください。
astro.config.mjsファイルに以下のようなエイリアス設定を追加します。
// astro.config.mjs
export default {
// 既存の設定がある場合は、その中に追加してください
vite: {
resolve: {
alias: {
'@components': '/src/components',
'@layouts': '/src/layouts',
'@lib': '/src/lib',
'@functions': '/src/functions',
'@scss': '/src/scss',
'@ts': '/src/ts',
'@types': '/src/types',
'@images': '/src/images',
},
},
},
};
tsconfig.jsonでの設定方法
設定方法
次は、astro.config.mjsでの設定ではなくtsconfig.jsonで設定する場合の方法です。
TypeScriptを使っている場合はこちらを利用します。
プロジェクトのルートディレクトリにtsconfig.jsonファイルがあるか確認してください。
tsconfig.jsonファイルに以下のようなエイリアス設定を追加してください。
{
"compilerOptions": {
// 省略
"baseUrl": "./",
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@lib/*": ["src/lib/*"],
"@functions/*": ["src/functions/*"],
"@scss/*": ["src/scss/*"],
"@ts/*": ["src/ts/*"],
"@types/*": ["src/types/*"],
"@images/*": ["src/images/*"]
}
}
}
動作確認
これで、Astroプロジェクトでエイリアスを使ったインポートができるようになります。
import MyComponent from '@components/MyComponent/MyComponent.astro';
このようにエイリアスを使うことで、
プロジェクトの構成が変わってもインポートパスを簡単に変更でき、
より読みやすいコードが実現できます。