この記事は JavaScript Advent Calendar 2022 17日目の記事です。

はじめに

普段のコーディングにおいて、コードを書く力は当然としてフォーマッタやテストなど「関連ツールが充実しているかどうか」はかなり重要だと思っています。
私自身、プロダクト開発に参画した際、まずは上記のようなツールの整備からやることも結構ありました。

最近は言語をインストールすると標準機能としてフォーマッタやテストがあるものも多くなってきました。
ただ、フロントエンド (JavaScript/CSS) においてはそのような標準機能はほぼ無いため、プロダクトによって利用するツールを整備することになります（先日 npm がサポートされた Deno を使うと標準で色々ついてきます）。
必要なツールはプロダクトによってまちまちではあるものの、JavaScript 開発におけるコードチェックツールは大抵 eslint が使われている認識です。
そこで今回は、eslint のルールで私が良く使っているものを、理由とともにいくつかご紹介したいと思います。

導入したルール

eqeqeq

厳密等価演算子を利用するよう強制します。
JavaScript や TypeScript の場合 null/undefined をまとめてチェックしたい場合に != null のように書くことがありますが、そういったケースについても細かく制御できます。 

const a = 1
const b = true;
if (a != b) { // !== を使わないとエラーになる
    console.log('a と b は等しくない')
}

if (a != null) { // こういう例外にしたいケースにも対応できる
    console.log('a は null/undefined ではない');
}

import/order

import の並び順を特定のルールで強制します。
色々細かく制御できますが、私はパスをアルファベット昇順で並べるようにすることが多いです。
このルールは eslint-plugin-import を導入することで有効化できます。
上記ライブラリには他にもいろいろなルールがあるので、興味がある方はぜひ使ってみてください。 

import Header from 'app/components/Header.tsx';
import { format } from 'app/utils/format';
import Footer from 'app/components/Footer.tsx';
import Navigation from 'app/components/Navigation.tsx';

↓

import Footer from 'app/components/Footer.tsx';
import Header from 'app/components/Header.tsx';
import Navigation from 'app/components/Navigation.tsx';
import { format } from 'app/utils/format';

prefer-template

文字列と変数を結合する際にテンプレートリテラルの利用を強制します。
JavaScript では + は結合する値によっては異なる挙動をするので（文字なら結合、数値なら加算など）、バグの混入防止やレビュー負荷を下げる意味でも活用しています。 

const c = 'hoge';
const d = 123;

console.log('値は' + c + d + 'だよ'); // エラーになるので `値は${c}${d}だよ` に修正する必要がある

上記の例だとあまりメリットを感じられないかもしれませんが、以下のように計算式を含む場合はかなり見やすくなります。 

const e = 123;
const f = 456;

console.log('値は' + (e + f) + 'だよ'); // -> console.log(`値は${e + f}だよ`);

quote-props

オブジェクトのプロパティ名を引用符で囲むかどうかを制御出来ます。
このルールも色々細かく制御できるんですが、私はキーによって引用符の有無が変わるのがあまり好きではないので、常に引用符ありとすることが多いです。 

const obj = {
    "foo": 1,
    bar: true,
}

↓

const obj = {
    "foo": 1,
    "bar": true,
}

unused-imports/no-unused-imports

未使用のインポートを検知してくれます。
eslint は fix オプションをつけて実行すると可能な限り自動でフォーマットしてくれますが、このライブラリを入れることで未使用インポートはまとめて削除できます。 

import { HOGE } from 'app/utils/const'; // 使っていないため、残ったままだとエラーになる
import { getDate, parseDate } from 'app/utils/date'; // 同じ from からのインポートでも、使っていないもののみ検知・削除できる

console.log(getDate());

なお、eslint-plugin-unused-imports というライブラリをインストールする必要があります。

unused-imports/no-unused-vars

前述の eslint-plugin-unused-imports ライブラリに存在するルールの1つで、未使用の変数定義を検知してくれます。
eslint は標準でも no-unused-vars というルールがありますが、前述の no-unused-imports 同様自動で削除をやってくれるのがありがたいところです。
このルールを有効化する際は、重複してエラーが出力されないよう標準の no-unused-vars を無効化する必要があります。

番外編（prettier）

prettier は eslint とは異なり、コードチェックはしてくれず、あくまで整形に特化したツールです。
こちらは CSS/HTML/Markdown/Yaml など、色々な言語に対応しており、エディタや IDE でもプラグインをインストールすることで「コード保存時に自動で整形」といったことができます。
以下は設定ファイルの例です。 

// .prettierrc.js
module.exports = {
  singleQuote: true, // クォーテーションはシングルを使う
  semi: true, // 行末にセミコロンあり
  trailingComma: "all", // 末尾カンマは常にあり
};

まとめ

いかがだったでしょうか。
今回は JavaScript 全体で使えそうなルールを紹介しましたが、TypeScript/Vue/React など特定のツールやライブラリを使う場合などは必要なルールが変わってきます。
まだまだ便利なルールはあるので、いずれ続編や他のチェックツールについても書きたいと思います。
開発スタイルに合わせて必要なものを組み合わせていけると良いですね。