昔ながらの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 プロジェクトを立ち上げましょう。

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

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

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

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

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

検証用データ

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

テスト実行

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

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

これの実行結果は

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

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

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

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

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

その他豊富なオプションあり

broken-link-checker にはその他にも豊富なオプションがあります。

除外フォルダ・ファイルの指定、内部リンクの除外、外部リンクの除外や、cssやjsファイルへのリンクチェックも含めて多数オプションがあり、

でヘルプドキュメントから、すべてのオプションが確認できます。

まとめ

昨今はHTMLを直書きすることは滅多にないこととなりましたが、古いプロジェクトの保守等ではどうしても直接HTMLを触ることになります。

しかし、リンクチェックなど手作業でやるのは現実的ではないし、コーディング時にどんなに気をつけていてもミスしてしまうものです。

是非このようなツールでしっかりチェックし、品質を担保していきましょう。

それではまたお会いしましょう。

Share Button