調味料棚を作った日

ミコちゃん、前に「便利なライブラリを剥がした」って話したの覚えてる？

…Alpine.jsとTailwindにゃろ。合わせ調味料を捨てて、基本調味料で作る話にゃ

覚えてくれてたの！？(ﾟ∀ﾟ)

…で、その後どうなったにゃ

…実はね、大変だったの(>_<)

Tailwindって、すごく便利だったの。クラス名を並べるだけで、色も余白もフォントサイズも全部決まる

…それは、合わせ調味料と同じにゃ。入れるだけで味が決まるにゃ

そうそう！でも、それを捨てて素のCSSだけにしたら…

…

ページごとにバラバラになっちゃったの

…どういうことにゃ

あるページではボタンが丸くて、別のページでは四角い。ここの見出しは大きいのに、あっちは小さい。色も微妙に違う

…それは、料理で言えば味付けの基準がない状態にゃ

え？

合わせ調味料を使ってた頃は、「この調味料を入れれば味が決まる」にゃ。でもそれを捨てたら、毎回「塩はどのくらい？」「醤油はどのくらい？」って自分で判断しないといけないにゃ

うん…まさにそれだったの。毎回「この色でいいのかな」「この余白でいいのかな」って迷う

…基準がないから、作るたびに味がブレるにゃ

で、気づいたの。Tailwindが決めてくれてたことを、自分で決めなきゃいけないって

…当たり前にゃ。合わせ調味料の中身を知らずに使ってたのが問題にゃ

うっ、正論…(>_<)

…ミコが厨房を管理するときは、まず調味料棚を整理するにゃ

調味料棚？

塩、砂糖、醤油、味噌。全部ラベルを貼って、定位置に置くにゃ。そうすれば誰が料理しても同じ調味料を同じ量だけ使えるにゃ

…！(≧∇≦)

それだ！ねつきもCSSで「調味料棚」を作ればいいんだ！

…今さら気づくにゃ？

CSSでいう調味料棚ってね、デザイントークンっていうの。色、文字サイズ、余白…サイト全体で使う基本の値を、全部名前をつけて一箇所にまとめるの

…ラベルを貼って、定位置に置くのと同じにゃ

そう！例えばね…

「この金色は --color-brand です」 「見出しの文字サイズは --font-size-lg です」 「ボタンの角丸は --radius-md です」

って全部決めておくの

…なるほどにゃ。「醤油大さじ1」と書くのと同じにゃ。「適量」じゃなくて、正確な量を決めるにゃ

でもね、この「調味料棚を作る」作業がね…

…

すっっっごく大変だったの(>_<)

…どう大変だったにゃ

まず色。サイト中の色を全部洗い出して、「この色はどこで使うのか」「この色とこの色は近すぎないか」って一つずつ整理していくの

…

次に文字サイズ。大中小だけじゃなくて、見出しの階層ごとに「これは何pxで、行間はこれで…」って

…それは、調味料棚で言えば「味噌にも種類がある」問題にゃ。赤味噌、白味噌、合わせ味噌。全部「味噌」だけど、使い分けがあるにゃ

そうなの！色だけで何十種類もあって、名前をつけるのだけで一苦労…

…でも、一度棚を作れば、後は楽にゃろ？

…うん！それはそうなの！

でね、苦労の中で発見もあったの！(≧∇≦)

…何にゃ

最近のCSSって、本当に進化してるの

…CSSっていうのは、見た目を決める言語にゃろ

そう！で、昔はSassっていう拡張ツールがないと辛かったの。変数も計算もネストもCSSにはなかったから

…拡張ツールにゃ？

料理で言えば、包丁一本じゃ大変だからフードプロセッサーを使うような感じ

…ミコはフードプロセッサーを使わないにゃ

あはは、さすがミコちゃん。でもね、今のCSSは包丁だけでフードプロセッサー並みのことができるようになったの

…具体的に何ができるにゃ

例えば @layer っていう機能。これはCSSの優先順位を自分で決められるの

…優先順位

CSSって、複数のスタイルが同じ要素に当たると「どっちが勝つか」でケンカするの。昔はそのケンカの仲裁が大変で…

…料理で言えば、味付けの順番にゃ。下味、煮汁、仕上げの順に入れないと味がケンカするにゃ

そう！(≧∇≦) @layer はまさにそれ！「まず下地、次にコンポーネント、最後にユーティリティ」って味付けの順番を宣言できるの

…それは、レシピの手順を書くのと同じにゃ。手順が決まってれば、誰が作っても味がブレないにゃ

結局ね、ミコちゃん。すごく大事なことに気づいたの

…なんにゃ

Tailwindがあっても、なくても、デザインの統一感は自分で決めなきゃいけないってこと

…

Tailwindは便利な合わせ調味料だったけど、その中にどの味が入ってるか、どこでどう使うかは結局自分で考えなきゃいけなかった

…つまり、合わせ調味料を使っても「この料理にはこの味」っていう判断は必要だったにゃ

そう！道具が何であれ、「サイト全体をどういう味にするか」は自分で決めるしかないの

…当たり前にゃ

うーん、ミコちゃんには当たり前なんだろうけど…ねつきはこれに気づくまでに結構苦労したの(>_<)

…料理を始めたばかりの人は、合わせ調味料がないと味が決まらないにゃ。でも経験を積むと、塩と醤油と味噌で自分の味を作れるようになるにゃ

…！

ねつきちゃんは今、自分の味を作れるようになったにゃ。それは成長にゃ

ミコちゃん…(〃´∪｀〃)

…別に褒めてないにゃ。事実を言っただけにゃ

今、サイトにはデザインカタログっていうページがあるの

…カタログにゃ？

色はこれ、ボタンはこの形、余白はこのサイズ…全部まとめたページ。ミコちゃんの言う「調味料棚」をそのまま形にしたの

…

作るのは大変だったけど、今は新しいページを作るとき「棚から調味料を取る」みたいにスッと決まるの

…ミコの厨房と同じにゃ

えへへ、ミコちゃんの厨房から学んだの♪(≧∇≦)

…ところで、一つ気になることがあるにゃ

何？

…その「合わせ調味料」を捨てたのは、AIと作るから便利じゃなくなったって話だったにゃろ

うん

…でも今、ねつきちゃんは自分で「調味料棚」を作ったにゃ。それは結局、新しい合わせ調味料を自分で作ったってことにゃろ

…

…あ

既製品を捨てて、自家製を作ったにゃ。中身を全部知ってる、自分だけの合わせ調味料にゃ

ミコちゃん、それだよ…！(≧∇≦)

既製品の合わせ調味料は、中身がわからないから不安だった

でも自家製なら、何が入ってるか全部わかる

だから安心して使えるし、味を変えたくなったらすぐ調整できる

…ミコの梅干しと同じにゃ

え？

…既製品の梅干しは甘くて食べられないにゃ。だからミコは毎年自分で漬けるにゃ。塩と梅だけの、シンプルなやつにゃ

…ミコちゃんのペペロンチーノ版だ

…梅干しとペペロンチーノを一緒にするにゃ

でもどっちも、余計なものを入れないで、自分の手で、自分の味を作ってるんでしょ？

…

…まぁ、そうかもしれないにゃ