第60,61回HTML5とか勉強会 ｜ Advent Calendar 2015

IT系の勉強会行ってきた Advent Calendar 2015 - Adventar の20日目！

いつのまにか60回を超える勉強会になってて驚き。
久しぶりにHTML5とかに参加。

html5j.doorkeeper.jp

これからのJavaScriptの話 ~そしてES7へ~

• 1995年にJS爆誕 Brendan Eich
• ESとは？
  IEやネスケやASで独自に進化していったものを統一するための規格
  node.jsに採用、webのリッチ化に貢献
• 新しい機能色々
  var に代わる let, const
  class宣言、ArrowFunction
  import + export、Promise …いっぱいｗ

Babel で今すぐ使える ES6 体験

• BABEL使って積極的にES6の文法で書くと慣れて良い
• 新言語XYを作ってみた

ES7 Decorators

• TypeScript1.5にて仕様として採用
  Babel側はECMA Proposalsに厳密準拠なのでTypeScriptと微妙な差があるやも
• Angular2ではDecorators構文が組み込まれている
• ReduxもDecorators構文サポート

ES7 WebAssembly+SIMD

• 最近はfor文あまり使わないよね
• SIMD：1つの命令で指定したデータ領域に一括処理
  Javaのラムダ式に近い、マルチスレッドというよりはまとまった処理

html5j.connpass.com

CSS、最近どう？

• CSS3が発表された当初よりは最近はテンション上がらないなー
• 今年を振り返える
• 設計：OOCSS,SMACSS,BEM,ITCSS,RSCSS
• フレームワーク：Bootstrap,Bootstrap studio,Foundaiion,Material design Lite
• レイアウト：Flexbox,display:grid(闇を感じる)
• Icon Font と SVG

PostCSSとcssnext

• PostCSS：codepenでも使えるようになった
  過去にあったreworkを参考に作成されていて早い
• パーサーとして良さげなPostCSS、まあまあ早いしStylusの4倍、Sassの26倍
• プラグインを選択して使えるのでミニマム対応とか可能

CSS Element Queriesについて

• 要素の幅や高さに応じたスタイルを適用できるようにするJSライブラリ
• CSSの仕様ではない。JS読み込んでCSSに補足書くだけ
• 紹介してアレだけど僕は使わないｗ

まあまあ最近のCSSあたり

• CSSの担当範囲：レイアウト、装飾、+ UIの挙動
• JS等に比べ標準化に時間かかってる
• Houdini：ふーでぃーに、新しいものを開発中

CSSの検証（と教育）むずすぎ・・・なのでツールつくってみました

• DOM生成後のJSでいじった際の検証が難しい
• 計算された後のスタイル検証難しい
• スタイルとスタイルの組み合わせ検証難しい
• W3Cツールだとハックとかエラーで出すし現場にFITしない
• →Chrome拡張のツール作成 Style Validator - Chrome Web Store
• 現時点では現場の開発者のナレッジ依存なのでgithubでのPR待ってます
• NGなスタイルによる人的被害を防ぐ

JSはいつのまにかaltJSさんたちが消えていき、ES6になるのか…。

技術系の流れを見てると本体側はある程度ゆっくり進化で、周辺技術があれこれ生まれて、ある程度落ち着いたら取り込むみたいなの多い。

まだバベったことないのでバベりたいと思います！