背景
「よっしゃー日本語50ページおわった〜 英語ページを作るか...！」
「日本語ページをコピーして、langをenにして、スタイル用にbodyにenクラスをつけて...タイトルとdescriptionも英語にしないと...」
「あ、ページ内のリンクも英語ページにいくようにしなきゃ...」
「...」
「いつかやりもらしがでそうだな...」
というわけで、ちょっと面倒だけどチェック用のjsを書いてみました
前提
- 英語ページは以下のように対応しています
（日）/about/index.html → （英）/en/about/index.html
（日）/contact/index.html → （英）/en/contact/index.html ... - 日本語ページのHTMLをコピーして、英語ページを作成する想定です
- 全ページでmain.jsが読み込まれているものとします
- 本記事では以下の内容をチェックすることとします
- lang属性がenになっているか
- リンクが英語ページに飛ぶようになっているか
実装
大枠は以下のような感じ
main.js
/**
* ・
* ・
* ・
* ・
*
* ここらへんにはハンバーガーメニューのjsなどいろんなコードが書かれています。
* チェック用のjsはわかりやすく一番下に書いときます
*
*
*
*/
document.addEventListener("DOMContentLoaded",() => {
// urlに「/en/」が含まれていたら...
if(location.href.match(/\/en\//)) {
const checkLang = () => {
// lang属性がenになっているか
}
const checkLinks = () => {
// 全てのリンクが英語ページに飛ぶか
}
checkLang();
checkLinks();
};
})
今回はミスがあったらコンソールに表示するようにしました。また、リンクについては赤枠をつけてみました。
main.js
document.addEventListener("DOMContentLoaded",() => {
+ let isError = false; // ミスがあったらtrueになる
// urlに「/en/」が含まれていたら...
if(location.href.match(/\/en\//)) {
const checkLang = () => {
+ if(document.documentElement.lang !== "en") {
+ console.error("lang属性を確認してください");
+ isError = true;
+ }
+ }
const checkLinks = () => {
+ const links = document.querySelectorAll('a');
+
+ for (const link of links) {
+ if(!link.getAttribute("href")?.match((/\/en\//))) {
+ console.error("以下の要素のhrefを確認してください");
+ console.error(link)
+
+ link.style.outline = "2px solid red";
+ isError = true;
+ }
}
}
checkLang();
checkLinks();
};
})
lang属性を変更し忘れたり、リンク先を英語ページにとばすのを忘れたりするとおこられます。
今回はisErrorは使いませんでしたが、「isError が true だったらヘッダーのbodyを赤くする」などするとチェック事項が多くなってもすぐに気づくかもしれません（やりすぎ...？）
結果
書いたjsはそれほど難しくはないのですが、とにかくミスにすぐ気づけるという安心感がものすごく良いです。
実際に英語ページを作ってみても、やれパンくずのTOPへのリンクが英語ページになってないだの、やれlang属性を変更し忘れるだの、やっぱりミスがありました。
そういった細かいミスをconsoleくんが指摘してくれるのはとてもありがたかったです。
最後に
やっぱりこういった単純なチェック作業はコンピュータに任せたいね