スノボ行ってきた

25人の集団の幹事意味わからんほど大変だった。 鍵とかはまあ別にって感じだけど。 時間を決めるのとかサッサと決めたいけど、慣れてないとどのくらいの時間が必要か判断つかない。 一度経験すれば、この程度の時間がかかるみたいな指標が自分の中でできるので楽。 例えば、集まるのにこれくらい時間がかかるから何分前集合みたいな。 たぶんこれは、何にでもいえて、とりあえず自分中で指標ができるまで誰かに頼らざる得ない。 まあある意味今回みたいな雑な集団でこういう体験できてよかった。 あと役割を適当に割り振るのが正解で、点呼係決めてから一気に楽になった気がする。 もっと雑に役割を振り分けておくとよかったかも知れない。 小学校の◯◯係。あれは完全に正しい。 色々ハプニングもあったが、まあ全体として満足度は高いものになったと思う。 色々助けてもらったので、感謝をしつつこの辺で振り返りを終わりにする。

styled-componentsの作者とtwitterで会話した。 この歳になっても全然英語できるようになってなくて、今まで俺は何をしていたんだって気持ちになった。

styled-componentsは、本当によく出来ててコードの見通しがよくなるしまじでいいと思う。 あとで、コールドリーディング。

いや、しないな。 あとでっていうとたいていできないんだ。 今から25分時間をとってやる。

見るべきところは、どのようにcssを生成してclassNameをあてているかを知れればいい。

npm-src styled-components
yarn

https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/index.js#L3 シングルトンかのコメント便利

https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/index.js#L22 デコレータっぽい処理

styledを見に行く

styledComponentsをうけとって

https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/types.js#L2 Interpolationはcssのruleのことっぽい

Targetは、stringはreactClass テンプレートリテラルはどうつくるの? funcはただの関数 ${}があればその前後で分割

var a = (...arg) => arg.map(x => 'hello' + x).join()
a`A${1}B${2}C`
'helloA,B,C,hello1,hello2'

domElemntsをforEachで回してそれぞれの関数をつくる。 DI.styledComponent関数に適用する

styledComponentを見に行く https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/models/StyledComponent.js

コレ自体も高階関数 クラスを関数でラップ 渡ってきただけで処理はしてない。

コメントが書いてある

* Flattens a rule set into valid CSS
* Hashes it, wraps the whole chunk in a ._hashName {}
* Parses that with PostCSS then runs PostCSS-Nested on it
* Returns the hash to be injected on render()

cssをフラットにして(nestに対応してるため) ハッシュ化し、チャンク全体をラップ PostCSSでパースして、PostCSS-Nestedを実行 ハッシュを返してrender()にインジェクトする

ここから面倒になったので、コードに直接コメント書いた。

どうハッシュを生成するか

cssのインジェクトはGlamorを使ってる てゆうかめっちゃGlamorに依存してる Glamorやばい

styled-componentsが力を割いてるのは、themeとの合成。 themeのためにHOCでシンプルなイベントエミッタを導入してコンテキストでぶちこんだり。

hashのclassNameをCloneElementでpropsを混ぜるのは、汎用的なパターンで使えそう。