HTML5の必要最低限のテンプレートについて考えました

HTML5

HTML5のテンプレートといえばHTML5 Boilerplate

HTML5 Boilerplate はHTML5のテンプレートとして有名です。boilerplateという単語の意味を調べてみました。「boilerplate 和訳」のキーワードでWebで検索したところ、自動詞では「登録した短文を文書中に挿入する」、名詞では「決まり文句、常用文、短文挿入、文例集」という感じです。HTML5 Boilerplateは日本語ではHTML5の決まり文句といえば良いでしょう。Wikipediaの中ではboilerplate codeとして英文の記述がありました。この英文を和訳すると「コンピュータプログラミングでは、ボイラープレートコードまたはボイラープレートは、ほとんど変更を加えずに多くの場所に組み込む必要があるコードセクションを指します。」でした。

HTML5 Boilerplateとの付き合い方

HTML5 BoilerplateのホームページによるとWebのもっとも有名なフロントエンドのテンプレートですよ、として紹介されています。また、特長として次の4つの項目が紹介されています。

  • Google Analytics、アイコンなどのサポート
  • jQueryとModernizrのサポート
  • Normalize.cssとヘルパーのサポート
  • ハイパフォーマンス

サポートしている範囲は今のWebのフロントエンド開発の傾向にあっていると思います。ドキュメントも豊富にあるので困ることはないと思います。必要十分な機能を持っているといえます。ここから必要最低限にするには不要な箇所を削除するのがHTML5 Boilerpalteとの付き合い方になります。

HTML5 Boilerplateのindex.html

HTML5 Boilerplateのホームページからダウンロードしたindex.htmlの中身はこうなっています。バージョンはv6.1.0です。

<html class=”no-js” lang=””>のclass=”no-js”の部分はmodernizrが使います。modernizrの利用を見送る場合は<html lang=”ja”>と書き換えます。また、jQueryは使わないよという人はscriptタグのjQueryを呼び込んでいるいる部分を削除していきます。

などと考えている時点で疲れてきました。これは必要最低限のテンプレートではなく必要十分なものという印象を持ちました。考え直して必要最低限とは何かを整理することにします。

必要最低限のテンプレート

必要最低限を次に整理します。

  • ブラウザにhtml5として認識してもらう
  • ブラウザに日本語のページであり、かつ文字コードはutf-8として認識してもらう
  • 自分で記述したCSSを読み込む
  • 自分で記述したjavascriptを読み込む
  • IE(InternetExplore)とSafariの存在は今は忘れる

それに加えnormalize.cssを使うことにします。

出来上がったテンプレート

ディレクトリ構造は次のとおりです。

template.htmlの内容は次のとおりです。DOMContentLoadedイベントが発火されたタイミングでfoo.jsのinitModuleメソッドを呼び出しています。

foo.jsの内容は次のとおりです。foo.jsはモジュールパターンで記述しています。公開しているメソッドはinitModuleメソッドになります。

foo.cssの内容は空にしてあります。

ローカルにあるtemplate.htmlをブラウザから読み込むと「テンプレートページです。」と表示され、Google Chromeのデベロッパーツールのコンソールに「DOM Content Loaded」と出力されていることを確認できます。

必要最低限なテンプレートにすることでHTMLとCSSとjavascriptの関係が理解しやすくなったと思います。

コメント