まだ相対パスで消耗してるの？

タイトル、煽りでスイマセン。

今回は↓これ↓の話です。

hoge.js

import SomeComponent from ../../../components/hoge/fuga

相対パスのimportです。
"../../"の数がいちいちわからなくなるのって私だけですかね？
また、ファイルを別のフォルダに打ちしたときなんかにエラーが出ることもあったりして、
相対パス、書き換えるの面倒くさいですよね。

今回はそんな悩みを絶対パスにして解決してしまおうという記事です。
題して、「絶対パスでReactを書こう！」
（よく考えたら題してないな）

内容に間違い等がございましたら、ご意見・ご指摘のほど宜しくお願いいたします。

#前提：やり方は意外に簡単だよ！という話
調べたら色んなやり方が出てきましたが、一番手っ取り早い方法をご紹介します。
以下は概要。

• webpack.config.jsonは使いません。
• .babelrcは作りません。
• ts.config.jsonを使います。
• typescriptじゃなくてもOKです。

素のjavascirpt(typescriptじゃないという意味で素)でもts.config.jsonが使えるというのは、私も今回初めて知りました。
以下の記事が大変参考になったので貼っておきます。感謝！
https://qiita.com/terrierscript/items/a9826bc58d550d1b2764
また公式ドキュメントも先に貼っておきますのでお急ぎの方はこちらをご参照ください。
https://create-react-app.dev/docs/importing-a-component/#absolute-imports

では早速、方法をご紹介していきます。

#step① tsconfig.jsonを作る
プロジェクトのroot(package.jsonなどがある場所)にts.config.jsonを作成します。
npx typescript --initして下記のように設定してください。
（下記はhttps://create-react-app.dev/より引用。）

tsconfig.json

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

自分は下記のように設定を加えています。

tsconfig.json

{
  "compilerOptions": {
    "incremental": true,
    "target": "es5",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "jsx": "react",
    "isolatedModules": true,
    "strict": true,
    "baseUrl": "src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "build", "scripts", "functions"]
}

なおts.config.jsonの書き方については、下記を参考にさせていただきました。
https://usefuledge.com/pb_00009_tscconfig_json.html
自分はこの辺りの設定にあまり詳しくないので、「ここがおかしい」とか「こうした方がいいよ」というのがございましたら、ぜひぜひコメント欄にお願いいたします。

ちなみに"allowJs": true”というやーつは、名前の通り「TypeScriptやなくても許してやりまっか〜」という意味なので、JSに段階的にTSを導入していきたい方は加えておくといいかもしれません。

#step② TypeScriptを入れる
素のJSでtsconfig.jsonを作成すると、TypeScriptじゃないのにtsconfigがあるよ！
というような趣旨のエラーがでるので、その案内に従ってTypeScriptを入れてください。
具体的に書くと、
”It looks like you're trying to use TypeScript but do not have typescript installed.Please install typescript by running yarn add typescript”
とお叱りを受けるので、npm install --save-dev typescriptでおkということです。
とはいえ、拡張子をtsxにしたり、全部anyにして無理やりTypeScript化する必要はありません。
ただインストールするだけです。
(ts入れて使わないならjsconfig.jsonで良くね？という話は冒頭でご紹介した記事を御覧ください。)

#結果：絶対パスで書けるようになる
例

hoge.js

import AbsoluteImportComponent from components/hoge/fuga
import RelativeImportComponent from ../components/hoge/hoge

絶対パスで書けるようになります！意外と簡単でしたね。
絶対パスでしか書けなくなるのではなく、どうやら両方いけるみたいです。

#まとめ
絶対パスを使うとimportがむっちゃすっきりするよ、という話でした。
最後まで読んでいただいてありがとうございました！