2025-12-27
やること宣言
gaaamii.icon
gaaamiiのブログに少し手を入れる
勉強中メモ
gaaamii.icon
レイアウトがその場しのぎ感があったので、Every Layout のレイアウトプリミティブを用意して、それを使ってレイアウトを組むようにしてみたい。
まずはディレクトリ整理。Codexさんに以下で頼んだ
code: Codexへの指示
components のディレクトリを分けようと思います。
layout : レイアウトのためのコンポーネント。まだ実装はないので空でOKです。これからここも切り出していく予定
ui : 汎用的なUI。レイアウトとは違って特定の操作を実現するもの。Button など。
feature : 特定の機能のためのコンポーネント。Article など。
やっぱり、ui と feature の２種類で十分だな。これからつくるレイアウトプリミティブは ui の方に入れる
ディレクトリ整理はできた：https://github.com/gaaamii/blog.gaaamii.jp/pull/906
レイアウトプリミティブをつくる
Every Layout は AI もよく知ってるパターンのはず。まずはよく使いそうな以下を用意する。
Box, Stack, Cluster, Center
一個ずつレビューしたいところだけど時間がないのでバコッと作ってもらって、ざっくりレビューしてそのまま採用する。
code:Codexへの指示
ui/ ディレクトリにEvery Layout のレイアウトプリミティブを追加したいです。
Every Layout を参考に、以下4種類を実装してください
Box
Stack
Cluster
Center
指示がざっくりすぎていいものが出るか若干心配ではあをつかる。でもTailwind CSS入ってるし、Every Layout もそこそこ枯れたパターンだし、AIもよく知ってるはず。
1発目：https://github.com/gaaamii/blog.gaaamii.jp/pull/907/changes/eba8c524f154fbe08b914d3764f4932c798dafea
あってそうだけど、Tailwind CSSといい感じに統合したいので少し考える
この実装だと、style のプロパティを直に渡す形になるけど、せっかくTailwind CSSをつかってるのでそれにのりたい
props で渡せる値は Tailwind CSS に合わせてください。たとえば padding であれば、 padding="1" とすると tailwind のp-1 になる感じです。 と指示。
やったこと
gaaamii.icon
2025-12-27 日報