[フロントエンド] React.jsのclassNameに、複数のクラスを簡単に指定する（Classnames利用）

こんにちは、@yoheiMuneです。
今日は、React.jsにおけるclassNameの便利な指定方法をブログに書きたいと思います。

目次

問題は何か？

React.jsでDOMにCSSクラスを指定する場合には、classNameプロパティを使います。

{/*CSSクラスを指定する例*/}
<div className={'login'}>
    ログイン
</div>

1つだけ指定するには問題ないのですが、複数指定するときは少し面倒です。

{/*CSSクラスを複数指定する例*/}
<div className={'login' + ' ' + 'is_active'}>
    ログイン
</div>

また、条件によってクラス付与を変えたいとなると、さらに大変です。

{/*CSSクラスを条件によって指定を変更したい例*/}
<div className={'login' + ' ' + (this.state.isActive ? 'is_active' : '')}>
    ログイン
</div>

これらの書き方がなかなか煩雑なので、なんとか楽をしたいというのが今回のお話です。

classNamesライブラリを利用する

Classnamesというライブラリを使うと、上記を楽に記載できます。

ライブラリの導入

インストールは、npm経由で行います。

npm install classnames --save

そしてコード上で以下のようにインポートします。

// ES6バージョンの場合
import classNames from 'classnames'

// require形式の場合
const classNames = require('classnames')

ライブラリの利用

以下のように利用します。

// CSSクラスの複数指定を作成したい場合
classNames('login', 'is_active') // => 'login is_active'

// 条件に応じて、CSSクラスを追加したい場合
classNames('login', {
    'is_active' : this.state.isActive
})

このように、複数のCSSクラス指定や、条件によるCSSクラスの追加を分かりやすく実装できます。React.jsでの実装例は以下の通りです。

render () {
    var loginClass = classNames('login', {
        'is_active' : this.state.isActive
    })
    return (
        <div className={loginClass}>
            ログイン
        </div>
    )
}

CSSモジュールとの併用

以前のブログで紹介したReact.jsでCSSモジュールを利用する場合にも、Classnamesライブラリを利用することが可能です。Computed Keyという仕組み（ES2015またはBabel）を利用します（create-react-appでアプリを作成している場合には、設定なしで動作します）。

// CSS読み込み
import styles from './Login.css'

// ...中略...

// CSSモジュールでの利用例
classNames(styles.login, {
    [styles.is_active] : this.state.isActive
})

最後に

React.jsで何本もアプリを開発してきましたが、まだまだ学べることが多くて楽しいですね。色々とブログにも残せたらと思いますので、ぜひ今後もよろしくお願いします。

最後になりますが本ブログでは、フロントエンド、PHP、サーバー、インフラ、Swift、Node.js、Python、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！