Tailwind CSS を使う時に一緒に入れたいライブラリが参考になった。 px-4とpy-6というクラスを持つコンポーネントにp-10というクラスを渡した場合、CSS カスケードにより、p-10というスタイルは無視される。 CSS カスケードというのは、 異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズム のこと。 で、今回は詳細度でp-10は無視される。 ただコンポーネントで上書きしようとしたスタイルが無視されるのは困る。 そこで必要となるのが、tailwind-merge。 tailwind-mergeはコンフリクトした Tailwind CSSのクラス名を取り除きつつ結合するライブラリで、上記では後から指定されたp-10により、px-4とpy-6というクラスが結果からとりの結果から取り除かれる。 結果、意図した挙動をするコンポーネントができあがる。

レビューは勉強になる 最近案件が立て込んでいるのは6月のまとめに書いたんだけど、結果いくつかのプロジェクトで実装ではなく、ただのレビューアーと化している。 実装がしたいって今まで強く思っていた。 実装が実力を伸ばす唯一の手段だと思っていたけど、レビューも真剣にやればすごい勉強になることに気が付いた。 というのもレビューするには、まずコードをしっかり読まなければならないし、知らないプラグインとの出会いがあり、それを調べることで相当勉強になる。 で、今回出会ったのが、class-variance-authorityというプラグイン。 class-variance-authorityとは?? 簡単に言うとvariantsを定義して条件分岐をわかりやすくするもの。 公式にあるbuttonコンポーネントの例がわかりやすい。 import React from "react"; import { cva, type VariantProps } from "class-variance-authority"; const button = cva("button", { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:bg-blue-600", ], secondary: [ "bg-white", "text-gray-800", "border-gray-400", "hover:bg-gray-100", ], }, size: { small: ["text-sm", "py-1", "px-2"], medium: ["text-base", "py-2", "px-4"], }, }, compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }], defaultVariants: { intent: "primary", size: "medium", }, }); export interface ButtonProps extends React....

6月に読んだ本 時をかけるゆとり (文春文庫) 朝井リョウの正欲がすごいらしいと聞き、タイミングよくアンリミテッドになっていたので、時をかけるゆとり (文春文庫)を再読した。うーん、朝井リョウの小説は好きだけど、随筆は微妙かもしれない。文章もそれっぽく書いているけど、書ききれていないというかなんというか。空回りしているというかなんというか。エピソードは面白いんだけど。 今月はこれ1冊のみだった。 なんかダイヤのAをずっと読んでた気がする。 ブログの改造 WordPressから記事をHugoに大体移植した HugoのPaperModにGA4を導入する Hugo(Pagermod)で記事にGitのコミット履歴から最終更新日を付与する だいたいこれで落ち着いたかしら。 後はしっかりアウトプットしていく。 今年の目標が今年の進行速度に敗れる 6月目標のネイティブアプリ作成。Cloud SQLへの接続まで完了はしたのでバックエンドの環境は整ったんだけど、テストしているとどんどんどんどん、課金されていく。多分これは本番運用に耐えられない。ということでマネードクターストップがかかった。GoでAPI作るっていう目的は達したので、まあ、良くやったといっていい気がする。 ただリリースしない個人開発は何も成し遂げていないので、まずは最短でリリースを目指すために、nextとsupabaseに構成を変更する。 そのうえで、ネイティブアプリを作ることする。 ネイティブアプリ作成を諦め、まずはウェブ版をリリースに注力することにした 10月まで仕事が繁忙期を迎える 7,8,9と案件が山場を迎えるので、仕事にコミットしようと考えている。 個人開発も勉強になるけど、仕事だって勉強になる。 ということでウェブ版も少しお休みにして、今から3か月だけ仕事人間になる。 基本情報技術者試験を10月に受けるという宣言 個人開発はお休みするけど、隙間時間で勉強はできるので、基本情報技術者試験の勉強をすることにする。 どのくらいで受かるかわからないけど、この3か月、時間の隙間で勉強していく。 そして10月に必ず、試験を受ける。 8月になったら申し込む（今すぐに申込できないところが決意の弱さを表している…）。 ロタウィルスが猛威を振るった プライベートでは双子と妻が同時にロタウイルスの餌食になった。 結果、何もできないポンコツがひとりぴんぴんしていた。 何もできないので、ただ1週間会社を休み、おろおろしていた。 ご飯くらい作れないとこの先どうしようないということをひどく痛感した。 できることだけをやって家事している気になるなんて滑稽でしかない。 時期を見て妻に師事しようと思う。 保活って話で聞くより、壮絶かもしれない 来年の4月から双子が保育園に通うことになる。 きっと。 きっとというのも保育園に入れるのが壮絶難しい。 来年の4月からなのにもう見学が始まっているし、入れそうなところに見学行くとうーんとなる。 行きたいと思っているところは、そもそも空きがないし、数枠あっても双子がその数枠を占められるのかっていうのが不安視される。 しかも驚くべきことに双子には加点がない。 保育園落ちた日本死ね!!!、約10年前で他人事だったけど、自分事になってきた。 というより10年間、対策はないのかしら。 まあ、選ばなければ入れるし、そう考えるとそんなものか。 ただ自分の子どものことなるとみんな熱くなるのは仕方ない。 とりあえず、8月の「おかあさんといっしょスペシャルステージ」に当選したので、それを楽しみに8月まで保活する。 とはいっても自分は見学に行くだけなんだけど、妻が色々動いてくれて頭が上がらない。 Surface Pro 買った。遂に。 7月に届くので所感はその時。

tailwindのconfigで定義したprimaryの色とかをtailwindのクラス以外で使用したい。 import type { Config } from "tailwindcss"; export const customColors = { primary: "#2563eb", secondary: "#4b5563", danger: "#cd2626", success: "#16a34a", warning: "#f59e0b", }; const config: Config = { theme: { extend: { colors: customColors, }, }, plugins: [], }; export default config; みたいにすればいい。

会社のPCを新しくしてもらった。 本当はSurfaceが良かったのだが、贅沢は言えない。 それにSurfaceだけど、チップがArmベースに移行したということで、ちょっと口コミが良くない。 個人で買うつもりだったけど、すこし迷いが生じている。 ともかく会社のPCが新しくなった。 で、そうすると移行作業が生じるのだが、非常に楽になっていた。 今回、とにかく移行したいのはWindowsにインストールしたアプリとvscodeの拡張機能の2つ。 Windowsにインストールしたアプリを以降 wingetを使用したら、何とも簡単に移行できた。 WingetでWindowsにアプリをインストールする これのインストール情報をエクスポートするを実行すれば何の問題もなく移行できる。 vscodeの移行 こちらはプロファイルを使用する。 vscode右下の歯車アイコンをクリックし、プロファイル（規定）をクリック、最後にプロファイルをエクスポートを選択し、エクスポートする。 次にそれをインポートすれば、移行が完了する。 新しいPCを迎え入れるストレスが減った。