React開発: clsxで管理しやすいclassNameの指定方法！

はじめに

Reactプロジェクトでは、条件に応じてクラス名を追加したり、複数のクラス名を組み合わせたりする必要な時が度々ありますが、プロジェクトの規模が大きくなった時にコードが見づらくなったり、煩雑になったりします。
そこで、clsx ライブラリを使用すると、クラス名を簡単に操作でき、コードの可読性を挙げられることができます。
clsx は classnames というライブラリと比較して、バンドルサイズが小さく、ブラウザのベンチマークでも優れたパフォーマンスを示している(ソースは以下clsxのREADMEより引用)ため、最近では clsx が広く利用されています。
また、clsx の名前もclassnamesと比較すると短くてコードを書きやすいという利点もあります。

A tiny (239B) utility for constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames module.

日本語訳:
className文字列を条件付きで構築するための小さな (239B) ユーティリティです。
また、classnames モジュールをより高速に、より小さく置き換える役割も果たします。

clsxのREADMEより引用: https://github.com/lukeed/clsx/blob/master/readme.md

clsxを導入するメリットまとめ

• 動的にclassNameを指定する際にコードの可読性が挙げることが可能

• classnamesのライブラリよりサイズが小さく高速

• clsx()の方が classnames()より名前が短く記述量が少なくなる

clsxのインストール

npm install --save clsx

clsxの使い方

clsx関数は任意の引数を取ることができ、各引数にオブジェクト、配列、ブール値、または文字列を指定することでclassNameを結合することができます

import { clsx } from 'clsx';

clsx("foo bar", "baz");
//=> 'foo bar baz'


clsx("foo bar", ["baz", "fizz"]);
//=> 'foo bar baz fizz'

clsx("foo", {
 "button": true,
 "active": false
})
//=> 'foo button'


clsx("foo", {
 "button": true,
 "active": true
})
//=> 'foo button active'


clsx('foo', true && 'active');
//=> 'foo active'import { clsx } from 'clsx';

clsx("foo bar", "baz");
//=> 'foo bar baz'


clsx("foo bar", ["baz", "fizz"]);
//=> 'foo bar baz fizz'

clsx("foo", {
 "button": true,
 "active": false
})
//=> 'foo button'


clsx("foo", {
 "button": true,
 "active": true
})
//=> 'foo button active'


clsx('foo', true && 'active');
//=> 'foo active'

コンポーネントでの使用例

import * as React from "react"

import { clsx } from "clsx"

export interface TextareaProps
 extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 ({ className, ...props }, ref) => {
 return (
 <textarea
 className={clsx(
 "sample-classname",
 className
 )}
 ref={ref}
 {...props}
 />
 )
 }
)
Textarea.displayName = "Textarea"

export { Textarea }

clsxでTailwind CSSを使用する場合

clsxをtwMergeでラップすることでtailWindcssに対応したユーティリティを作成することができます。
参考: https://ui.shadcn.com/docs/installation/manual#add-a-cn-helper

補足: twMergeはnpm i tailwind-mergeでインストールが必要です

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
 return twMerge(clsx(inputs))
}

定義したcnメソッドの使い方

twMergeでラップすることで重複したTailwindCSSのクラス名を上書きすることができます

import { cn } from "@/lib/utils" // 定義したcnをインポート

cn("p-4 mt-4", "border mt-5");
// mt-4がmt-5に上書きされる
//=> 'p-4 border mt-5'


cn("p-4 mt-4", ["border", "mt-5"]);
//=> 'p-4 border mt-5'

cn("p-4", {
 "w-full": true,
 "h-20": false
})
//=> 'p-4 w-full'


cn("p-4", {
 "w-full": true,
 "h-20": true
})
//=> 'p-4 w-full h-20'

最後に

今回は clsx ライブラリについてご紹介しました。
コードを見やすく、管理しやすくするために clsx を活用してみてください！

ご覧いただきありがとうございました🦭

■『株式会社グラディート』では受託・SES・デザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！

株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/

株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/