リンター・フォーマッターを理解する

リンターとフォーマッターとは？

リンターとは？
リンターとはコードの品質チェックを行うツールで、非推奨の構文の使用や命名規則違反などを検知してくれます。

フォーマッターとは？
コードの体裁を整えるツールです。例えば、インテンド、改行、括弧の位置などを自動修正してくれます。

主な役割の違いとしてはリンターは報告をしてくれるのに対し、フォーマッターはコードの修正をしてくれます。

リンターやフォーマッターを使うメリットって？

「リンターやフォーマッターを導入すると、コーディングのやり方に制約が加わってしまい煩わしくない？」と思ったりしますが、以下のようなメリットがあります。

1.コードの品質向上
セキュリティ上の脆弱性を検出したり、ベストプラクティスに沿ったコーディングを促進したりと、一貫性が保たれることで保守性が高い品質の高いコードを作成できます。

2.チーム開発の効率化
人のコードを読むのって大変ですよね、、笑
僕は自分のコードですら2、3日経つと「このコードはどういう処理をしているんだっけ？」となってしまうのに、他人のコードを読むとなるとその時間がさらに倍以上かかってしまいます。
このような状況は多くの開発者が経験する共通の課題だともいますが、特に大規模プロジェクトでチームメンバーそれぞれが独自のコーディングスタイルを持っていると、コードの解読に余計な時間がかかってしまい本来の開発に時間を割くことができなくなってしまいます。
そこでリンターやフォーマッターを導入することで、コーディングスタイルが統一されることでコードリーディングの時間を短縮できます。

どうやって導入するの？

メリットを理解したところで、じゃあ実際にリンターやフォーマッターを導入するにはどうしたらいいのか、その方法を調べてみました。

リンターとフォーマッターの選定
リンターやフォーマッターもいくつかの種類がありどれを使おうか迷ったので、フロントエンド開発でよく使われている構成を調べてみると、以下の構成がフロントエンド開発でデファクトスタンダードとなっているようですので、今回はこの構成を導入してみることにしました。
・リンター　ESLint
・フォーマッター　Prettier

導入手順
以下のclaude3.5に教えてもらった以下の導入手順に沿って最小構成で導入してみます。

1. 最小構成のセットアップ手順

1
# 1. プロジェクトの作成と移動
2
mkdir my-frontend-project
3
cd my-frontend-project
4

5
# 2. プロジェクトの初期化
6
npm init -y
7

8
# 3. 必要な最小限のパッケージをインストール
9
npm install --save-dev eslint prettier eslint-config-prettier

2. 設定ファイルの作成

.eslintrc.json

1
{
2
  "extends": [
3
    "eslint:recommended",
4
    "prettier"
5
  ],
6
  "env": {
7
    "browser": true,
8
    "node": true,
9
    "es6": true
10
  },
11
  "rules": {
12
    "no-unused-vars": "warn",
13
    "no-console": "warn"
14
  }
15
}

.eslintrc.json

1
{
2
  "semi": true,
3
  "singleQuote": true,
4
  "tabWidth": 2,
5
  "printWidth": 80
6
}

3. package.json にスクリプトを追加
// .eslintrc.json

1
{
2
  "scripts": {
3
    "lint": "eslint .",
4
    "lint:fix": "eslint . --fix",
5
    "format": "prettier --write \"**/*.{js,jsx,json}\""
6
  }
7
}

これで最小構成でリンターとフォーマッターを導入することができました！

実際に使ってみる

初期設定が完了しているので、いよいよ実際に使ってみます。 今回は以下のsample.jsというファイルを作成して、そこにわざと不完全なコードを書いてみます。

動作確認用ファイルの作成

1
# srcディレクトリとテストファイル作成
2
mkdir src
3
touch src/example.js

example.js

1
// わざと整形されていない状態で書く
2
var message="Hello,    World!"
3
console.log(message)
4

5
function test(  ){
6
    return    true
7
}

リンターの実行

1
npm run lint

おお！すると以下のようにちゃんとエラーが出てきました！

1
MacBook-Pro:my-frontend-project inouemasahiro$ npm run lint
2

3
> my-frontend-project@1.0.0 lint
4
> eslint .
5

6

7
/Users/inouemasahiro/Desktop/my-frontend-project/src/example.js
8
  3:1   warning  Unexpected console statement      no-console
9
  5:10  warning  'test' is defined but never used  no-unused-vars
10

11
✖ 2 problems (0 errors, 2 warnings)

警告文に沿って修正してみると以下のようにちゃんと警告も消えてますね！

1
MacBook-Pro:my-frontend-project inouemasahiro$ npm run lint
2

3
> my-frontend-project@1.0.0 lint
4
> eslint .

フォーマッターの実行

1
npm run format

続いてフォーマッターを実行すると、 example.js

1
// わざと整形されていない状態で書く
2
var message = 'Hello,       World!';
3
console.log(message);
4

5
function test() {
6
  //ここのスペースはちゃんと整形されている
7
  return true;
8
}

Hello, Worldの間が詰められていないので 「あれ、、フォーマッター動いていない？」と思ったのですが、returnの前後のスペースがちゃんと整形されていることは確認できました。
hello worldは文字列リテラルなので、その間のスペースは整形しなくてもいいという設定になっているのですかね🤔
ここら辺の規則も設定できそうなので、今後色々調べながら自分好みの設定にしてみたいと思います。

• Animation Presence Widget
• Shared Animation Layout