藪下＠２課のHTMLとかJavaScriptとかよくわからない子です。
HTML5Exparts.jpさんが定期的に掲載している海外記事の紹介があるんですが、今回のトピックに藪下の心に直撃したのが二つほどあったので紹介します。
まずはHTML5Exparts.jpさんの記事はこちら。
HTML5Exparts.jp記事紹介
JavaScript Promises、CSS変数、Quartz ComposerのプラグインOrigamiなど海外WEBテク20本を一挙公開
http://html5experts.jp/cssradar/4509/
この記事で紹介されているJavaScriptにPromiseが入るぞというお話とCSSに変数が導入されるぞというお話が藪下の注目トピックです。
Promiseのお話
JavaScriptにおけるPromises実装について – HTML5 Rocks
http://www.html5rocks.com/en/tutorials/es6/promises/
藪下は過去の記事で触れている通りプロミスのような仕組みは面白いと思っています。計算や式を運ぶ方法があるというのは抽象的な観点を失わずに（つまり局所的な事情を知らずに）物事を記述する機会を増やせるということだと思っているので、こういったプロミス（とかFutureとか呼ばれる）のようなパターンやモナドや継続のような概念の導入はワクワクしてきます。
紹介されている記事は結構いろいろしっかり書いてくれてますね。どういう使い方するものなの？ とかAPIリファレンスとかちゃんとあります。
藪下もざっくり読みなんで読み違えてるかもしれませんが、大体以下の見出しから図が出てくるあたりまでわかりやすくてよいです。
＃英語読めなくてもコード読めるしね！
Complex async code made easier
http://www.html5rocks.com/en/tutorials/es6/promises/#toc-coding-with-promises
そして気になるAPIリファレンスが以下。
Promise API Reference
http://www.html5rocks.com/en/tutorials/es6/promises/#toc-api
このPromiseがChromeとFirefoxの開発版で使えるようになってるそうです。
CSSに変数が入るお話
CSSの変数(Custom Properties)で遊んでみよう – That Emil
http://thatemil.com/blog/2013/12/15/playing-around-with-css-variables-custom-properties/
これもFirefoxのNightlyですね。
CSSってなんで変数ないんだろうと前から思っていて、CSSプリプロセッサの類を知ったときはそうだよねーと思ったものです。藪下はCSSの思想とか設計原理とかよく知らないしCSSに変数を追加するペーパーが出たときから議論されてる内容も追いかけてないんですが、静的な意味だけでも変数がないとDRY原則を満たしづらいこととか出てきてめんどうですよね。いつかどこかでミスる。もちろん動的に値を変える意味でも変数があるといいなと思いますけどね。
で、肝心の内容をざっくり見てみましょう。まずvar-で始まるカスタムプロパティが変数になるようです。HTML要素におけるdata-属性みたいなもんだよとのことです。
:root {
var-primary-color: firebrick; /* これが合法な色キーワードになるよ超クール！ */
}
これを参照するにはvar()関数にvar-をつけないプロパティ名とフォールバック値を与えるとのことです。これもHTML要素におけるelement.dataset APIみたいなもんだよ（ただしキャメルケースできない）とのことです。フォールバック値は変数がそこまでに宣言されていなくて継承もされていないとき用のデフォルト値だと思えばいいんですかね。
.myComponent {
color: var(primary-color, #000);
}
それ用のAPIも定義されたのでJSからも参照できるみたいです。
// hogeはなんかのDOM要素
hoge.style.var.get('primary-color'); // プロパティ名にはvar-付けない
つまりは条件付きCSSみたいなことできちゃうってことですよね。夢がひろがりんぐ！
詳しくはW3Cの仕様見ましょう。
CSS Custom Properties for Cascading Variables Module Level 1
http://dev.w3.org/csswg/css-variables/
さいごに
たまには海外のブログも面白いですね。英語力ないので誰かが紹介してくれないと面白いことがあっても気づきもできないですが。
あ、一応記事は読んだうえで書いてますが社内でも英語の読めなさ書けなさに定評のある藪下の英語力を信用してはいけませんので皆様も自分で読んでみてくださいね。
