Emotionとは？ReactのEmotion(CSS in JS)の環境構築の方法と使い方

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、ReactのEmotion(CSS in JS)の環境構築の方法と使い方について解説していきます。

1 ReactのEmotion(CSS in JS)の環境構築の方法と使い方
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

ReactのEmotion(CSS in JS)の環境構築の方法と使い方

Emotionとは？

Emotionとは、CSS in JSライブラリの1つです。

CSS in JSとは、JavaScriptのコードの中にCSSのスタイルを記述することを指します。

Emotionでは、JavaScriptのコード内でスタイルを定義し、それをReactコンポーネントに適用することができます。

以前にご紹介した、styled-componentsも、CSS in JSライブラリの1つです。

React・TypeScript環境で Material UI と styled-components の環境構築をする方法

Emotion(CSS in JS)の導入・環境構築

次のコマンドで、Emotionを導入します。

npm install @emotion/react @emotion/styled

# または

yarn add @emotion/react @emotion/styled

Emotionのモジュールimport方法

Emotionは、次のようにimportして使用します。

importする際に、/** @jsxImportSource @emotion/react */のおまじないを忘れずに記述してください。

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

Emotionの使い方・記述方法のSampleCode

Emotionでは、通常のCSSと同様に記述ができるので、かなり使いやすい部類のCSS in JS だと思います。

先述のstyled-componentsと同じような使い方もできるので、Emotionはおすすめです。

SampleCodeでは、EmotionStyleの定数にCSSの定義をまとめて、JSX内でcss={EmotionStyle.プロパティ名}の形でStyleをあてています。

他の記法もありますが、個人的には、この書き方で、CSSの定義は分離してまとめておく記法をお勧めします。

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

interface Card {
  id: number;
  participant: string;
  affiliation: string;
}

const Test2 = () => {
  /** 名前と部署の名簿情報List */
  const cardList: Card[] = [
    { id: 1, participant: "ロボたま", affiliation: "エンジニア" },
    { id: 2, participant: "まりたま", affiliation: "エンジニア" },
    { id: 3, participant: "白桃", affiliation: "営業部" },
    { id: 4, participant: "ももちゃん", affiliation: "営業部" },
    { id: 5, participant: "まさぴょん", affiliation: "営業部" },
    { id: 6, participant: "まりぴょん", affiliation: "デザイナー" },
    { id: 7, participant: "ハム太郎", affiliation: "エンジニア" },
    { id: 8, participant: "ロボ太郎", affiliation: "デザイナー" },
    { id: 9, participant: "まり太郎", affiliation: "デザイナー" },
    { id: 10, participant: "ぷる玉", affiliation: "人事部" },
    { id: 11, participant: "ぷるぷる玉", affiliation: "人事部" },
    { id: 12, participant: "ロボ玉試作1号機", affiliation: "エンジニア" },
    { id: 13, participant: "ロボ玉試作2号機", affiliation: "デザイナー" },
    { id: 14, participant: "ロボ玉試作1号機", affiliation: "ロボ玉開発部" },
  ];

  return (
    <div css={EmotionStyle.cardListWrapperStyle}>
      <div css={EmotionStyle.cardListContainerStyle}>
        {cardList.map((card: Card, index: number) => {
          // mapメソッドの内部で、条件文を記述する
          if (cardList.length === index + 1) {
            return (
              <div>
                <div css={EmotionStyle.cardStyle}>
                  <span>ID: {card.id}</span>|
                  <span>所属・部署: {card.affiliation}</span>|
                  <span>名前: {card.participant}</span>
                </div>
                <div>〜完〜</div>
              </div>
            );
          } else {
            return (
              <div css={EmotionStyle.cardStyle}>
                <span>ID: {card.id}</span>|
                <span>所属・部署: {card.affiliation}</span>|
                <span>名前: {card.participant}</span>
              </div>
            );
          }
        })}
      </div>
    </div>
  );
};

/** EmotionStyle */
const EmotionStyle = {
  /** CardList の Wrapper Style */
  cardListWrapperStyle: css`
    width: 80%;
    margin: 0 auto;
    text-align: center;
  `,
  /** CardList の Container Style */
  cardListContainerStyle: css`
    background-color: rgb(244, 246, 247);
    border-radius: 8px;
    padding: 12px;
  `,
  /** 1つの Card の Style */
  cardStyle: css`
    display: flex;
    gap: 8px;
    &:hover {
      cursor: pointer;
      background: #d9d9d9;
    }
  `,
};

export default Test2;