2021年6月24日

いろいろなHTMLのリンター

UI開発者加藤

先日当社のPodcast「ミツエーテックラジオ」で「リンター特集」というエピソードを公開しました。このエピソードでは、社内でよく使われているリンターを紹介しましたが、他にもWeb制作で活用できるリンターはたくさん存在しています。

今回はPodcastではあまり取り上げなかったHTMLのリンターについてご紹介します。

LintHTML

1つ目はLintHTMLです。LintHTMLはhtmllintのフォークとして作られたツールです。htmllintでチェックできる内容は全てLintHTMLでもチェックできます。

リンターでチェックできるルールは多ければ多いほどいい、というものでもないのですが、2014年から開発されていたhtmllintをもとにしていることもあり、さまざまなルールを設定できます。

他のリンターにはない特徴としては、ファイルの一部分に対して個別の設定ができることです。サイト全体で一貫したルールを守ることは大事なことですが、例外があることも否めません。

以下は、特定の属性を使用禁止にする「attr-bans」というルールを部分的に無効にする例です。

<!-- linthtml-disable attr-bans -->
<table border="1"></table> <!-- ここのborder属性は無視される -->
<!-- linthtml-enable attr-bans -->

また、現在はWebpack用のlinthtml-loaderの開発が進んでいるとのことで、Webpackを使った開発プロセスにも組み込めるようになることが期待できます。

2つ目はHTMLHintです。HTMLHintの特徴の1つはURLでリンターをかけられることです。例えばCMSを使って公開しているサイトなどは静的ファイルとしてデータがないこともありますが、HTMLHintを使えばステージングや本番に公開した後にチェックできます。

個人的な推しポイントは、チェックの結果をいろいろなフォーマットでファイルとして出力できる点です。

私はソースコードにエラーがないかをチェックすることの他に、エラーがどのくらいあるかを把握する際にもリンターを使います。

既存の大規模サイトにリンターを導入した際は数千、数万というエラーが出ることもありますが、そのエラーを一度に解消するのは変更点が膨大になるため得策ではありません。

また、コマンドライン上でたくさんあるエラーのうち、どのエラーが減ったのか、増えたのかを確認するのは至難の業です。

チェックの結果をJSONやHTML形式で出力しソースコードと一緒にGit管理しておけば、どのコミットによってどのエラーが解消されたのか、増えたのかを把握しながら、少しずつエラーを減らしていくという運用ができます。

3つ目はmarkuplintです。markuplintは各仕様に適合したマークアップができているかチェックすることを第一の特徴としてあげており、各ルールの解説ページにはHTML Living StandardやWCAGの文言を引用しています。

ルールページに「Accessibility」の見出しが置かれていることも特徴的です。

また、JSXやVue.jsテンプレートなどのフレームワークや、EJSなどのテンプレートエンジンのためのプラグインも用意されています。

多くのHTMLのリンターは静的なチェックが多いですが、近年は動的にHTMLが変更されるページも少なくありません。

特にフレームワークを使って実装されているページにはSPAなどのWebアプリケーションが多く、ページロード後にHTMLがダイナミックに変更されることも多いため、モダンな開発プロセスでも利用できることは大きなポイントですね。

ちなみにメインで開発されている方が日本の方ということもあり、エラーメッセージのローカライズ機能も組み込まれています。

今は英語と日本語のみですが、言語を追加しやすい仕組み作りがされており、世界的に使われることを想定して開発されていることがよく分かります。

リンターには大きく分けて、正しさや安全性のチェックと、コーディングスタイルのチェックの2つの役割があります。今回紹介したリンターはどれも両方チェックできる優れものです。

しかしこれまで紹介してきたように、特徴やできることはツールによって違うため、何のためにリンターを使うのかを考慮しながら使い分けたり、組み合わせたりする必要があります。ちなみに当社では社内的な選定基準として

などをあげています。みなさんの参考になれば幸いです。