🗂

javascriptでimport文周りを綺麗に保つTips

2023/04/10に公開

JavaScript

はじめに

javascriptのimport文まわり、何も対策しないとごちゃごちゃになりがちですよね...
こちらの記事ではimport文周りを綺麗に保つのに役立つtipsをいくつか紹介します。

ソートをする

import文をソートすることで、コードの見た目が整い、可読性が向上します。ソートをしたくない理由がある場合以外は基本的にソートをしましょう。

before

import axios from 'axios';
import MyComponent from 'components/MyComponent';
import React from 'react';
import { myFunction } from 'utils/functions';

after

// 外部のライブラリ
import React from 'react';
import axios from 'axios';

// プロジェクト内のコード
import MyComponent from 'components/MyComponent';
import { myFunction } from '/utils/functions';

また、ソートは手動でやるのではなく、自動整形ツールを使うのがおすすめです。
以下に筆者がよく使用するツールを挙げます。
詳細については公式リポジトリを参照しましょう。

prettier

prettier-plugin-sort-imports
Github: https://github.com/trivago/prettier-plugin-sort-imports

eslint

eslint-plugin-import
Github : https://github.com/import-js/eslint-plugin-import

使用しないモジュールはimportしないようにする

至極真っ当な話ですが、使用しないモジュールをインポートする必要はありません。
しかしプロジェクトのコードをメンテナンスしていると、実装当初は必要だったが、その後不要になったモジュールがインポートされたままになることがあります。使用していないモジュールをimportすると、可読性の低下やバンドルサイズの増加を招く恐れがあるため使用しないモジュールはimportしないようにしましょう。

こちらについてもソート同様、自動整形ツールで検出することができます。

eslint

eslint-plugin-unused-imports
Github : https://www.npmjs.com/package/eslint-plugin-unused-imports

コメントを使用したグループ分け

import文をグループ分けする際に、コメントを使用して各グループを明示的に示すことで、モジュールがどのようなカテゴリに属しているのかを一目で理解でき、コードの可読性が向上します。

// 外部ライブラリ
import React from 'react';
import axios from 'axios';

// component
import HeaderComponent from 'components/HeaderComponent';
import FooterComponent from 'components/FooterComponent';

// utils
import { formatDate } from 'utils/dateUtils';
import { calculateTotal } from 'utils/calculateTotal';

// style
import 'styles/main.css';

絶対パスと絶対パスを適切に使い分ける

絶対パスと相対パスを適切に使い分けることで、コードの可読性と保守性が向上します。どちらの方法を選択するかは、プロジェクトの規模やファイル構造によって異なります。

絶対パスの利点

ファイル構造が変更されても、インポートが正常に動作する。
インポートパスが短く、読みやすい。

import MyComponent from 'components/MyComponent';

相対パスの利点

プロジェクトの設定が不要で、即座に使用できる。
ファイル間の関係を直感的に理解できる。

import MyComponent from './MyComponent';

個人的な意見としては、大規模なプロジェクトやチーム開発においては、コードの可読性や保守性を向上させるという観点で絶対パスを使用するのがベターだという印象がありますが、ファイル構造が単純で、ファイル間の関係が直感的に理解できる場合には、相対パスを使用することもありだと思います。

再エクスポート(re export)を使用する

再エクスポートとは、モジュールからエクスポートされたものを、そのまま別のモジュールとしてエクスポートする方法です。このテクニックを使用することで、import先のモジュールでのimport文を短く記述することができます。

再エクスポートに関して詳しくはこちら

fileA.jsとfileB.jsからそれぞれモジュールをエクスポートしている場合

// fileA.js
export const functionA = () => {...};

// fileB.js
export const functionB = () => {...};

before

import functionA from './fileA';
import functionB from './fileB';

以下のようにindex.js で fileA.js と fileB.js のエクスポートを再エクスポートすることで。importの記述をまとめることができます。

// index.js
export * from './fileA';
export * from './fileB';