Reactを使ってTODOアプリを作成する Material UIのインポート CSS Moduleの環境設定

TODOアプリ

前回に引き続きReactを用いてTODOアプリを作成していこうと思います。
ただし、React初心者なので以下の手順で作成していこうと思います。

1. JavaScriptで作成（サーバー側はJSON Serverを使用しaxiosを用いてデータの取得、更新を行う）
2. JavaScript → TypeScriptに変換
3. Material UIを使用してデザインをつける
4. Java（Spring Boot）を用いてサーバー側を構築
5. AWS？を使用してデプロイする

今回から、3. Material UIを使用してデザインをつけるを行なっていきます。
今回の記事はMaterial UIを適用させる前の事前準備を行います。

前回まで

前回はJavaScript→TypeScriptに変換を行いました。

Material UI / Material iconsのインポート

今回の開発で使用したMaterial UI / Material iconsをインポートします。
Material UIを用いた開発を行うための事前準備はモジュールをインポートすることで一通り完了します。

Material UI

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Material icons

npm

npm install @mui/icons-material

yarn

yarn add @mui/icons-material

CSSを適用

実際にMaterial UIを用いた開発を行い感じた印象として、自分でCSSをほとんど書かずとも既存の用意されているもので大体のものは作成できる反面、すでに完成されているためアレンジがしづらい印象を受けました。なので、独自のCSSを適用できるような環境を設定してきます。

ReactにCSSを適用する方法として以下の方法があります。

1. 直接ファイルに書き込む
2. Pure CSSを適用する
3. CSS Moduleを適用する

1. 直接ファイルに書き込む

以下のようにして直接書き込むことができます。
この書き方だとレイアウトに必要なコード(CSS)と表示に必要なコード(JSX)コードが混在しているため、コードの可読性を下げてしまいます。なので、あまり推奨されない書き方になります。

sample.tsx

import { Box } from "@mui/material";

// 省略

const sample = () => {
    return (
        <Box
            // sx={{...}}内にCSSのコードを記述する
            sx=
            {{
                fontSize: "14px",
                color: "white",
                textAlign: "center"
            }}
        >
            // 省略
        </Box>
    );
}

2. Pure CSSを適用する

Pure CSSとはcreate-react-appした時にデフォルトで適用されているCSSです。
HTML/CSSのスタイルと近い書き方をすることができます。

この書き方では、同じclassNameを記述してしまうと、本来CSSを適用させてくないコンポーネント側にもCSSを適用させてしまいます。つまり、予想していないレイアウトになってしまう可能性があります。

sample1.tsx

// sample.cssをインポートする
import "./sample.css"

// sample.cssで記述したクラス名「.sampleText」を適用させる
const sample1 = () => {
    return <p className="sampleText">こんにちは</p>;
}

sample2.tsx

const sample２ = () => {

    // ファイルsample2.tsxではsample.cssをインポートしていないが、
    // クラス名「.sampleText」が適用されてしまう
    return <p className="sampleText">こんにちは</p>;
}

sample.css

.sampleText {
    color: red;
}

3. CSS Moduleを適用する

CSS Moduleは、CSSの適用範囲をコンポーネント単位で閉じようという考えで作られたものです。
CSS Moduleを設定するための方法は以下になります。

1. プラグインのインストール
2. global.d.tsの作成
3. tsconfig.jsonの編集
4. CSS Moduleのインポート

1. プラグインのインストール

npm

console.log

npm install css-module-types

yarn

console.log

yarn add css-module-types

2. global.d.tsの作成

srcフォルダと同じ階層にglobal.d.tsを作成し、以下の内容を記述します。

global.d.ts

// sassを利用する場合は`*.css`→`*.sass`に変更する
declare module '*.css' {
    const exports: {
        [exportName: string]: string
    };
    export = exports
}

3. tsconfig.jsonの編集

ファイルtsconfig.json に以下の2行を追加します。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "plugins": [{"name": "css-module-types"}], ← 追加
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "global.d.ts"　← 追加
  ]
}

4. CSS Moduleのインポート

例として以下のようなツリー構成で考えます。
cssの名前は*.module.cssとします。*には任意の名前を記述する

src
 ┣component
 ┃　　　　　　　　┗sample.tsx
 ┗css
   ┗sample.module.css

sample.tsx

// 任意のモジュール名（今回はSample）をつけて、cssファイルをインポートする
// cssファイルまでの相対パスを記述する
import Sample from "../css/sample.module.css"

const sample = () => {
    return （
        // {モジュール名.クラス名}とすることでCSSを適用できる
        <p className={Sample.text1}>こんにちは<p>

        // 複数のクラスを適用させたい場合
        // {`${モジュール名.クラス名} ${モジュール名.クラス名} ...`}とする
        <p className={'${Sample.text2} ${Sample.text3}'}>こんばんわ<p>
    ）;
}

sample.module.css

text1 {
    color: red;
}

text2 {
    font-size: 14px;
}

text3 {
    text-align: center;
}

参考文献

最後に

以上でCSS Moduleの環境設置は完了しました。
次回は実際にMaterial UIを用いてレイアウトの作成を行っていきます。