Webページ関連の品質をチェックするためのアプリケーションのご紹介

2024年 6月11日　Posted　野々瀨(フロントエンドエンジニア)

Webページを制作する際、コードなどの品質が低いと不具合を起こしたり、メンテナンス性が悪くなったりします。それにより修正などの余計なコストがかかってしまうこともあるでしょう。今回は、そんな品質をなるべく良くできるようにするためのアプリケーションを、一部ご紹介しようと思います。

HTML

Markup Validation Service

Markup Validation Serviceは、HTMLが構文として正しく記述されているかをチェックすることのできるツールです。URL、ファイル、HTMLコードの直接入力のいずれかでチェックすることができます。

markuplint

markuplintは、HTMLが正しく記述されているかをチェックすることのできるツールです。構文のチェックだけでなく、未使用の属性値などをチェックしたり、チェックする内容をカスタマイズしたりすることができます。

CSS

CSS Validation Service

CSS Validation Serviceeは、CSSが構文として正しく記述されているかをチェックすることのできるツールです。URL、ファイル、CSSコードの直接入力のいずれかでチェックすることができます。

Stylelint

Stylelintは、CSSが正しく記述されているかをチェックすることのできるツールです。構文のチェックだけでなく、重複したセレクターをチェックしたり、チェックする内容をカスタマイズしたりすることができます。無料で利用することができます。

なお、CSS Lintという同じ内容のチェックツールがありますが、現代ではStylelintが主流のようです。

JavaScript

JSLint

JSLintは、JavaScriptが正しく記述されているかをチェックすることのできるツールです。チェックする内容が厳しく設定されています。

JSHint

JSHintは、JSLintのルールを緩くし、結果を分かりやすくしたツールです。

ESLint

ESLintは、JSLintやJSHintに比べてチェックする内容をカスタマイズしやすくしているツールです。またドキュメントも分かりやすく提供されています。ECMA Script 6以降に対応し、ブラウザー特有のオブジェクトにも対応しています。

リンク

Website Explorer

Website Explorerは、Webサイト全体の階層構造やリンクが正しく遷移できるかなどをチェックすることができるツールです。

アクセシビリティ

miChecker

miCheckerは、Webアクセシビリティのチェックをすることのできるツールです。JIS X 8341-3:2016（2024年3月現在のバージョン3.0時点）を基準にした評価を行います。なお、JDKまたはJava REが必要です。

axe Monitor

axe Monitorは、Webサイトを自動的に巡回して情報を収集し、アクセシビリティとして問題ないかをチェックし、レポートとして結果を表示してくれるツールです。axeというベースとなるツールに対して、運用しやすくサポートを充実したサービスです。

axe-auto-reporter

axe-auto-reporterは、Webアクセシビリティのチェックを行い、結果をHTMLで出力してくれるツールです。内部ではaxeのエンジンであるaxe-coreを使用しているようです。

axe DevTools

axe DevToolsは、axeをブラウザーで手軽に実行できるChromeの拡張機能です。

NVDA

NVDAは、主に視覚障害者向けにパソコンを操作する際の補助として使用する、音声読み上げ（スクリーンリーダー）の一つです。チェックするためのツールではありませんが、実際に操作してみることでチェックとして利用することができます。

パフォーマンス

PageSpeed Insights

PageSpeed Insightsは、Webページを分析し、表示速度やSEOなどに関して評価し、改善点を提示してくれるツールです。2021年の6月ごろにCore Web Vitalsと呼ばれるUX指標の一つで、LCP、FID、CLSの三つの指標で評価されます。

Lighthouse

Lighthouseは、Webページを分析し、表示速度やSEOなどに関して評価し、改善点を提示してくれるツールです。最近ではPageSpeed Insightsとほぼ同じ結果ですが、PWAなどに対応しています。