webhintを活用しよう

webhintはOpenJS Foundationプロジェクトの1つであるオープンソースのリントツールです。コンセプトの1つに「車輪の再発明をしないこと」をあげており、チェックツールを新しく開発するのではなく既存のツールを組み合わせてさまざまな観点からWebサイトをチェックできます。

たとえばアクセシビリティのチェックには「axe」を、セキュリティ評価には「SSL Server Test」を、HTMLの文法チェックには「Nu HTML checker」を利用しています。そのほかPWAの対応状況チェックや、開発に利用しているバンドラーとトランスパイラの組み合わせに問題がないかまでチェックできます。

解析が終わるとベストプラクティスや既知のエラーと照らし合わせて改善案（ヒント）が提供され、そのヒントがなぜ大事なのか、改善の具体的な方法までドキュメント化されています。

webhintにはブラウザ上でURLをいれて解析ができるオンラインスキャナーのほか、VS Code、ブラウザの拡張機能やコマンドラインなどあらゆるタイミングで使えるようにインターフェースが整っています。オンラインスキャナーは実行すると結果のレポートが生成されレポートページへのリンクを提供してくれる優れものです。

今回は設定ファイルを作成してコマンドラインから使用する方法をご紹介します。

設定ファイルの作成

設定ファイルを作成するには以下のコマンドを実行します。

$ npm create hintrc

実行するといくつか質問がくり返され、答えに応じた設定ファイル（.hintrc）が作成されます。ファイル内で設定できる内容は以下の通りです。

項目	説明	指定例
connector	サイトの解析データをwebhintに渡すインターフェースとなるツールを指定します。	jsdom puppeteer local（ファイルベースのチェック）
formatters	結果の出力フォーマットを配列で指定します。	Codeframe Excel HTML JSON Stylish Summary
parsers	ファイルをパースするのに必要なツールを配列で指定します。	babel-config package-json typescript webpack-config
hints	適用するヒントをオブジェクトで指定します。	{"http-cache" : ["off"]}
hintsTimeout	解析のタイムアウト時間をミリ秒で指定します。	60000

認証がかかっているページをチェックする場合はconnectorとして「puppeteer」を設定する必要があります。ベーシック認証の場合は以下のようにユーザー名とパスワードを設定するだけです。

{
    "connector": {
        "name": "puppeteer",
        "options": {
            "auth": {
                "user": "userName",
                "password": "passWord"
            }
        }
    },
    ...
}

設定ファイルができたら実行します。webhintは「hint」という名前でnpmに公開されています。設定ファイルを作成したフォルダーでコマンドラインを開いて

$ npx hint https://example.com

を実行するだけです。必要なモジュールがインストールされ、そのままwebhintによるチェックが実行されます。設定ファイルを用意していない場合はデフォルトの設定でチェックされます。チェックが完了するとhint-reportというフォルダーが作成され、実行時の設定ファイルと一緒にレポートがHTMLで保存されます。

ただしnpxはローカルにコマンドが見つからない場合、実行するたびにモジュールをインストールするため、あらかじめ

$ npm i hint -D

を実行してモジュールをローカルにインストールしておくことをおすすめします。

さまざまなユースケースが想定されており基本機能はだいたいそろっていますが、機能が膨大な分ドキュメントを探すのが結構大変です。ちなみに、ヒント自体を自分で作成することもできます。詳細はDevelop a Hintのページにまとめられています。

Webやアプリの開発はベストプラクティスが頻繁に更新されやすい業界です。開発当時は正しかったものに脆弱性が見つかったり、新しい技術によってこれまでの作り方がバッドプラクティスとなってしまうことがありえます。だからこそ継続的改善が重要であり構築段階から「運用ファースト」の意識を持つべきだと私は思います。webhintが提供してくれるヒントをすべて取り入れる必要はありませんが、改善のとっかかりとしてまずは解析してみてはいかがでしょうか。