実践的テクニック開発の決定版「HTML5テクニックバイブル」

本シリーズは実際に開発を行っているエンジニアにとって、効率よく開発できるよう逆引き形式でまとめたリファレンスです。今までシリーズとして下記の書籍を発行しています。詳細はそれぞれの紹介ページを参照してください。

今回紹介する「HTML5テクニックバイブル」も本シリーズの一冊らしく開発者に役立つ内容になっています。詳細は以下で確認してもらうとして、ここではHTML5そのものにスポットを充て紹介したいとおもいます。

HTML5が必要とされている背景

そもそもHTML5が今必要とされている理由は何なのでしょうか？大きくまとめると以下3つのポイントがあります。

ブラウザの互換性問題

ブラウザの市場シェアは長い間Internet Explorerが独占している状態でした。FirefoxやChromeが登場した頃から状況は徐々に変化し、ブラウザベンダー同士が競い合うことでブラウザの進化が急速に進みました。ところが複数のブラウザベンダーが競い合って開発した結果、ブラウザ同士で互換性のない独自実装が増え、Webアプリケーション開発者の悩みの種となり始めました。

アプリ

また、アプリ開発の視点で見ても、データの永続化、ソケット通信、音楽や映像の再生などデスクトップアプリケーションではあたりまえのようにできる機能がWebアプリケーションでは実現できないことが悩みでした。

JavaScript処理系も高速化されたことにより、ブラウザはアプリケーションプラットフォームとして注目を集めています。アプリケーションプラットフォームとして必要となる機能群の仕様を策定することは、今後もHTML5の大きな目的の1つとなっています。

マルチデバイス問題

最後のポイントとして、スマートフォンにおけるマルチデバイス対応のコストが異常に高いことを解消する目的です。

例えば、スマートフォン向けのネイティブアプリケーションは通常、iOS端末はObjective-C、Android端末はJava、Windows Phone端末であればC#やVisual Basicを用いてアプリを開発することになります。プログラミング言語やSDKの習得、アプリの実装、継続的な改修にかかるコストは、対応すべきプラットフォームの数に比例して大きくなります。

以上Webアプリケーション開発者にとって、それぞれの悩みの種を解決する可能性がHTML5にあるからです。

HTML4とHTML5の違い

HTML5が必要とされた背景は説明しましたが、HTML4と比べてコーディングの視点で見てみましょう。以下は一般的なHTML文書のひな形で比較してみます。

リストA　HTML4以前でのHTMLひな形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ―①
<html lang="ja">
  <head>
    <title>タイトル</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> ―②
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script type="text/javascript" src="app.js"></script> ―③
  </body>
</html>

リストB　HTML5でのHTMLひな形

<!DOCTYPE html> ―①
<html lang="ja">
  <head>
    <title>タイトル</title>
    <meta charset="utf-8"> ―②
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="app.js"></script> ―③
  </body>
</html>

どうでしょうか？ひな形を比較して、「⁠①DOCTYPE宣言」「⁠②文字エンコーディング記述」「⁠③type 属性」が大きく違うことに気が付くでしょうか？単純なひな形でこれだけコード量が減ることでコーディング速度の向上にもつながり、開発効率が飛躍的に向上するのもお分かりいただけたと思います。

HTML5は開発者の悩みの種を解決するばかりでなくコーディングの速度面でも非常に魅力的でHTML5でできることは多岐にわたります。詳しくは本書を参考にして頂けたら幸いです。

最後に本書籍を執筆して頂いた方著者の方からコメントをいただきました。

「あなたはHTML5を正しく理解していますか？」

上記は本書の帯に書かれた一文ですが、これは必ずしも入門者の方に向けたメッセージではありません。本書が扱っている「HTML5」の範囲は非常に広く、HTML/CSS/JavaScriptを利用した最新のクライアントサイド技術周りをまるっと含めて「HTML5」と呼んでいます。HTML5をめぐる情報は膨大なうえに変化も激しく、熟練者の方であっても細部まで把握するのは困難です。

本書ではこれらの情報を正しく整理するため、ヤフーのデザイナー、フロントエンドエンジニア、バックエンドエンジニアをバランスよく招集し、各々の得意な領域を分担して執筆しました。「⁠HTML5で出来ること」をザッと網羅した本となっており、初心者の方はもちろん、熟練者の方にとっても何かしら新しい発見のある内容になっているかと思います。ぜひ手にとってご一読ください。

この本によって、モダンなWebアプリケーションが増えますように！