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

スノボ行ってきた

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を混ぜるのは、汎用的なパターンで使えそう。

結物語を読もうと思った

結物語を読もうと思って本屋いったんだけど、隣にあった撫物語まだ読んでないことに気づいた。

楽しみにしてるものに気づかないのまじで重症かも知れない。

集中ができない

全く集中ができない。

文章を読んでいて、前から読んでいたつもりが飛び飛びで読んでいて、ふと我に還って驚いた。

インターネットをする時間を削ることが必要かもしれない。