【React】styled-componentsで出力されるクラス属性にファイル名やdisplayNameを表示する

【React】styled-componentsで出力されるクラス属性にファイル名やdisplayNameを表示する

styled-componentsを利用したコンポーネントのクラス名は、次のようにランダムな値が割り当てられるためデバッグが超絶し辛いです。

<div class="sc-bwzfXH gJIwTT">
  <button class="sc-bdVaJa lngsml">Learn React</button>
  <button class="sc-bdVaJa gcxEky">Learn React</button>
</div>

そこでbebelのプラグインとして配布されているbabel-plugin-styled-components を利用することで、コンポーネントが書かれているファイル名やコンポーネントのdisplayNameをクラス名に出力することができます。

babel-plugin-styled-components

https://github.com/styled-components/babel-plugin-styled-components

まず始めにインストールしましょう。

npm install --save-dev babel-plugin-styled-components

インストールできたらこのプラグインの設定を行います。
package.json もしくは .babelrc に設定を追加します。

package.jsonの場合

"babel": {
  "plugins": [
    [ "babel-plugin-styled-components" ]
  ]
}

.babelrcの場合

{
  "plugins": [
    [ "babel-plugin-styled-components" ]
  ]
}

これで出力を確認してみると……

<div class="App__Container-w3zbcp-1 iXTFHr">
  <button class="App__Button-w3zbcp-0 dUeHxi">Learn React</button>
  <button class="App__Button-w3zbcp-0 hVnQOu">Learn React</button>
</div>

App__Container-**** , App__Button-***のように、
ファイル名__displayName-*** の形式でクラス名が出力されます。

これですよ、これこれ。

オプション設定

bebel-plugin-styled-componentsの指定時にオプションを渡せます。

ファイル名を出力しない

"plugins": [
  [
    "babel-plugin-styled-components", {
      "fileName": false
    }
  ]
]

displayNameを出力しない

"plugins": [
  [
    "babel-plugin-styled-components", {
      "displayName": false
    }
  ]
]

CSSのminifyを行わない

"plugins": [
  [
    "babel-plugin-styled-components", {
      "minify": false
    }
  ]
]

デッドコードを除去する

"plugins": [
  [
    "babel-plugin-styled-components", {
      "pure": true
    }
  ]
]

他にも指定できるので、この記事の一番下にある公式ドキュメントのリンクから確認してみてください。

環境で切り替える

babelのenv設定で出力を切り替えるようにしておくとスマートです。

"env": {
  "development": {
    "plugins": [
      [
        "babel-plugin-styled-components", {
          "minify": false
        }
      ]
    ]
  },
  // 本番環境は出力しない
  "production": {
    "plugins": [
      [
        "babel-plugin-styled-components", {
          "fileName": false,
          "displayName": false,
          "pure": true,
        }
      ]
    ]
  },
  "test": {
    "plugins": [
      [
        "babel-plugin-styled-components", {
          "fileName": false
        }
      ]
    ]
  }
}

公式ドキュメント

https://www.styled-components.com/docs/tooling#babel-plugin

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.