HTML5のテンプレートとDomAPIを使ったチェッカー

# 概要
HTML5のテンプレートと[DomAPI](https://developer.mozilla.org/ja/docs/Web/API/document)の仕様を紹介するためにチェッカーをクライアント側で書く。

## HTML5テンプレート
```html:index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Front End Checker page</title>
    <meta name="description" content="Front End Check url=''">

    <link rel="stylesheet" href="css/checker.css">

    <script src="js/checker.js"></script>
  </head>

  <body>
    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
  </body>
</html>
```
**最初に必ず、`<!doctype html>`で文章型をHTML5で宣言する**。
**`<html>`は必ずページ全体を覆うよう**にする。lang属性はなるべくつける。
**`<head>`は省略しない**。
**文字コーディング`<meta charset="XXX">`は必ずする**。なるべく`utf-8`にする。
ビューポート`<meta name="viewport" ...>`は**モバイル対応を考える場合は必ず入れる**。
**タイトル`<title>Title</title>`は必ず入れる**。
概要`<meta name="description" content="内容">`はなるべく入れる。

**`<body>`は省略しない**。
中身は適当

## checker.js
### [文章型宣言(DTD)の取得](https://developer.mozilla.org/ja/docs/Web/API/Document/doctype)
`document.decltype`を通じて行う。値は`{ name:XXX, internalSubset:XXX, pubicId:id, systemId: id}`の様な形をしている。宣言がない場合は`null`になるので`document.decltype.name`を見れば十分である。

### タイトルの取得
[document.title](https://developer.mozilla.org/ja/docs/Web/API/Document/title)から取得します。

### lang属性の取得
[document.documentElement](https://developer.mozilla.org/ja/docs/Web/API/Document/documentElement)(トップノード=`<html>`)から取得する`lang`に入っている。何も設定しないと空文字。

### 文字コーディング(Charset)の取得
[document.characterSet](https://developer.mozilla.org/ja/docs/Web/API/Document/characterSet)から取得する。何も設定しない場合はブラウザのデフォルトの値が入っている。
もし先頭の宣言までチェックしたい場合は以下のようなチェックを入れるといい

```js:checkFirstCharset.js
let encoding;
if( document.head.children[0].tagName==='META' && document.head.children[0].attributes['charset']!==null ){
   encoding=document.characterSet;
}
```


### meta要素の取得
head以下のメタタグは[document.head](https://developer.mozilla.org/ja/docs/Web/API/Document/head)のchildrenから取得できます。
このChildrenはJavaScriptの[配列ではないので`for of`が使えない](https://qiita.com/fivestar/items/074671e137497a8347ee)場合があるのでスプレッド構文を使って配列に直します。

```js:getMeta.js
for( const tag of [...document.head.children] ){
   if( tag.tagName==='META' && tag.name!=null && tag.name!=='' ) console.log(tag.name,tag.content);
}
```

以上をまとめるとこのようなJavaScriptを使うことで色々な情報をページに表示できます

```js:checker.js
document.addEventListener('DOMContentLoaded', ()=>{
    console.log('===== HTML5 Checker START =====');
    const config={};

    config.doctype = document.doctype!=null ? document.doctype.name : null;
    config.lang= document.documentElement.lang!=='' ? document.documentElement.lang : null;
    if( document.head.children[0].tagName==='META' && document.head.children[0].attributes['charset']!==null ){
        config.encoding=document.characterSet;
    }


    config.meta={};
    for( const tag of [...document.head.children] ){
        if( tag.tagName==='META' && tag.name!=null && tag.name!=='' ) config.meta[tag.name]=tag.content;
    }

    console.log(config);
    const header=document.querySelector('header');
    header.innerHTML+='文章型宣言 : '+config.doctype+'<br>';
    header.innerHTML+='言語 : '+config.lang+'<br>';
    header.innerHTML+='タイトル : '+document.title+'<br>';
    header.innerHTML+='概要 : '+config.meta.description+'<br>';
    console.log(header);

    console.log('===== HTML5 Checker FINISH =====');
});
```