昔ながらのhtml納品時の品質チェック（404チェック）

2019年12月2日

ノウハウ

皆さんこんにちは、末ちゃんです。
いよいよ氷点下になりましたね！

山や森が白く雪化粧し、心が洗われる季節がやってきました！
寒いのは嫌いですが、白銀の世界は大好きです。

404エラーチェック

さて、皆さんデータ納品時の404エラーチェックはどうやっていますか？

Gatsby.jsなどの静的サイトジェネレータや、Nuxt.jsなどのSSR可能なフレームワークを使用している場合は悩むことはありません。
ルーターが常に対象のファイルの生存をチェックしてくれるため、うっかり画像を入れ忘れてしまったり、リンクを誤ることはありません。

しかし、昔ながらのHTMLを直書きして納品しなければいけない場合、上記のような便利なルーターがないためにリンクミスを多発しやすくなります。

でも安心してください、静的なHTMLを再帰的にリンクチェックしてくれるライブラリがあります。

broken-link-checker – npm

broken-link-checker を使ってみる

早速broken-link-checkrを使っていきます。
npm パッケージなので、まずは npm プロジェクトを立ち上げましょう。

適当にプロジェクトフォルダを作成し公開データをプロジェクトフォルダ内にしまいます。

mkdir test && $_
mkdir dist
mv ~/hogehoge/DATA/* ./dist/

次にnpm プロジェクトを初期化します。

yarn init -y

いよいよbroken-link-checkerをインストールします。

yarn add -D broken-link-checker

ちなみに、broken-link-checkerには対象を絶対URLで指定しないといけないため、今回は開発用のWebサーバーを組み込みます。

yarn add -D http-server

これで準備は調いました！

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "broken-link-checker": "^0.7.8",
    "http-server": "^0.12.0"
  }
}

├── dist
│   ├── index.html
│   └── page-2.html
├── package.json
└── yarn.lock

検証用データ

今回の検証用データは、index.htmlとpage-2.htmlです。

<h1>TOP PAGE</h1>
<a href="./page-2.html">Go to Page 2</a>

<h1>page-2</h1>
<a href="./index.html">Go back to Top Page</a>

テスト実行

まずは簡易Webサーバーを立ち上げます。

http-server dist/

http-serverは実行したまま、チェッカーを実行します。-ro は再帰的に走査するためのオプションです。

broken-link-checker http://localhost:8080/dist/ -ro

これの実行結果は

Getting links from: http://localhost:8080/
└───OK─── http://localhost:8080/page-2.html
Finished! 1 links found. 0 broken.

Getting links from: http://localhost:8080/page-2.html
└───OK─── http://localhost:8080/index.html
Finished! 1 links found. 0 broken.

Getting links from: http://localhost:8080/index.html
Finished! 1 links found. 1 excluded. 0 broken.

Finished! 3 links found. 1 excluded. 0 broken.
Elapsed time: 0 seconds

broken が0でした！つまり、すべてのリンクは正常に動作しています。

試しに、わざとpage-2.htmlのトップへのリンクをhogehoge.htmlに変更して実行してみます。

Getting links from: http://localhost:8080/
└───OK─── http://localhost:8080/page-2.html
Finished! 1 links found. 0 broken.

Getting links from: http://localhost:8080/page-2.html
└─BROKEN─ http://localhost:8080/hogehoge.html (HTTP_404)
Finished! 1 links found. 1 broken.

Finished! 2 links found. 1 broken.
Elapsed time: 0 seconds

しっかり1 broken. でかえってきました！

もう一つ試しに外部リンクを試してみます。page-2.htmlのトップへのリンクを https://hogehogefugafuga.com/ にしてみます。

Getting links from: http://localhost:8080/
└───OK─── http://localhost:8080/page-2.html
Finished! 1 links found. 0 broken.

Getting links from: http://localhost:8080/page-2.html
└─BROKEN─ https://hogehogefugafuga.com/ (ERRNO_ENOTFOUND)
Finished! 1 links found. 1 broken.

Finished! 2 links found. 1 broken.
Elapsed time: 1 second

これもしっかり1 broken. でかえってきました！