YouTubeに公開した動画「独学エンジニアほどlintを使うべきだ！ESLintとJavaScriptで解説するlintの必要性」の台本です。
動画の補足にご活用ください。
今日はlintを説明しよう！
Lintってのは静的解析ツールの一種で、
要は「汚ないコードを自動的に掃除してくれる」
自動お掃除ロボット、
つまりルンバみたいなもんだ。
今日はlintが何をしてくれるものなのか、
そして、どうしてlintを使うといいのか説明しよう。
Lintと一口に言っても、
言語ごとにいろんなlintが存在するから
今日は多分みんなが一番よく
使うであろう言語JavaScriptのlint、
ESLintについて説明しよう。
まず、lintは何をしてくれるのか。
一言で言うと、
エンジニアのミスを掃除してくれる。
例えば、
importしてるのに使っていないモジュールとか、
定義したのに使われていない変数がコードに残ってる。
これは初歩的なミスだ。
使われないコードを残しておくと、他の人がコードを見た時に
「あれ、これは何か意図があって残してるのかな？」
と混乱しちゃうだろ。
それに、ただのメモリの無駄遣いだ。
こういうミスをlintが指摘してくれる。
「これ使われてませんよ」
と教えてくれるから
使われないコードが残ったままにならない。
その他にも
いろんなミスを教えてくれる。
Defaultケースを書き忘れたswitchとか、
書き方を間違えた正規表現とか、
とにかく人がやりがちなミスを
全部勝手に掃除してくれる。
さてここまでの説明を聞いて
「あれ、それだけ？
それだけのためにlint使うの？
俺はルンバなくても困らない」
って顔をしている人がいそうだな。
いいかい、
初歩的なミスを舐める奴はだめだ！
特にチーム開発の現場ではNG、
BIG NOだ。
なぜか説明しよう。
よくあるチーム開発の現場では、
書いたコードを別の誰かがレビューする事が多い。
さて、コードレビューしてくれるありがたーい人を
簡単に怒らせる方法がある。
わかるかな？
そう、
初歩的なミスを何個も仕込む事だ。
使わない変数をたくさん定義して、
意味のないconsole.logを大量に残して、
到達不可能なコードをしこたま書いておけ。
Switchにはデフォルトを書かず、
意味のないcatch文を大量に作り、
非同期処理をしない関数に
意味もなくasyncをつけておくんだ。
いわゆるゴミコードってやつだ。
ゴミコードを大量に詰め込んで、
レビューに出しまくれ。
ただでさえ忙しい相手に、
初歩的なミスを浴びせ続けるんだ。
何度でもイージーなミスを繰り返せ。
１週間もすればどんな人だってブチ切れる。
レビューしてくれる人を怒らせたくない？
じゃあlintを入れるのがオススメだ。
Lintさえ入れておけば、
こういう初歩的なミスを
自動的に指摘して、
物によっては勝手に直してくれる。
機械でもわかるような初歩的なミスを減らせば、
人間様じゃないとわからない
高度なミスを発見する時間に使える。
それだけコードレビューの質も上がるし、
時間効率が高まるよな。
これがlintを使うべき理由、
その１だ。
初歩的なミスを減らし、
人間様の頭を使う時間を生み出す。
これだけじゃないぞ。
Lintは初歩的なミスの他に、
いわゆる良いコードの書き方も教えてくれる。
例えJavascriptだとコールバック関数をよく使うが、
最近のJS環境なら、
コールバックにはアロー関数を使ったほうがいい。
ちょっと難しい話になるが、
簡単に言うとアロー関数は
定義された瞬間のスコープを維持するのに対して、
通常の関数定義は、
実行された瞬間のスコープを使う。
つまり通常の関数は、
呼び出される場所によって振る舞いが変わる可能性がある。
コールバック関数のように、
いつどこで呼ばれるか分からない関数に
それを使っちまったら、
どう動くか読みにくくなるよな。
もちろん意図的に
呼び出し先のスコープを使いたい時もあるけど、
基本的にはコールバックには
アロー関数を使ったほうがいい。
こんなことをESLintは指摘してくれる。
他にもESLintが指摘してくれる、いい書き方の例をあげよう。
例えばjavascriptの等価記号に == と === があるよな？
== は厳密に一致していない値も一致とみなすことがあるから、
基本的には===を使った方がいい。
まだある。
特に意味もなくネストしたif else文があると、
これも「アーリーリターンしたらどうですか？」って勧めてくれる。
ネストは浅い方が読みやすいからな。
「間違っちゃいないけど、もっといい書き方があるコード」
をESLintは指摘してくれる。
自分だけで開発してると「なんか動く」コードならかけるが、
実はもっといい書き方がある事には気づきにくい。
自己流でコードを書いていると、
自分でも気づかないうちに悪い癖がついたり、
理解を間違える事がある
でもlintを使えば、これまで先人たちが積み重ねてきた英知、
つまり良いコードを書く方法を簡単に学べる。
だから、俺は独学の人にもlint導入を勧めるぜ。
周りに良いコードの書き方を教えてもらえない状況なら、なおのことlintを使おう。
これがlintを使うべき理由、その２だ。
良いコードの書き方を身につけられる。
この動画のコメントに色々リンクを貼っておくから、
気になった人は読んでみると良いぞ。
Airbnbってサービス、わかるよな？
あそこの開発チームもESLintを使ってる。
そんで自分たちが使ってる
ESLintの設定を公開してる。
手始めにその設定を、
そのまま使ってみてもいいと思うぜ。
彼らのGithubを見れば
「どうしてそのルールを採用したのか」
「良い書き方の例、悪い書き方の例」も上がってる。
勉強になるぞ。
ちなみに言語によっては
最初っからlintが入ってることもある。
Go言語とかそうだ。
それぐらいlintは大事ってことだ。
ちなみに今のはgopherの真似だ
あとlintとは別に、
コードフォーマッターも使うと良いかもしれない。
JavaScriptだとprettierって奴が有名かな。
プリキュアじゃないぞ、prettierだ。
これはlintみたいに
「間違ったコード」を指摘するわけじゃなくて、
ただコードを綺麗な見た目にしてくれる。
例えば改行した時の空白の入れ方にムラがあると、
コードがデコボコしてくる。
時々スペース２個、時々３個みたいな事してると、
見た目が汚くなるだろ。
そのほかにも、
あまりに横に長いコードを書いてると、
読みにくくなる。
Prettierを入れておけば君の代わりに
コードのスペースを合わせてくれたり、
横に長すぎるコードを改行してくれる。
そこまで必須ではないと思うけど、
これも入れておいて損はない。
「スペースを２個にしてください」
なんてレビューで指摘するのも疲れるからな。
ちなみにprettierとかESLintは、
VSCodeみたいな
コードエディタに拡張機能として追加できる。
ファイルを編集・保存したら
自動的にlintとprettierがかかる設定にできる。
どんなプロジェクトでも良いからlintを使ってみよう。
lintはマジでリスペクトだ。
ってわけで今日のおさらい。
Lintを使う理由
その１。初歩的なミスが減って、人間様の考える時間が増える。
その２。良いコードの書き方がわかる。先人の知恵を借りられる。