React開発: clsxで管理しやすいclassNameの指定方法！
目次
はじめに
clsxを導入するメリットまとめ
clsxのインストール
clsxの使い方
コンポーネントでの使用例
clsxでTailwind CSSを使用する場合
定義したcnメソッドの使い方
最後に
安心安全の高還元SESに転職を考えている方へ
はじめに
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 { 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 }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))
}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'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に転職を考えている方へ
新しい環境に踏み出すことは、人生において重要な一歩です。
転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つになるかと思います。
どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！
グラディートと共に誇れるエンジニアを目指しましょう！
■『株式会社グラディート』では受託・SES・デザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！
株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/
株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/
