Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2016年11月 > JenkinsとHTMLHintを使用して潜在的な構文エラーに気づいていく

JenkinsとHTMLHintを使用して潜在的な構文エラーに気づいていく


UI開発者 郡司

今回紹介するツールを使用することで、静的なコードを解析して構文エラーをレポートとしてまとめることができます。

Jenkinsとは代表的な継続的インテグレーションツールの1つです。ソフトウェア開発時におけるビルド、デプロイ、テストなどの作業自動化を行ってくれます。

Jenkinsの主な特徴は以下になります。

HTMLHintとはシンプルなHTMLの構文チェックツールです。主に以下のチェックを行ってくれます。

使ってみる

以下がすでにインストールされている状態からの解説になります

※ 今回はWindowsのローカル環境で使用しています。

HTMLHintで構文解析を行いそのレポートを出力する方法として、gulp-htmlhint-checkstyle-file-reporterを使用します。

使用するnpmは以下になります。

タスクを動かすgulpfile.jsはgulp-htmlhint-checkstyle-file-reporterのUsageから解析するフォルダのパスを変更し、さらに以下をタスク追加しました。

gulp.task('clean', function () {
  return del([REPORT_DIR + '*.*'])
})

次にJenkinsでプロジェクトとジョブの作成まで行います。

プロジェクトはフリースタイル・プロジェクトのビルドを選択して、名前はtest-hintにして作成します。

次にジョブの設定を行いますが、今回はソースコード管理、ビルド・トリガ、ビルド環境については何も設定しません。

General

ビルド

ビルド後の処理

これで設定は完了になるので保存をクリックします。

準備が完了しましたので、HTMLファイルが500ほどあるサイトから意図的にエラーをつくって計測してみましょう。

実行結果をみるとキャプションのような結果になりました。
HTMLHintのチェックする設定を減らして2回ジョブを実行してます。Checkstyle警告の推移をみると警告の低下が確認できます。

使用用途

エラーが1つもないWebサイトがあれば素晴らしいですが、人が作っている以上ヒューマンエラーはどこかで生じてしまいます。構築時に使用してエラー0の成果物を提供する、運用しているサイトに導入して地道に改善していく、グラフとして表示されるのでエラーの修正などの地道な作業のモチベーション維持にもつなげるなどが使用用途としては考えられます。

ヒューマンエラーの対処法として今回のようなツールを導入してWebサイトの改善を考えてみてはいかがでしょうか。