React×Viteでエイリアスの設定をして絶対パスでモジュールインポートできるようにする(VSCode使用）

2024/1/2 2024/1/5 プログラミング, 制作知識

新年早々の地震ということで、元旦から北陸は大変なことになっていますが、お見舞い申し上げます。

さて、元旦から割とコードを書くことができている2024年なんですが、元旦は昨年G’s ACADEMYの卒業制作で制作していたものについて、リファクタリング（コードの書き直し・整形）を行なって過ごしました。

今見返してみると、本当ドタバタの中で進めていたんだな…というのがコード越しにわかる状態でした。色々な設定省いているし、コード1ファイルにまとめて書いてるところもちらほらあるし….

ということでリファクタリングの最中で行なった、React×Viteでエイリアスの設定をして絶対パスでモジュールインポートできるようにする設定方法についてブログに残しておきたいと思います！

1 絶対パスでモジュールインポートするとどういう記述形式になる？？
2 絶対パスでモジュールインポートができるようにするための設定
- 2.1 Vite.config.js(Vite.config.ts）を編集する
- 2.2 jsconfig.json(tsconfig.json)を触ってVSCodeで予測変換ができるように
3 まとめ

絶対パスでモジュールインポートするとどういう記述形式になる？？

この記事のゴールとしては、以下の形式で各モジュールをインポートできるようにする、というものになります。

import FileUpload from "@/components/home/FileUpload";

特定のモジュールをimportする際、相対パスで目的のモジュールを指定してimportしてもいいのですが、Reactなどのプロジェクトの場合、登場するファイル数が多くなるのがほとんどです。

こういったケースの場合、絶対パスで指定した方が目的のファイルの位置がパッとわかって可読性が向上するというのが僕の考えです。

可読性が高まると、全体像が把握しやすくなったり、目的のファイルが見つけやすくなったり、仮にファイル構造を変更する際などのリファクタリングをするにも作業がしやすくなったり…

明らかに相対パスよりも絶対パスの方がメリットの方が多いかなって思います！

絶対パスでモジュールインポートができるようにするための設定

さて、ここからは絶対パスでモジュールインポートができるようにするための設定を見ていきます！

Vite.config.js(Vite.config.ts）を編集する

まずは、Vite.config.js(Vite.config.ts）を編集します。以下のようなコードの状態にします！

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

重要な部分としては「alias」と書かれた部分です。

これは要するに「ファイル読み込みのパスを指定するときに@と書いたら/srcディレクトリを起点にしてパスを指定するよー」という意味を表しています。

例えば、

@/test.jsx

と書いた場合は、srcディレクトリの中にあるtest.jsxファイルを読み込みする、という意味になります。

これで、基本的にはOK！

jsconfig.json(tsconfig.json)を触ってVSCodeで予測変換ができるように

VSCodeを使っている場合は、VSCodeの予測変換を駆使して「@」と記述したらsrcディレクトリから数えたパス指定の予測変換が出てくる状態を作っておくと便利です！

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/": ["src/"],
      "@/components/*": ["src/components/*"]
    }
  },
  "include": ["src/**/*"]
}

上のような感じで、jsconfig.json(tsconfig.json。いずれにせよファイルがない場合は作成する）の中のcompilerOptions->pathsのところに、

      "@/": ["src/"],
      "@/components/*": ["src/components/*"]

などのショートカットを指定してあげましょう！

（使用するディレクトリの文だけ作ってあげると便利だと思います）

これでVSCodeでパスを指定する際に、エイリアス設定に基づいたパスの指定ができるようになりますし、その際に便利な予測変換機能を使うことができるようになります！

まとめ

ということで、今回はReact×Viteでエイリアスの設定をして絶対パスでモジュールインポートできるようにする(VSCode使用）ための設定の記事を書きました！

他の技術でも応用が効く（Vueなど）と思いますので、設定して快適な開発をしましょう！

arrown39