htmllintというnpmパッケージをご存知でしょうか。これは、HTMLでコーディングをおこなう人にとっては必ずインストールしておきたい構文チェック用パッケージです。本記事ではhtmllintの導入から使い方まで徹底的に解説していきますので、ぜひご一読ください。
htmllintとは？
まずはhtmllintというnpmパッケージについて詳しく見ていくことにしましょう。htmllintについて簡単に説明をするとHTMLの構文チェックをおこなうことができるnpmパッケージです。
htmllintを使用することによって、HTMLファイルの構文をチェックし、誤っている部分や一定の基準から外れている書き方の箇所を見つけることができます。
構文チェックのメリット
本線からは外れますが、こちらでは構文チェックをおこなうことのメリットについても紹介していきます。
エラーを事前に発見できる
1つ目に紹介する構文チェックのメリットはエラーを事前に発見できるということです。HTMLを書いていると、実際にブラウザでファイルを確認して初めて、もしくはサーバーに挙げて初めてエラーに気づくということがあります。しかし、htmllintのような構文チェックツールを利用することによって、エラーが発生する原因を事前に確認することができます。
htmllint以外にも構文チェックツールはたくさんありますが、多くの場合、CLIからコマンドを入力するだけで簡単にチェックすることができるため、エラー発見までのプロセスが非常に容易なものとなります。
チーム開発時にコードの書き方を統一できる
2つ目に紹介する構文チェックのメリットはチーム開発時にコードの書き方を統一できるということです。htmllintはエラーを発見する以外にも、一定のルールから外れている箇所を発見する機能が備わっています。
たとえばインデント（コードのスペース）に対するルールなどがhtmllintには決められています。これらのルールから外れたコードを正しく修正することによって、大人数の開発でも、一定の書き方に統一することができるというメリットがあります。
人によってインデントのつけ方などは異なり、マニュアルで決められていたとしても、手作業で統一することは困難なことです。このような手間を一気に省き、チーム開発時にコードの書き方を統一できるのがhtmlの利点だと言えるでしょう。
コードに一定の規則が生まれ、可読性が高まる
3つ目に紹介する構文チェックのメリットはコードに一定の規則が生まれ、可読性が高まるということです。先ほどはチーム開発におけるコードの統一性をメリットに挙げましたが、個人でコーディングをしていた場合においても、書き方がブレるということは頻繁にあることです。しかし、htmllintを用いることでコードに一定の規則が生まれるため、可読性を高めることが可能なのです。
htmllintではhtmlの構文チェックしかできませんが、言語によって構文チェックツールがたくさん用意されています。自分が扱う言語に合わせて構文チェックツールをnpmインストールするといいでしょう。
- linter-php → phpの構文チェックパッケージ
- linter-rubocop → Rubyの構文チェックパッケージ
- ESLint → JavaScriptの構文チェックパッケージ
htmllintのインストール方法
さて、ここまでhtmllintを含めた構文チェックツールの利便性などについて詳しく解説をしてきました。早速、お使いのテキストエディタにhtmllintをインストールし、その効果を実感してみましょう。こちらでは、まずhtmllintのインストール方法について説明をします。
1. フォルダの作成
// フォルダの作成 $ mkdir html-lint // 作成したフォルダへ移動 $ cd html-lint/
まずはhtmllintを使用するフォルダを作成し、対象フォルダに移動しましょう。
2. npmからhtmllintをインストール
$ npm install -g htmllint-cli
続いてhtmllintをnpm経由でインストールしていきましょう。今回はコマンドラインから扱うことができるhtmllint-cliをグローバル（PCのどこからでも使用できるようにする設定）でインストールします。
もし、以下のようなエラーが出た場合はnpmインストールに権限の規制がかかっています。
MacBook-Pro:html-lint UserName$ npm install -g htmllint-cli npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/htmllint-cli npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules/htmllint-cli npm ERR! code EACCES // 以下省略
上記の権限規制が出た場合には、次のコマンドで対処してください。
$ sudo npm install -g htmllint-cli
「sudo」をコマンドの頭につけたものですが、これは最高権限を持つユーザーの権限レベルでコマンドをおこなうものです。この最高権限を持ったユーザーのことをルートユーザー・スーパーユーザーなどと呼びますが、このユーザーの権限を使用することで、権限規制がかからなくなります。
3. htmllintを初期化
$ htmllint init
次にhtmllintを使用したいhtmlファイルがあるフォルダ内で、htmllintの初期化（initialize）をおこないます。初期化をおこなうことでhtmllintを実行するためのファイルが生成され、htmlを実行できるようになります。
htmllintの使い方
いよいよhtmllintを使用してみましょう。
1. HTMLファイルの生成
$ <head> touch index.html </head>
まずはindex.htmlのファイルを作ります。
2. index.htmlに”間違った”コードを記述
<!DOCTYPE html>
<html lang="ja">
<head>
<title>htmllintの練習</title>
</head>
<body>
<h2>これはhtmllintの練習です</h2>
<p>あえて間違ったコードになっています。</p>
</body>
</ht
先ほどのプロセスで生成したHTMLファイルにコードを記述します。htmllintの働きを確認するために、ここではあえて誤ったHTMLコードを書きましょう。
3. htmllintを実行
// htmllint 〇〇（実行対象のファイル）という形でコマンドラインに命令する $ htmllint index.html
それではhtmllintを実行してみましょう。実行結果は以下のようになりました。
index.html: line 4, col 1, indenting spaces must be used in groups of 4 index.html: line 7, col 1, indenting spaces must be used in groups of 4 index.html: line 10, col 4, line ending does not match format: lf index.html: line 2, col 1, tag is not closed
見てわかる通り、間違っている部分には行ごとに該当するエラ〜メッセージが記載されています。これらをすべて直してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>htmllintの練習</title>
</head>
<body>
<h2>これはhtmllintの練習です</h2>
<p>こちらは正しいコードです。</p>
</body>
</html>
この状態でhtmllintを実行すると、エラーなしという意味のメッセージが出てきました。このようにhtmllintを利用することで、エラーが発生する部分やインデントなどを一定のルールに合わせることができます。
$ htmllint index.html [htmllint] found 0 errors out of 1 files
まとめ
本記事では、htmllintの導入から使い方まで徹底的に解説していきました。htmllintは簡単にインストールでき、強力な構文チェックを可能とします。ぜひ、これからコーディングをおこなうという方はhtmllintを導入しておきましょう。
npmパッケージを簡単に説明すると、オープンソースの管理ツールのことです。htmllintは構文チェックをおこなうためのパッケージですが、npmには他にもいろいろと便利なパッケージが管理されており、インストールすることで利用ができます。まだnpmを使用したことがないということであれば、今回のハンズオンを機に、ぜひnpmの利便性を体験してみてください。