読者です 読者をやめる 読者になる 読者になる

ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

HTML5ビギナーズ

初めに

10/23(金)に『HTML5ビギナーズ』というイベントに参加してきました。 このイベントは「これからHTML5を始める・始めたばかりの方々のための勉強会」というテーマを掲げた開催されているイベントで、 今回で三回目の開催になるそうです。ちなみにイベントの開催自体はTwitter経由で知りました。
僕自身はWeb屋さんの仕事はしてないのですが、Web系のお仕事も出来るようにしていきたいと考え、初心に帰って本格的に勉強しようと思った次第です。

会場は株式会社サイバーエージェントさん。渋谷マークシティの17階のセミナールームにて開催されました。 (会場の前に案内版とかが無かったので、入り口で中の様子を伺いながら立ち往生してたのはここだけの話・・(´;ω;`)) なんとか無事に会場入りをし、端っこの席でMBAを展開して準備完了。

当日のセッション

本イベントのセッションは以下の3つ

吉川さん、ひろみつさんのセッションはCSSメインのお話。
泉水さんのセッションはHTML、CSSJavaScriptを書く上で重要となるソースコードのブラッシュアップについてのお話でした。

各セッションを聞いての感想

「いまさら聞けないCSSレイアウト入門」

CSSの基本であるボックスモデル(margin、padding、border)の概要、float、positionのお話でした。
自分の中で基礎の部分は固めてるつもりでいたのですが、「垂直マージンの相殺」を普通>に知らなくて詰めの甘さを実感。固められてないじゃん/(^o^)\。

基礎に不安がある方は一度目を通されることをオススメいたします。
知識の再確認も出来て、精神的安定にも繋がりますので是非!

「新しいCSSレイアウトの仕様をいろいろ調べてみた(CSS Flexible box、Regions、Shapes、etc…)」

CSS3で追加された新しい仕様をデモを交えつつ説明してくださいました。 今回のイベントのは全てのセッションでデモがあったので、個人的には大変有り難かったです。

floatで要素を配置する時に必要になる面倒な手間を省いてくれる『Flexbox』も勿論興味深い内容だったのですが、 中でも個人的に一番関心を惹かれたのが『Shapes』でした。 シェイプの外側にテキストを流し込めると聞き、思わず声が出そうになる程の衝撃・・!
四角形で構成された世界から脱却することも夢ではありません。
すご〜くワクワクしますね(∩´∀`)∩。

このセッションで紹介された新仕様は「これまでのレイアウトをより簡単に実現」「複雑のレイアウトをCSSで実装出来る」というロマンに満ちたモノです。
しかし、これらの仕様は現在仕様策定中。 仕様がコロコロ変わる可能性もありますし、ブラウザで動かす上ではまだベンダープレフィックスが必須です。
実用段階にはもう少し時間が必要でしょう・・とのことですので、辛抱強く待ちましょう!

「Brush up your Coding」

本セッションはCSSで見た目をグリグリ動かすことから離れ、コードの質向上やパフォーマンスのお話がメインでした。

  • メンテナンス性の維持
  • パフォーマンスの向上

これらの目的として、コードのブラッシュアップは必要不可欠。
また、フロントエンド側の役割は大きくなりつつあるとのこと。

  • 可読性の維持
  • バクの回避
  • パフォーマンスの維持

やる事が山積みです(汗)。役割を果たすためにはコードの質を高める事が必須であり、そのためには何をすればいいのか? ⇒『lint』を使おう!

lintツール各種

  • HTMLInspector
  • CSSLINT
  • JSHINT

上からHTML、CSSJavaScriptに対応したLintです。
実行の度に不具合や、不具合を発生される可能性のある曖昧な記述部分をチェックして警告してくれます。

セッション内では『grunt』を用いたLintの自動化にも触れてくださいました。 普段からJSの自動テストをやっている身としてはとっつきやすい内容だったのですが、 『npm』をよく知らない人にとっては、結構敷居の高い内容だった気がしてます・・。

※gruntについてはこちらのスライドを参考にするとわかりやすいと思います。

振り返り

ボリュームたっぷりのセッションでしたが、あっという間に2時間過ぎた気がします。
イベント後の懇親会ではビールをたくさん飲んで、たくさん他の参加者の方と話せたので大満足でした!

次回があれば、是非また参加させて頂きたいです。