#16「リンター特集」
ミツエーリンクスでよく使われているリンターと、リンターをうまく活用する方法についてお話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 加藤
- こんにちは！
- 橋本
- こんにちは！
- 加藤
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。 今日は設計チームの加藤と橋本君の二人でお届けします。よろしくお願いします。
- 橋本
- よろしくお願いします！
- 加藤
- 世間的にも新卒が配属される時期だと思いますが、入社したての頃は学ぶことが多くて、自分が書いたコードが正しいのか分からないことも多いと思います。そこで今日はミツエーリンクス社内でよく使われているリンターについてのお話をしようと思います。
リンターを知らないという方に簡単に説明すると、リンターというのはソースコードを静的に解析して、あらかじめ決めておいたコーディングスタイルに背いていたり、バグの要因となりそうな記述がないかをチェックして、警告やエラーを出してくれるツールです。後で詳しく話しますが、HTML、CSS、JavaScriptといった言語ごとにリンターが開発されていて、ミツエーリンクスではさまざまなリンターを組み合わせて意図せず品質を下げないように工夫しています。リンターによっては、チェックするルール、たとえばインデントにはタブを使うのか、スペースを使うのか、スペースは何文字にするのかなどを詳細に設定できるので、プロジェクト全体で一貫性のある書き方を担保できます。 - 橋本
- 自分の中で定めたルールに沿って統一感のあるコードを書こうと思っていても、プロジェクトに複数の開発者がいるとそれぞれ自分流に書かれたコードで溢れていて、かなりカオスな状態になってしまうので、導入するだけで一貫性を保てるリンターっていうのはもう必須級に重要なツールだと思ってます。
- 加藤
- そうですね。あとは、プログラムは人間が直接キーボードを打って書くことがほとんどなので、結局ミスが起きたりしてしまうんですよね。なので、いつでも手軽にコードのチェックができるという点もメリットですね。橋本君は設計チームに配属されてもう1年たちましたが、入社する前はリンターは使ってましたか？
- 橋本
- 自分は入社する前は使用していなかったですし、そもそもほとんどリンターについて知らなかったですね。というのも、学生時代に同じプロジェクトのソースコードを複数人で触ること自体ほとんどなかったので、とりあえず完成させて、とりあえず動けばいいという気持ちでやってました。
- 加藤
- とてもよく分かりますね（笑）
- 橋本
- はい（笑）ただ、やっぱりお客様にお金をいただいて制作する以上は、正しいものを正しく作ることが大事だよなぁと実感をしてます。
- 加藤
- うん、とてもよい心掛けですね…。個人的にリンターはベストプラクティスの塊のようなものだと思っているので、学習の手助けにもなるかなと思います。というのも、ほとんどのリンターは定期的にアップデートされていて、これまでエラーとして報告されていなかった書き方がエラーになることもありますよね。なので、多くのリンターは各ルールに対して、その書き方を推奨する理由もあわせて教えてくれるので、ソースコードを継続的に改善していくための気付きを与えてくれるツールだなと思っています。
- 橋本
- 確かにそうですね。あとは作業効率化の側面もあるかなぁと思っています。ある程度経験を積めばここのスペルが間違ってたとか、閉じタグが無かったとかっていう風にすぐ気付けるんですけど、最初のころはどういう状態が正しいのか自体判断できていないことが多いので、ミスの発見に時間がかかることが多いんですよね。仕事だとわからないことに対して調べる時間が無限にあるわけではないので、ある程度調べても分からないことがあったら先輩に聞いたりするんですけど、わざわざ聞くほどでも無かったレベルのミスをリンターが未然に防ぐことが出来るので、そういった意味でもリンターは重要な役目を果たしてくれてるなぁって思います。
- 加藤
- よい心がけですね（笑）入社したての頃はもちろん質問することも仕事の一部だと思うので、積極的に質問はしたほうがいいんだけど、確かにリンターで気付けるような部分はあらかじめ片付けておいてくれると助かりますね。
もちろん一貫性とか、作業効率化も大事なんですけど、加えて重要なポイントとしては「Webサイトの現状を把握する」という意味合いでも、リンターは必要だなと思いますね。継続的改善をするにしても、まずは今のソースコードにエラーがないかを把握しておかないと、品質が上がっているのか下がっているかの判断が付かないんですよね。 - 橋本
- なるほど。そうですね、リンターの導入は運用するうえでも欠かせないということですね。
- 加藤
- うん、そうだと思います。
はい、ここまではリンターとは何か、そして何のためにあるのかということを説明してきました。ここからはミツエーリンクスでよく使われているリンターについて言語ごとに話していきたいとおもいます。
まずHTMLのリンターには、主に「vlint」を使用しています。vlintはミツエーリンクスが開発・保守しているHTMLの文法チェックのためのリンターですね。内部的にW3Cが開発しているNu Html Checkerを使っていて、HTMLのシンタックスエラーとして定義されているエラーがないかをチェックしてくれます。 - 橋本
- HTMLとかは、エディターのサジェスト機能などを使わずに1文字1文字打ってコードを書いていると、結構閉じタグの入れ忘れなどが起こりやすいんですよね。しかもそのままブラウザ上に反映してもブラウザがよしなに解釈して特にエラーなくレンダリングしてしまうんですよ。そういったブラウザでページを見ているだけでは気付きにくいミスっていうのは結構あるので、そういったときにリンターでチェックしてミスをなくすっていう感じですね。で、ほかにリンター以外にできる対策としては、VS Codeを使用していればEmmetが標準で入っているので、それを活用すると閉じタグなどは自動的に生成してくれます。また、インデントを正しく活用することでも、divなどの入れ子が多くて、マークアップの構造が複雑になっても視認性が上がってミスはだいぶ減らせるんじゃないかなと思います。
- 加藤
- ありがとうございます。
続いて、CSSのリンターは、「stylelint」が定番ですかね。コーディングスタイルのチェックはもちろん、プラグインを組み合わせればCSSだけでなくSCSSのチェックもできます。他のリンターにはない特徴としてはルール違反時に表示するメッセージをカスタマイズできるので、stylelintがデフォルトで設定しているエラーや警告が分かりづらいなーと思ったら変更もできます。 - 橋本
- このstylelintでチェックできるルールっていうのは150以上あるので、どのルールにどんな設定をすればいいか分からないっていう場合には「stylelint-config-recommended」っていうのを使用しておくと、最低限のルールを設定できます。ただ、他のリンターにも言えることですが、ルール1つ1つを見ておくと、どういうところに揺れが発生しやすいのかとか、あとは気を付けるべきところっていうのを知ることができるので、一度全体を眺めてみることをオススメします。ちなみに、先ほど紹介したvlintはCSSの文法チェックもできるので、こちらも併せて利用しています。
- 加藤
- はい。次にJavaScriptのリンターとしては、「ESLint」を使用しています。ESLintもstylelintと同じくどのルールをチェックするかを独自に設定することができますが、ルールの数、なんと250以上あります…。これを毎回1つ1つ設定していくのは結構しんどいので、大抵はstylelintと同じようにありもののルールセットを使うのが一般的ですね。
- 橋本
- そうですね。ESLintに関しては、ミツエーリンクスだと社内のスタイルガイドに合わせた「eslint-config」という設定を開発して、npmで公開もしていますので、皆さんも良ければ使ってみてください！
- 加藤
- はい。その他にプログラミング言語ではなく日本語の文法チェックができる「textlint」という文章用のリンターも使用しています。textlintを使うと表記揺れを減らしたり、より読みやすい文章を書くことができるので、HTML内のテキストはもちろん、ドキュメントの作成時や、社内ブログの執筆時にも活用しています。
- 橋本
- そうですね、数千ページを超えるような結構大規模なプロジェクトだと、とくに表記揺れは起きやすいですよね。あとは商品名が英語だったりすると、そのまま英語で書くのか、それともカタカナにするのか、っていうところも揺れがちなので、そういったときに使用する感じですね。
- 加藤
- うん、そうですね。ほかに橋本君が最近使っているものや、気になっているリンターはありますか？
- 橋本
- 自分が最近気になっているものとしては、.editorconfigの設定どおりに書かれているかをチェックできる「editorconfig-checker」だったり、あとはMarkdownの文法をチェックする「remark-lint」や、あとは最近社内のSNSで紹介されていた「SonarLint」辺りですかね。
- 加藤
- SonarLintっていうのはどういうものですか？
- 橋本
- これは、もともとスタンドアローンなツールとして開発されていたSonarQubeというツールをVS CodeやInteliJなどのIDE用の拡張機能として公開したものをSonarLintと呼んでます。で、このSonarLintの特徴として、まずはいろいろなプログラミング言語をサポートしているところですね。これまでHTMLとかCSSなどの言語ごとにツールを紹介してきたんですけど、このSonarLintはそれ1つで複数の言語のチェックができちゃいます。
- 加藤
- あー、なるほど。中々お手軽でよさそうですね。ちなみにチェックしてくれる内容は他のリンターとは違うんですか？
- 橋本
- そうですね、すべてを見たわけではないんですけど、脆弱性になり得るコードであったり、バグのもとになりがちなコードに対するルールっていうのが結構多いですね。JavaScriptについてでいえば、ESLintはあくまでECMAScript用のツールなので、DOM APIなどのJavaScript特有の機能についてはチェックしないんですけど、SonarLintだと、たとえばクロスサイトスクリプティングの危険性がある「innerHTML」メソッドを使っているとエラーとして検出されたりします。
- 加藤
- なるほど！それは結構良さそうですね！使ってみようと思います！
- 橋本
- はい！ぜひ使ってみてください！
- 加藤
- はい。これまでに挙げたリンターを実際に使うには大きく、エディターの拡張機能として入れる方法、Node.jsのパッケージをインストールしてコマンドラインから実行する方法の2つがあります。エディターの拡張機能として利用すると、コードを書いてる最中にリアルタイムでチェックが行われるので、早く気付くことができますね。コマンドラインから実行する場合は、npmに公開されているパッケージをインストールして、チェックしたいときに都度コマンドを実行します。そう言うと、拡張機能だけ入れておけばいいんじゃない？と思う方もいらっしゃるかもしれませんが、コマンドラインでチェックできるようにしておくと、機械的に実行できるので他のツールと組み合わせられるというメリットがあります。たとえばGitのプレコミットフックにリンターを実行するように設定しておくと、コミットする直前にチェックができるので、問題がある状態でうっかりコミットしてしまうなんてことを防ぐことができますね。
- 橋本
- そうですね。自分はプレコミットフックはよくhuskyとlint-stagedを組み合わせて使ってますね。eslintとかstylelintなど複数のリンターを同時にコミット前に実行ができますし、husky自体ほかのgitフックもサポートしているライブラリなので、コミット時だけでなくて、プッシュ時にも呼び出すことができて効率的に確実性の高いリンターチェックができちゃいますね。
- 加藤
- そうですね。あとはGitHub ActionsやGitLab CIを使えば、たとえばmainブランチにマージする時やマージリクエストを出したタイミングでもリンターを実行することができるのでこちらも併せて設定しておくといいですね。
- 橋本
- そうですね。今挙げたエディターの拡張機能やコマンドによって即座にチェックできるっていうのは、作業者自身の作業の品質や効率の低下を防ぎます。また、プレコミットフックやCIによるチェックは決められた作業のタイミングで確実にチェックが行われるので、それが他の人の作業も含めたリポジトリ全体の品質の低下を防ぎます。これら2つを組み合わせて使うことが品質の高い成果物につながるのかなと思います！
- 加藤
- そうですね、まぁいろいろ使い方はあるんですが、それぞれに目的や利点があるので、うまく組み合わせて使っていくのが大事ですね。
はい、今回はリンター特集として、ミツエーリンクスで使われているリンターについてお話してきました。始めに新卒の方に向けて、と言いましたが、私のなかでも改めて整理できましたし、得るものがあってよかったです。 - 橋本
- そうですよね。ツール自体も日々アップデートされたり新しいものが公開されていたりするので、こういったツールについても定期的に見直す機会を設けたほうがいいかもしれないなと思いました！
- 加藤
- はい。最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますので、ぜひチェックしてみてください。また、このPodcastはApple Podcast、 Google Podcast、Spotifyでも配信しています。お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。
それでは今日はこの辺で！ありがとうございました！ - 橋本
- ありがとうございました！
これから仕事でコードを書いていくという方は是非リンター導入してみてください！