useCallbackはとりあえずつけておく

useCallbackはとにかく使え！　特にカスタムフックでは - uhyo/blog

useCallbackはメモ化したコンポーネントに渡す関数に使うものだと思っていたがそもそもそれも間違いで、useEffectに関数を渡すときに関数が再生成されないようにするために使われたりするというのを知った。

そしてuseCallbackはメモ化とは関係ないところで使うと関数のprev/nextの状態比較みたいなもので若干のオーバーヘッドがあるため基本的には使わないほうがいいのかな？と思っていた。

が、この記事を読むとhooksとして切り出した関数は特に「どこから呼び出されるか」を知らない状態が当たり前であり、責務を分離するのが正しい。

hooksに分離した関数を使う側がコールバック化したくてhooksに置いた関数に変更を加えるのは使う側の都合で手を加えることになる。

hooksは使われる側のことを知らず責務を分離しているのだから、使われる際により汎用性が高く使えるようにuseCallbackで常に囲んでおくのがいい、という話。

とりあえず囲っておけば、微小なオーバーヘッドが発生するデメリットの代わりにメモ化したコンポートで再レンダリングを抑制するという大きなメリットが生まれ、「コスパのいい」設計になるということ(で合ってるはず)

これを読む前は「なんでこんなメモ化の関係ないところでuseCallbackを……？」と思っていたが、この記事を読んで完全に納得しました。

hooksに切り出した関数は基本的にuseCallbackをつける方針でいきます。

Grid Layoutに入門している

CSS Grid Layout を極める！（基礎編） - Qiita

行や列にグルーピングしたラベルがあるテーブル構造などを作るときにUIライブラリだと難しい感じになったのでGrid Layoutを使っていい感じにやろうとしている。

難しい。

CSSをめちゃくちゃ書く感じになるんだろうけど、こればかりは仕方がなさそう。

記事のステップ3でレイアウトを組む際の方法が二つ提示されているが、個人的にはBのほうが書く側も読む側もわかりやすいのではないかと思っているが実際にGrid Layoutを使っている人々はどのような見解なのか知りたい。

ちなみに自分がそう思う理由は、BのほうはCSS上にエリアの名前と専有位置がグラフィカルに表現できるからというもの。

box-decoration-break

文字の下線をCSSでいじれないか試していた。

text-decoration: underline #red 1px solid;を指定した要素と同じセレクターにtext-underline-offset: 0.2em;といった指定をすると下線の位置を調整できたりする。

が、例えば下線に対して両端にborder-radius: 2px;のようなものを指定したりしたかったがそれは無理そうだった。

悩んでいたら、Twitter……ではなくXでYENDさんがリプライをくれた。

既に解決済みかもですが、こういう感じならギリいけるかもです？（想定してるスタイルと違ったらすみません🙏）https://t.co/qZYBzsasEU

— YEND (@yend724) July 31, 2023

知らないプロパティがいっぱいあって勉強になった。

個人的にはbox-decoration-breakを知らなくて、こういう下線みたいな文章に対する装飾って長さをCSSで決めたりすると文字サイズや画面サイズが変化したときに対応できずデザインが崩れることを避けられないと思っていたんだけど、これを使うと改行に合わせていい感じにやってくれるので嬉しい。

CSSのボックスモデル

CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方 | コリス

YENDさんにいただいたサンプルにあったpadding-inlineというプロパティを知らなかったので調べたらこの記事が出てきた。

普通にtop``bottom``left``rightのような指定の方法でずっと書いてきたので、何もわかってなかったんだな……となった。

ボックスモデルを理解してやっていきたいと思います。