{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/nextjs-project-class-variance-authority",
  "description": "class-variance-authorityってなに？",
  "path": "/posts/nextjs-project-class-variance-authority",
  "publishedAt": "2024-07-06T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "nextjs",
    "class-variance-authority"
  ],
  "textContent": "レビューは勉強になる\n\n最近案件が立て込んでいるのは6月のまとめに書いたんだけど、結果いくつかのプロジェクトで実装ではなく、ただのレビューアーと化している。\n\n実装がしたいって今まで強く思っていた。\n\n実装が実力を伸ばす唯一の手段だと思っていたけど、レビューも真剣にやればすごい勉強になることに気が付いた。\n\nというのもレビューするには、まずコードをしっかり読まなければならないし、知らないプラグインとの出会いがあり、それを調べることで相当勉強になる。\n\nで、今回出会ったのが、class-variance-authorityというプラグイン。\n\nclass-variance-authorityとは??\n\n簡単に言うとvariantsを定義して条件分岐をわかりやすくするもの。\n\n公式にあるbuttonコンポーネントの例がわかりやすい。\n\nhttps://github.com/joe-bell/cva/blob/main/examples/react-with-tailwindcss/src/components/button/button.tsx\n\n今まで自分が実装したときはjsxのほうに条件をいろいろ書いてコードが読みにくくなっていたけど、これならコードが整理されてわかりやすい。\n\n懸念点があった\n\n懸念点はprettierが効くのか、そしてvscodeの拡張機能が正常に動くかという点だった。\n\nでもそれも公式でしっかり解消されていた。\n\nprettier\n\ntailwindのフォーマットが行われるようprettier-plugin-tailwindcssというプラグインを入れている。\n\nprettier-plugin-tailwindcss\n\nで、これがvariantsに書くと効かないことが分かった。\n\nhttps://github.com/tailwindlabs/tailwindcss/discussions/7558#discussioncomment-7345390\n\nここで議論されており、解決されていた。\n\nこの通り行った結果、うまく動いた。\n\nTailwind CSS IntelliSense\n\nこれは自動でtailwindの補完、つまり予測を出してくれるvscodeの拡張機能。\n\nこれを効くようにするには、\n\nという風に設定すればいい。で、再起動をする。\n\n---\n\nうん、勉強になった。",
  "title": "nextjsのプロジェクトでclass-variance-authorityを採用した"
}