バナー画像

htmllintというnpmパッケージをご存知でしょうか。これは、HTMLでコーディングをおこなう人にとっては必ずインストールしておきたい構文チェック用パッケージです。本記事ではhtmllintの導入から使い方まで徹底的に解説していきますので、ぜひご一読ください。

htmllintとは?

まずはhtmllintというnpmパッケージについて詳しく見ていくことにしましょう。htmllintについて簡単に説明をするとHTMLの構文チェックをおこなうことができるnpmパッケージです。

ポテパンダの一言メモ

npmパッケージを簡単に説明すると、オープンソースの管理ツールのことです。htmllintは構文チェックをおこなうためのパッケージですが、npmには他にもいろいろと便利なパッケージが管理されており、インストールすることで利用ができます。まだnpmを使用したことがないということであれば、今回のハンズオンを機に、ぜひ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を導入しておきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。