ページ

2020-07-16

Lian-Li PC-Q21B + ASRock J4105-ITX で PC を組んだ

MSI N3150I ECO と Ubuntu 14.04.3 の罠 で書いたPCが壊れてしまった(おそらく電源がいかれた)ので、PCを組んだ。ROCK64 / Raspberry Pi 4 との戦いにつかれた。

構成は以下の通り。用途によっては良い構成だと思うので、後々の参考のためメモ。

M/B(CPU)ASRock J4105-ITX (Celeron J4105)
メモリKingston KVR26S19S6/4 (SODIMM DDR4 PC4-21300 4GB)
HDDTOSHIBA MQ04ABF1 (1TB 5400rpm 2.5")
ケースLian-Li PC-Q21B
電源SilverStone SST-ST30SF V2
ケースファンアイネックス Omega Typhoon G 120mm CFZ-120GLA
ケース内USBケーブルサンワサプライ USBケーブル 0.4m TK-USB2

以前のIW-BM639が(W)112mm x (H)264mm x (D)230mmなのに対し、PC-Q21Bは(W)149mm x (H)257mm x (D)224mmなので幅がだいぶ大きい感じ。でも、汎用のSFX電源が積めてフルハイトのPCI-Expressボードが入るとなると、妥当じゃない?という感じで、結構気に入っている。かわいいし。DVDドライブの部分がスロットイン限定ならなくてよくない?というのはいまいちだけど。


 サンワサプライのワットモニター(TAP-TST8N)を買ってみたので測ってみると消費電力は15Wほど。RasPi4 (+HDD)が5Wほどなので、さすがと思いつつまぁ15WはPCとして見たらいいんじゃないかな。

2020-07-05

emotionの内部構造(CSS-in-JSの裏側)

書いたスタイルがどうなるかという観点でemotion(emotion-js) v10の内部構造を調べたので図にした。styled-componentsもざっと見たけど、だいたい同じような感じ。




emotionをReactと組み合わせて使う場合、基本的には以下の動きをする(SSRが入るとちょっと違う)
  1. css`` あるいは styled.hoge`` が、SerializedStyles (ほぼ書いたとおりの状態のスタイルを表現するオブジェクト)を作る。ハッシュ+ラベルでnameがつく。
  2. ラップするための「jsx」関数か「styled」のコンポーネントが、React Contextを使ってEmotionCacheを探し出して、SerializedStylesをinsertStyles()する。
  3. EmotionCacheが、stylisでSerializedStylesを加工する(実際に使われるスタイルはここでできる)。
  4. stylisプラグインが、StyleSheetオブジェクトを経由して、containerに指定された要素(デフォルトではdocument.head)にstyle要素を挿入する。
  5. 「jsx」関数か「styled」コンポーネントが、スタイル適用された要素をclassNameを渡すことで作る。
createCache()でEmotionCacheは作れるので、CacheProviderと合わせると木の途中からdocument.head以外の場所、例えばiframeの向こう側にもstyleを挿入することができる。

Reactでない他の枠組みと統合するときは、以下を作ることになるかなという感じ。
  • cacheをつくるところ
  • (SerializedStyleを作るところ→css`` をそのまま使うのでもあり)
  • cacheを見つけてinsertするところ