🐣 【日報】React実践の教科書 P141〜154
ENJIN React.js
作成日： 2021/12/15
3

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P141〜154
    • 5-5 Emotion
    • 5-6 Tailwind CSS

学習メモ

Emotion

  • 記述の仕方が自由に選べる
  • まだベストプラクティスが見つかっていない時など、模索しながら試していきたいときは良い選択肢になる
  • ルールを決めずに運用してしまうと、各々好きな書き方をしてしまい、保守性が低下する危険性もある
$ yarn add @emotion/react @emotion/styled

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

/** styled componentsのような書き方をするために必要なパッケージ */
import styled from "@emotion/styled";

export const Emotion = () => {

    // scssの書き方がそのまま可能な書き方
    const containerStyle = css`
        border: solid 1px #AAA;
        border-radius: 20px;
        padding: 8px;
        margin: 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;      
    `;

    // インラインスタイルの書き方
    const titleStyle = css({
        margin: 0,
        color: "#AAA"
    });

    // styled-components の書き方
    const SButton = styled.button`
        background-color: #DDD;
        border: none;
        padding: 8px;
        border-radius: 8px;
        &:hover {
            background-color: #AAA;
            color: #FFF;
            cursor: pointer;
        }
    `;

    return (
        <div css={containerStyle}>
            <p css="titleStyle">Emotionです</p>
            <SButton>ボタン</SButton>
        </div>
    );
};

Tailwind CSS

  • Reactだけでなく、通常のHTMLやVueなどにも使用することができる
  • 慣れると早く書ける
  • 命名に悩まなくて良い
$ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

CRACO

Create React App の場合、Tailwind の動作に必要なPostCSSを上書くことができないため、CRACO(Create React App Configuration Override)というものを使用する

  1. パッケージのインストール
yarn add @craco/craco
  1. package.jsonをCRACOを使って起動するように変更
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  1. プロジェクトルートに craco.config.js を作成
module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

4.tailwind.config.jsの作成

$ npx tailwindcss init

上記のコマンドをプロジェクトルートパスで実行すると、tailwind.config.jsという名前で以下のファイルが生成される

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

上記のpurgeオプションでは、指定したファイルの中で使用していないスタイルがあるとビルド時に自動で取り除いてくれるので、コンポーネントとindex.htmlを指定する

module.exports = {
  purge: ['./src/**/*.{js,jsx.ts.tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
  1. index.cssの作成＆修正
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. index.js で index.cssを読み込み
import ReactDOM from "react-dom";
import { TailwindCss } from "./components/TailwindCss.jsx";
import './css/index.css';

ReactDOM.render(<TailwindCss/>, document.getElementById("root"));

Tailwind CSS での実装

export const TailwindCss = () => {
    return (
        <div className="border border-gray-400 rounded-2xl p-2 m-2 flex justify-around items-center">
            <p className="m-0 text-gray-400">Tailwind CSSです</p>
            <button className="bg-gray-300 border-0 p-2 rounded-md hover:bg-gray-400 hover:text-white">ボタン</button>
        </div>
    );
};

所感

CSSについてのチャプターが終わりました。

Tailwind CSSは、自分のプロジェクトで使うことはなさそうですが
採用されているプロジェクトにアサインされた場合に対応できるので
あらかじめ知ることができて良かったと思います。
Yuri Ishiguro