Zenn
🙆

clsx入門 - 動的CSSクラス生成のためのJavaScriptユーティリティの紹介

2024/08/31に公開
CSS
JavaScript
Next.js
React
tech

1. はじめに

https://github.com/lukeed/clsx

2. clsxの基本概念

  • clsxは、複数の引数を受け取り、それらを結合してCSSクラスを生成します。
  • 主な特徴は、条件によってCSSクラスを追加できること、オブジェクト、配列、文字列などさまざまな型の引数を扱えることです。

3. 主要な機能と構文例

3.1 文字列引数（可変長引数）

  • 複数のCSSクラスを文字列として渡すことができます。条件式と組み合わせることも可能です。
  • 使用例
    clsx('header', true && 'active', 'container');
// 結果: 'header active container'

3.2 オブジェクト引数

  • キーがCSSクラス、値が真偽値のオブジェクトを渡せます。trueの値を持つキーのみがCSSクラスとして使用されます。
  • 使用例
    clsx({ header: true, active: false, container: isVisible() });
// 結果: 'header container' (isVisibleがtrueを返す場合)

3.3 オブジェクト引数（可変長引数）

  • 複数のオブジェクトを引数として渡すことができます。nullも安全に扱えます。
  • 使用例
    clsx({ header: true }, { active: false }, null, { 'text-center': true });
// 結果: 'header text-center'

3.4 配列引数

  • CSSクラスを含む配列を渡すことができます。falsy値は自動的に無視されます。
  • 使用例
    clsx(['header', 0, false, 'container']);
// 結果: 'header container'

3.5 配列引数（可変長引数とネスト）

  • 複数の配列を引数として渡すことができ、配列のネストも可能です。
  • 使用例
    clsx(['header'], ['', 0, false, 'active'], [['container', [['text-center'], 'bold']]]);
// 結果: 'header active container text-center bold'

3.6 複合的な使用（ネストを含む）

  • 文字列、配列、オブジェクトを組み合わせて使用できます。深いネストも処理されます。
  • 使用例
    clsx('header', [1 && 'active', { container: false, 'text-center': null }, ['bold', ['italic']]], 'footer');
// 結果: 'header active bold italic footer'

4. React例にclsxを使用する場合・しない場合を比較してみる

clsxを使用する場合

React

import clsx from 'clsx';

const Button = ({ primary, disabled, className }) => {
  const buttonClass = clsx(
    'btn',
    primary && 'btn-primary',
    disabled && 'btn-disabled',
    className
  );

  return <button className={buttonClass}>Click me</button>;
};

出力HTML

<button class="btn btn-primary btn-disabled custom-class">Click me</button>

このコードでは、ButtonコンポーネントのCSSクラス名を動的に生成しています。primaryとdisabledプロパティの値に応じて、対応するCSSクラスが追加されます。また、外部から渡されたclassNameも結合されます。

clsxを使用しない場合

React

const Button = ({ primary, disabled, className }) => {
  let buttonClass = 'btn';
  
  if (primary) {
    buttonClass += ' btn-primary';
  }
  
  if (disabled) {
    buttonClass += ' btn-disabled';
  }
  
  if (className) {
    buttonClass += ' ' + className;
  }

  return <button className={buttonClass}>Click me</button>;
};

出力HTML

<button class="btn btn-primary btn-disabled custom-class">Click me</button>

clsxを使用しない場合、条件分岐と文字列の結合を手動で行う必要があります。これは、条件が増えるほどコードが複雑になり、可読性が低下します。

比較まとめ

  1. コードの簡潔さ: clsxを使用すると、条件付きのクラス追加をより簡潔に記述できます。

  2. 可読性: clsxを使用したコードは、どのクラスがどの条件で追加されるかが一目で分かりやすくなります。

  3. 保守性: 新しい条件やクラスを追加する際、clsxを使用したコードの方が変更が容易です。

このように、clsxを使用することで、コードの簡潔さ、可読性、保守性が向上します。
特に、多くの条件分岐や動的なクラス追加が必要な複雑なコンポーネントにおいては、clsxのメリットは大きいです。

5. clsxの利用場面

  • Reactコンポーネントでの条件付きスタイリング
    • コンポーネントの状態に応じて異なるCSSクラスを適用する際に使用します。
  • フォームバリデーション
    • 入力フィールドの状態（有効、無効、エラーなど）に基づいてCSSクラスを動的に適用する場合に便利です。

6. Tips

  • falsy値（false, null, undefined, ''）は自動的に無視されるため、条件付きでCSSクラスを追加する際に便利です。
  • パフォーマンスを考慮する場合、clsx/liteバージョンを使用すると、文字列引数のみを受け付ける軽量版（140B）を利用できます。

7. まとめ

clsxは、CSSのクラス名を簡単に組み合わせるためのJavaScriptユーティリティです。このユーティリティを使うと、以下のようなことが簡単にできるようになります。

  1. 条件に応じてクラスを追加する

    • 例えば、ボタンが押せるかどうかでクラスを変えたいときに便利です。

  2. 複数のクラスを簡単に結合する

    • 違う場所で定義したクラスをひとつにまとめるのが簡単になります。

  3. コードを読みやすくする

    • どのクラスがどんな条件で使われるのか、一目で分かるようになります。

  4. ミスを減らす

    • クラス名を手動で結合するときに起こりがちなミス（スペースの入れ忘れなど）を防げます。

  5. 柔軟に使える

    • 文字列、オブジェクト、配列など、様々な形式でクラス名を指定できます。

特に、ReactやVueなどのコンポーネントベースの開発では、clsxを使うことで、コンポーネントの見た目を状態に応じて簡単に変更できるようになります。

clsxは小さなJavaScriptユーティリティですが、使いこなすことで、コードがスッキリするので覚えておくと便利です。

Discussion