HTML5 TechTalk #5に参加してきた
html5-developers-jpの企画、HTML5 TechTalk#5に参加してきました。
html5-developers-jpには以前から参加していて（といってもROM専門）なんどかTechTalkやってるのは知っていたのですが、どうもエンジニア向けのお話が多いような気がして遠慮していたのですが、今回は「HTML5にほとんど／全く触れたことのない開発者や、マークアップエンジニア」が対象とのことなので行ってまいりました。
場所はなんとGoogle 東京オフィス！ということでセミナー自体も楽しみだったのですが、オフィス潜入もわくわくしながら行ってまいりました。※しかしこの日は食堂での開催でしたので、オフィスは見れなかったのです・・
内容は、前半がHTML5.JP運営の羽田野 太巳（はたの ふとみ）さんによるHTML5 Formsの解説、後半がhtml5-developers-jp管理人で株式会社あゆたの白石 俊平（しらいし しゅんぺい）さんによる「HTML5のしるしかた」の2部構成でした。
HTML5 Forms
HTML5 で新しく加わったフォーム周り要素の紹介でした。現時点では対応ブラウザがOperaのみのものが多いため恩恵をすぐに受けられるわけではないのですが、Progressive Enhancement の精神で明日からでも導入できそうな感じでした。前方互換なコードを書いても非対応のブラウザでエラーがでないのはHTML/CSSの利点ですね。
具体的には
- input type="number"
- input type="url"
- input type="email"
- input type="search"
- input required
- input placeholder="##"
- input pattern="RegExp"
などはもう導入しちゃっても問題ないですね。非対応のブラウザではinput type="text"で扱われるようですし。
他にも
- input@form と form@id による関連付け
- input@formaction によるaction先の切り分け
など、知らなかった使い方もキャッチすることができました。
HTML5によるパフォーマンスアップ
これしらなかったんですけど、HTML5って
とか完全省略しても、つまり記述しなくてもvalidなんですね。他にも終了タグが省略できたり、引用符も書かなくてもOKだったりします。コンパクトな記述が許容されることによって、HTMLファイルサイズが軽減し、結果パフォーマンスもアップするようです。省略記述って管理面を考慮するとあんまりだな・・って思っていたのですが、削りに削れば5~20%は落とせるようなのでこれは見方が変わりました。HTML5のメリットってなに？って聞かれてもイマイチ明解な返事ができなかったのですが、パフォーマンスの向上はビジネスメリットでもあるので、今度からのネタができました。まとめ
実は私はすでに業務でHTML5を実装していてリリースもされているので、今回のターゲット（HTML5にほとんど／全く触れたことのない開発者や、マークアップエンジニア）からは少し外れていたのです。知っている内容や検索すれば出てくる内容も多かったのですが、体系的にまとめてくださっていたので、すんなり頭に入ってきました。前々から思っているのですが、体系的・俯瞰的な学習は実践のあとにやったほうが効率いいですね。
