2013年11月30日に行われたHTML5 Conference2013に行ってきたので、軽くそのレポートを書きます。最初のセッションだけで大量に書いてしまったので、まずは一発目！
会場がすげー遠かったｗｗ
最寄りの駅が仙川駅で、そこから歩いて約20分くらい・・・。
これは遠かった。
会場までにあった無人の販売店。こういうの初めて見た
モバイル時代のフロントエンド開発レシピ
まず最初にこちらのセッションに参加しました。
内容としては最初のセッションということもあって、今のフロントエンドの開発の概要を解説してくれる感じの内容です。
※動画はこちら
以下メモ
開発環境
Webアプリを開発する上で、この辺りを使うと便利
- Branch
- Yeoman
やれることはほぼ変わらず、どっちもいい感じ。
bowerを使うか使わないかがポイントになるらしい。
僕は、Yeomanしか使ったことないです。
コーディングガイドライン
チームと何かを一緒に作るにはガイドラインが必要。
外部のガイドラインを参考にすると勉強になる。抑えるべきガイドライン
結構知らない情報もあったので便利でしたわ〜。
HTMLやCSSの開発
そもそもコードは理解しやすく書かなくてはいけない。そのためには下記を意識すること
- 予測しやすい
- 再利用性が高い
- 拡張しやすい
- メンテナンス性が高い
CSSの書き方について
CSSの書き方についてはいくつか代表的なものができている。
- OOCSS：勉強したいときはwikiに→
https://github.com/stubbornella/oocss/wiki- SMACSS：本が出てるよ！
- BEM:Block Element Modifierの略。詳細はこちら→
http://bem.info/HTMLやCSSは変わってきていて、単にページをデザインするのではなく、システムをデザインすることが大切
これらのノウハウはベストではなく、ゴールへ行くための1つの方法だと考えるべき
個人的にもホントこの数年で変わったな〜というのを感じてます。
JavaScript:MV*
SPAsが流行ってきている。SPAsとはSingle Page Applicationの略でGmailのようなWebアプリケーション
メリット
- サーバサイドはjsonを吐き出すだけで良いので作りやすい
- どこでも動く
- フレームワークがいっぱいある
デメリット
- JSが肥大化してしまって重くなってしまう→モバイルが特にやばい
- SEOが弱い→クローラはJSを実行しない
- プログレッシブ・エンハンスメントしづらい（IEとかではなくモバイル端末への）
遅さに関してはキャッシュするなどの対策が必要になる。ATF（Above The Fold）を意識する。
パフォーマンス
パフォーマンスは機能になってきている。
パフォーマンスが早いか、死んでいるか
ページの読み込み
ヤコブ・ニールセンによると、ユーザーは1秒しか待っていられない。3秒になると、57％のユーザーしか残らない。
本当は1秒を目指したいが、3秒を目標にする遅くなる理由
- 画像の最適化忘れ
- CSSファイルの巨大化
- DataURIの使いすぎ。CSS Spriteの方がパフォーマンスは良い
- CSSプリプロセッサによるCSSの冗長化→対処としては吐き出したCSSを必ず読むこと
Tools, not rules!
僕は新しいもの結構好きなので、すぐ新しいライブラリとか出ると使いたくなっちゃうんですけど、ホントその通りですよね。。
ツールに騙されず、ちゃんとWebを作るようにします。。
ページ速度計測のために使えるツール
- google PageSpeed insights
- chrome DevTools
- WebPageTest.org
フィードバックの早さ
目標は60フレームでの、16.66msを意識する。パフォーマンスをあげるためには、ペイントとレイアウトを意識しすることが大切
レイアウトのプロセスを確認するには、「Show Paint Rectangles」と「Continuous Page Repainting」通い。
自動化
自動化といえばGrunt。Gruntはプラグインが多いので大抵のものは見つかる。
50分かかるタスクがあるとしたら49分でプログラムを書いて、1踏んで実行するのが望ましい。
まとめ
色々な考え方やツールがあるが、チームや作るものに寄って最適なものを自分で作る。
つまり
「時と場合による」
いやぁ、面白いセッションでした！フロントエンドについての知識がぎゅっと詰まっていて、面白かったな〜。
次のセッションも楽しみだ！
長くなってしまったので、記事を分けようと思います。
ではでは
コメントを残す