htmllintでHTML構文チェック!導入方法から使い方まで解説
  • facebookページ
  • twitterページ
  • 2020.02.25

    htmllintでHTML構文チェック!導入方法から使い方まで解説

    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. フォルダの作成

    まずはhtmllintを使用するフォルダを作成し、対象フォルダに移動しましょう。

    2. npmからhtmllintをインストール

    続いてhtmllintをnpm経由でインストールしていきましょう。今回はコマンドラインから扱うことができるhtmllint-cliをグローバル(PCのどこからでも使用できるようにする設定)でインストールします。

    もし、以下のようなエラーが出た場合はnpmインストールに権限の規制がかかっています。

    上記の権限規制が出た場合には、次のコマンドで対処してください。

    「sudo」をコマンドの頭につけたものですが、これは最高権限を持つユーザーの権限レベルでコマンドをおこなうものです。この最高権限を持ったユーザーのことをルートユーザー・スーパーユーザーなどと呼びますが、このユーザーの権限を使用することで、権限規制がかからなくなります。

    3. htmllintを初期化

    次にhtmllintを使用したいhtmlファイルがあるフォルダ内で、htmllintの初期化(initialize)をおこないます。初期化をおこなうことでhtmllintを実行するためのファイルが生成され、htmlを実行できるようになります。

    htmllintの使い方

    いよいよhtmllintを使用してみましょう。

    1. HTMLファイルの生成

    まずはindex.htmlのファイルを作ります。

    2. index.htmlに”間違った”コードを記述

    先ほどのプロセスで生成したHTMLファイルにコードを記述します。htmllintの働きを確認するために、ここではあえて誤ったHTMLコードを書きましょう。

    3. htmllintを実行

    それではhtmllintを実行してみましょう。実行結果は以下のようになりました。

    見てわかる通り、間違っている部分には行ごとに該当するエラ〜メッセージが記載されています。これらをすべて直してみましょう。

    この状態でhtmllintを実行すると、エラーなしという意味のメッセージが出てきました。このようにhtmllintを利用することで、エラーが発生する部分やインデントなどを一定のルールに合わせることができます。

    まとめ

    本記事では、htmllintの導入から使い方まで徹底的に解説していきました。htmllintは簡単にインストールでき、強力な構文チェックを可能とします。ぜひ、これからコーディングをおこなうという方はhtmllintを導入しておきましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE