Webページ関連の品質をチェックするためのアプリケーションのご紹介
2024年 6月11日 Posted 野々瀨(フロントエンドエンジニア)
Webページを制作する際、コードなどの品質が低いと不具合を起こしたり、メンテナンス性が悪くなったりします。それにより修正などの余計なコストがかかってしまうこともあるでしょう。今回は、そんな品質をなるべく良くできるようにするためのアプリケーションを、一部ご紹介しようと思います。
HTML
Markup Validation Service
Markup Validation Serviceは、HTMLが構文として正しく記述されているかをチェックすることのできるツールです。URL、ファイル、HTMLコードの直接入力のいずれかでチェックすることができます。
| Webサイト | https://validator.w3.org/ |
|---|---|
| 提供 | W3C |
| 利用方法 | Webアプリケーション、APIリクエスト |
| 料金 | 無料 |
markuplint
markuplintは、HTMLが正しく記述されているかをチェックすることのできるツールです。構文のチェックだけでなく、未使用の属性値などをチェックしたり、チェックする内容をカスタマイズしたりすることができます。
| Webサイト | https://markuplint.dev/ja/ |
|---|---|
| 利用方法 | コマンド（インストール） |
| 料金 | 無料 |
CSS
CSS Validation Service
CSS Validation Serviceeは、CSSが構文として正しく記述されているかをチェックすることのできるツールです。URL、ファイル、CSSコードの直接入力のいずれかでチェックすることができます。
| Webサイト | https://jigsaw.w3.org/css-validator/ |
|---|---|
| 提供 | W3C |
| 利用方法 | Webアプリケーション、APIリクエスト |
| 料金 | 無料 |
Stylelint
Stylelintは、CSSが正しく記述されているかをチェックすることのできるツールです。構文のチェックだけでなく、重複したセレクターをチェックしたり、チェックする内容をカスタマイズしたりすることができます。無料で利用することができます。
| Webサイト | https://stylelint.io/ |
|---|---|
| 利用方法 | コマンド（インストール） |
| 料金 | 無料 |
なお、CSS Lintという同じ内容のチェックツールがありますが、現代ではStylelintが主流のようです。
| Webサイト | http://csslint.net/ |
|---|
JavaScript
JSLint
JSLintは、JavaScriptが正しく記述されているかをチェックすることのできるツールです。チェックする内容が厳しく設定されています。
| Webサイト | https://www.jslint.com/ |
|---|---|
| 利用方法 | Webアプリケーション、コマンド（インストール） |
| 料金 | 無料 |
JSHint
JSHintは、JSLintのルールを緩くし、結果を分かりやすくしたツールです。
| Webサイト | https://jshint.com/ |
|---|---|
| 利用方法 | Webアプリケーション、コマンド（インストール） |
| 料金 | 無料 |
ESLint
ESLintは、JSLintやJSHintに比べてチェックする内容をカスタマイズしやすくしているツールです。またドキュメントも分かりやすく提供されています。ECMA Script 6以降に対応し、ブラウザー特有のオブジェクトにも対応しています。
| Webサイト | https://eslint.org/ |
|---|---|
| 利用方法 | コマンド（インストール） |
| 料金 | 無料 |
リンク
Website Explorer
Website Explorerは、Webサイト全体の階層構造やリンクが正しく遷移できるかなどをチェックすることができるツールです。
| Webサイト | https://www.vector.co.jp/soft/winnt/net/se247055.html |
|---|---|
| 利用方法 | デスクトップアプリケーション |
| 料金 | 無料 |
アクセシビリティ
miChecker
miCheckerは、Webアクセシビリティのチェックをすることのできるツールです。JIS X 8341-3:2016（2024年3月現在のバージョン3.0時点）を基準にした評価を行います。なお、JDKまたはJava REが必要です。
| Webサイト | https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html |
|---|---|
| 提供 | 総務省 |
| 利用方法 | デスクトップアプリケーション（インストール） |
| 料金 | 無料 |
axe Monitor
axe Monitorは、Webサイトを自動的に巡回して情報を収集し、アクセシビリティとして問題ないかをチェックし、レポートとして結果を表示してくれるツールです。axeというベースとなるツールに対して、運用しやすくサポートを充実したサービスです。
| Webサイト | https://www.deque.com/axe/monitor/ |
|---|---|
| 提供 | Deque Systems |
| 利用方法 | 不明 |
| 料金 | 有料 |
axe-auto-reporter
axe-auto-reporterは、Webアクセシビリティのチェックを行い、結果をHTMLで出力してくれるツールです。内部ではaxeのエンジンであるaxe-coreを使用しているようです。
| Webサイト | https://hyper-text.org/archives/2023/10/axe_auto_reporter/ |
|---|---|
| 利用方法 | コマンド（インストール） |
| 料金 | 無料 |
axe DevTools
axe DevToolsは、axeをブラウザーで手軽に実行できるChromeの拡張機能です。
| Webサイト | https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd |
|---|---|
| 利用方法 | Webブラウザー（Chromeの拡張機能） |
| 料金 | 無料 |
NVDA
NVDAは、主に視覚障害者向けにパソコンを操作する際の補助として使用する、音声読み上げ（スクリーンリーダー）の一つです。チェックするためのツールではありませんが、実際に操作してみることでチェックとして利用することができます。
| Webサイト | https://www.nvda.jp/ |
|---|---|
| 利用方法 | デスクトップアプリケーション（インストール） |
| 料金 | 無料 |
パフォーマンス
PageSpeed Insights
PageSpeed Insightsは、Webページを分析し、表示速度やSEOなどに関して評価し、改善点を提示してくれるツールです。2021年の6月ごろにCore Web Vitalsと呼ばれるUX指標の一つで、LCP、FID、CLSの三つの指標で評価されます。
| Webサイト | https://pagespeed.web.dev/?hl=ja |
|---|---|
| 提供 | |
| 利用方法 | Webアプリケーション |
| 料金 | 無料 |
Lighthouse
Lighthouseは、Webページを分析し、表示速度やSEOなどに関して評価し、改善点を提示してくれるツールです。最近ではPageSpeed Insightsとほぼ同じ結果ですが、PWAなどに対応しています。
| Webサイト | https://chromewebstore.google.com/detail/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja |
|---|---|
| 提供 | |
| 利用方法 | Webブラウザー（Chromeの拡張機能） |
| 料金 | 無料 |
