Astroプロジェクトでエイリアスを設定する方法

はる

Astroは、高速な静的サイトジェネレーターで、モダンなWeb開発のためのツールです。
今回は、Astroプロジェクトでエイリアスを設定する方法を解説します。

エイリアス設定するとなにがいいのか

エイリアスを使うことで、相対パスを使わずにモジュールをインポートでき、コードの可読性とメンテナンス性が向上します。

2つの設定方法

• astro.config.mjsでの設定方法
• tsconfig.jsonでの設定方法

の２パターンがあります。

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';

このようにエイリアスを使うことで、
プロジェクトの構成が変わってもインポートパスを簡単に変更でき、
より読みやすいコードが実現できます。