2018/07/02更新

[フロントエンド] 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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。