d.sunnyone.org

2021-05-11

<List.Item> スタイルのコンポーネントの定義

Reactでリストのコンポーネントを定義するとき、liの持たせ方だったりアイテムのネーミングだったりで作りにちょっと悩んだりするのだが、HogeList / HogeList.Itemの形にするとあまり考えなくてよくなるので便利。

参考： React で <Stack.Item> みたいな作り方の使い所を考える

ShopifyのものはReact.VFCを使っていないので、使ったもののメモを残しておく。

定義するところ

使うところ

2021-04-14

css-loader の camelCase オプションの行方

微妙に違うオプション名が出てくることがあるので調べたらこんな感じらしい。また調べなくて良いようにメモ。

バージョン	名前	備考
v4.0.0	modules.exportLocalsConvention	README / Release
v3.0.0	localsConvention	README / Release
(v2.1.1とv3.0.0の間)	exportLocalsStyle	README / commit ※1
v1.0.0	camelCase	README / Release
それ以前	camelcase

※1: 「exportLocalsStyle」は気にしなくてもよいはずだが、v3.0.0のBREAKING CHANGESで唐突に「exportLocalsStyle option was remove in favor localsConvention option」と出てくるので「camelCase」とつながらない

2021-03-31

node/browser環境での重複確認用ハッシュ文字列生成メモ

emotionのdata-属性で使っているような値が欲しかった。 emotionは@emotion/hashとして持っているものの、内部用かなぁと思うのでmurmurhashを使ってみた。 TextEncoderを使っているので環境によりpolyfillが必要。

import murmurhash from "murmurhash";

function hashString(s) {
    return murmurhash.v3(s).toString(36);
}

console.log(hashString("hfogfffe")); // 6bmwh9

参考

高速ハッシュアルゴリズム – YOSBITS

2021-02-12

Loqui 0.7.0 リリース

Gtk3に対応したLoqui 0.7.0をリリースしました。

https://github.com/sunnyone/loqui/releases

微妙に見た目が違うのですが、まずは動くのが大事だと思ったのでリリースしました。何かおかしかったら教えてください。

レポジトリはLaunchPadからGitHubに移動しました。本当はActionsでビルドできるようにしようかなと思ったのですが、結構手間がかかりそうなのでとりあえずパス。

gtk2から3の変更点はここに書いている通りで、deprecatedを許容すれば、基本的には機械的に変えていけばいいものばかりなんですが、CSSでスタイリングするようになったためなのか、サイズを変えてるような処理のところがちょっと形を変えないといけないかなという感じです。

2020-12-21

tmuxで複数の開発サーバーを一括で起動する

Next.jsを複数動かす必要があったり、SPAをwatchしつつバックエンドも起動しておく、みたいな開発環境の場合、ひとつひとつ立ち上げるのは手間なので、tmuxで一括起動するスクリプトを作った。バックエンドは左にでかく、フロント達は右に、みたいなのは考慮せず、縦に並べるだけ。

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)
HDD	TOSHIBA 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が入るとちょっと違う）

css`` あるいは styled.hoge`` が、SerializedStyles (ほぼ書いたとおりの状態のスタイルを表現するオブジェクト）を作る。ハッシュ+ラベルでnameがつく。
ラップするための「jsx」関数か「styled」のコンポーネントが、React Contextを使ってEmotionCacheを探し出して、SerializedStylesをinsertStyles()する。
EmotionCacheが、stylisでSerializedStylesを加工する（実際に使われるスタイルはここでできる）。
stylisプラグインが、StyleSheetオブジェクトを経由して、containerに指定された要素（デフォルトではdocument.head）にstyle要素を挿入する。
「jsx」関数か「styled」コンポーネントが、スタイル適用された要素をclassNameを渡すことで作る。

createCache()でEmotionCacheは作れるので、CacheProviderと合わせると木の途中からdocument.head以外の場所、例えばiframeの向こう側にもstyleを挿入することができる。

Reactでない他の枠組みと統合するときは、以下を作ることになるかなという感じ。

cacheをつくるところ
(SerializedStyleを作るところ→css`` をそのまま使うのでもあり)
cacheを見つけてinsertするところ

ページ