こんにちは。 アドベントカレンダー5日目です。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。
↓最初から読み始めたい方はこちらか↓
これまでのおさらい
第1回では、Reactを使った開発環境の構築について学びました。 第2回ではtailwindcssを使ったUI開発、機能が増えるとコードの見通しが悪くなるので、コンポーネント化という手法について第3回で学びました。 第4回では、コードフォーマッターについて学び保存時に自動でコードを整形するようにしました。
今回のはなし
今回は、コードの品質を保つためのツールであるLinterについて学びます。 コードの品質を保つためには、コーディング規約に従ってコードを書く必要があります。 コーディング規約はチームで共有する必要がありますが、それを守るためにはコードを書いているときに規約違反していないかを確認する必要があります。Linterはコーディング規約に従っていないコードを検出してくれるツールです。
第4回で紹介したフォーマッターのPrettierと組み合わせることで、機械的に修正できる部分は修正し、修正できない部分は警告を出してくれるようになります。
Linterとは
Linterとは、プログラミングにおける解析ツールの総称です。 解析ツールを使用することで、プログラミングしている中で関数を呼び出すときに、関数の引数の数が間違っていたり、関数の戻り値を受け取る変数がなかったりします。 そのまま実行してしまうとコンパイルエラーが発生します。
プログラミング言語によっては実行するためのプロセスに手間や時間がかかり、その手間をコードを修正するたびにかけるのは非効率です。 そのため、できるだけ早い段階で問題に気づき修正できるように、プログラムを実際に実行することなく検出できるツールです。
解析ツールは、Visual Studio Code（VS Code）などのエディタと連携させることで、より使いやすくなります。 エディタと連携することで、エディタのコード上に直接フィードバックを表示してくれるため、問題に気づきやすくなります。 問題は、時間が経てば経つほど記憶から薄れ、当時どのような意図で書いたのかを思い出すことやコードを読んで実装を理解する手間がかかります。 何か問題があるのであれば書いた直後に気づき修正することで、思い出す手間や書いたコードを読む手間を省くことで、開発効率を上げることができます。
ESLint
Linterは、プログラミング言語ごとに存在します。そのため、使用しているプログラミング言語ごとにLinterを探す必要があります。 ここからは、いつも通りフロントエンド開発でReactを使っていることを前提に話を進めます。 JavaScript/TypeScriptでよく使用されているLinterにESLint/TSLintというツールがあります。
ESLintのインストール
npm（パッケージ管理ツール）から次のコマンドを実行してインストールできます。
npm init @eslint/config
コマンドを実行したらいくつか質問が表示されます。回答例として参考にしてください。
How would you like to use ESLint?
? How would you like to use ESLint? … To check syntax only ▸ To check syntax and find problems To check syntax, find problems, and enforce code style
How would you like to use ESLint?は、どのようにESLintを使用するかを尋ねています。
To check syntax onlyは、構文チェックのみ実行することを意味します。To check syntax and find problemsは、構文チェックと問題の検出のみ実行することを意味します。To check syntax, find problems, and enforce code styleは、構文チェック、問題の検出、コードスタイルを強制することを意味します。
今回はデフォルト設定であるTo check syntax and find problemsを選択します。
What type of modules does your project use?
What type of modules does your project use?は、プロジェクトで使用するモジュールの種類を尋ねています。
? What type of modules does your project use? … ▸ JavaScript modules (import/export) CommonJS (require/exports) None of these
JavaScript modules (import/export)は、JavaScriptのモジュールを使用することを意味します。CommonJS (require/exports)は、CommonJSのモジュールを使用することを意味します。None of theseは、どちらも使用しないことを意味します。
今回はデフォルト設定であるJavaScript modules (import/export)を選択します。
Which framework does your project use?
Which framework does your project use?は、プロジェクトで使用するフレームワークを尋ねています。
? Which framework does your project use? … ▸ React Vue.js None of these
Reactは、Reactを使用することを意味します。Vue.jsは、Vue.jsを使用することを意味します。None of theseは、どちらも使用しないことを意味します。
今回はReactを使った開発をしているため、Reactを選択します。
Does your project use TypeScript?
Does your project use TypeScript?は、プロジェクトでTypeScriptを使用するかを尋ねています。
? Does your project use TypeScript? ‣ No / Yes
Noは、TypeScriptを使用しないことを意味します。Yesは、TypeScriptを使用することを意味します。
今回はTypeScriptを使った開発をしているため、Yesを選択します。
Where does your code run?
Where does your code run?は、コードがどこで実行されるかを尋ねています。
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection) ✔ Browser ✔ Node
Browserは、ブラウザで実行することを意味します。Nodeは、Node.jsで実行することを意味します。
今回はブラウザで実行することを想定しているため、Browserを選択します。
What format do you want your config file to be in?
What format do you want your config file to be in?は、設定ファイルのフォーマットを尋ねています。
? What format do you want your config file to be in? … ▸ JavaScript YAML JSON
JavaScriptは、JavaScriptのフォーマットを意味します。YAMLは、YAMLのフォーマットを意味します。JSONは、JSONのフォーマットを意味します。
今回はデフォルト設定であるJavaScriptを選択します。
Would you like to install them now?
Would you like to install them now?は、インストールするかを尋ねています。
@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest ? Would you like to install them now? ‣ No / Yes
Noは、インストールしないことを意味します。Yesは、インストールすることを意味します。
必要なパッケージがインストールされるため、Yesを選択します。
Which package manager do you want to use?
Which package manager do you want to use?は、パッケージ管理ツールを尋ねています。
? Which package manager do you want to use? … ▸ npm yarn pnpm
npmは、npmを使用することを意味します。yarnは、yarnを使用することを意味します。pnpmは、pnpmを使用することを意味します。
npmを使用しているため、npmを選択します。
しばらく待つと、インストールが完了します。 インストール完了後に何らかの警告が表示されている場合は、問題なく動いているので現時点では無視してください。
ESLintの設定
ESLintが動き始めると、様々な警告が表示されます。1つ1つ確認して設定を作り込もうとするとそれだけで時間がかかってしまいます。 幸いなことにESLintを使って開発している企業や団体はいくつかあり、有名なところにAirbnbがあります。 Airbnbは、ESLintの設定を公開しているため、それを使うことでESLintの設定を簡単にできます。今回はこの設定を使ってみます。
npm i --save-dev eslint-config-airbnb-typescript
src/.eslintrc.jsを開き、次のコードを記述します。
module.exports = {
...
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
+ "airbnb",
+ "airbnb-typescript"
],
...
}
PrettierとESLintの共存
PrettierとESLintは、一部の機能で同じようなことをしているため、競合してしまいます。
そのため、PrettierとESLintを共存させるための設定が必要になります。
設定は、eslint-config-prettierというパッケージをインストールすることで解決できます。
npm install --save-dev eslint-config-prettier
src/.eslintrc.jsを開き、次のコードを記述します。
1点注意点があります。
"prettier"は、ESLintの設定をPrettierの設定で上書きする必要があるため、最後に記述する必要があります。
module.exports = {
...
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"airbnb",
"airbnb-typescript",
+ "prettier",
],
...
}
おわりに
今回は、コードの品質を保つためのツールであるLinterについて学びました。 コードの品質を保つためには、コーディング規約に従ってコードを書く必要がありますが、その規約に従っているかを常に確認しながら開発を進めるのは非常にエネルギーを必要とします。 Linterを使うことで、コーディング規約に従っているかを自動的に確認ができるので、開発に集中できます。 まだ使ったことがない人は、これを機に使ってみてください。
