ご依頼を検討されている方

【2021年】React CSS FrameworkとCSS Modulesの使い方を紹介

URLをコピーする
URLをコピーしました!
想定読者

【2021年】ReactでCSSを活用する際、FrameworkとCSS Modulesのどちらが良いのか迷っている

上記の方向けに執筆しています。

おにちゃん

執筆者:React利用歴半年ほどの僕が備忘録として執筆しています。

本記事のまとめ
  1. React×CSSを使う場合は、CSS moudulesとmaterial-ui(framework)がおすすめです。
  2. おにちゃん塾では上記2つを活用しています。

本記事では、ReactでCSSを活用する方法、Reactで使える有名なCSS Framework、CSS Modulesの使い方について紹介しています。

無料体験できるプログラミングスクール
  1. TechAcademy 無料体験
    →色々なコースが充実しているので、迷っている方はこのスクールをおすすめします
  2. 侍エンジニア塾 無料体験
    →オンラインコミュニティがあるので、費用がない方におすすめ
  3. chot.design
    →月額1100円でWebデザイン系の基礎を学ぶことができる
目次

ReactでCSSを適用させる方法を集めてみた

ReactでCSSを適用させる方法は大きく下記の方法があるみたいです。

  1. Pure CSS
  2. インラインCSS
  3. CSS Modules
  4. CSS in JS
  5. CSS Framework


Pure CSS

ReactでCSSを活用する方法ひとつ目はPure CSSです。

  1. メリット:僕の肌感覚ですが、ない気がします
  2. Pure CSSを使うのであれば、Reactで使えるCSS Modulesの方が良いです。
おにちゃん

Pure CSSが使えない理由を紹介します。

まずは、App.jsを書き換えます。

import './App.css';

function App() {
  return (
    <div>
      <p className="text">おにちゃん塾</p>
    </div>
  );
}

export default App;

class=textを追加したので、App.cssの方でスタイリングしてみましょう。

.text {
  color: red;
}

簡単に文字カラーを赤にするスタイリングをしてみました。この結果は下記の通りです。

Pure CSS
おにちゃん

こんな感じでPureCSSを使うと簡単にスタイリングできるのですが、下記の問題点があります。

  • CSSがグローバル管理になるため、保守管理が難しい
  • BEM設計などを採用するしかないので、クラス名が助長的になる

Text.jsとText.cssファイルを追加して下記のコードを加えてみてください。またindex.jsも追加で変更します。

import './Text.css';

function Text(){
  return (
    <>
    <p className="text">おにちゃん塾B</p>
    </>
  );
}

export default Text;
.text {
  color: blue;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Text from './Text';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Text />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
おにちゃん

このようなファイルに書き換えると、下記の画像のような問題にぶつかります。

Pure CSS

このようにPure CSSを活用してしまうと、クラス名がバッティングした場合に大変なことになってしまいます。

そのため、個人的にはこのスタイリング方法は使えないと思っています。


インラインCSS

ReactでCSSを活用する方法ふたつ目はインラインCSSです。

インラインCSSとは、コンポーネントに直接CSSを書き込む方法です。

おにちゃん

Reactが非推奨のスタイリング方法なのであまりおすすめしません。

function App() {
  return (
    <div>
      <p style={{ color: 'red'}}>おにちゃん塾</p>
    </div>
  );
}

export default App;

htmlの時と記述方法が違う点に注意してください。


CSS Modules

ReactでCSSを活用する方法みっつ目はCSS Modulesです。

おにちゃん

CSSを使い慣れている方であれば、この方法をおすすめします。

CSS Modulesがおすすめの理由

  1. グローバルではなくローカルスコープをCSSに導入できる(これが便利)
  2. create-react-appで導入されているので初心者でも扱いやすい

使い方に関しては最後の章で解説しています。気になる方はジャンプしましょう。


CSS in JS

ReactでCSSを活用する方法よっつ目はCSS in JSです。

CSS in JSは、CSSをJavaScriptで記述してみようと言った発想で作られています。

JSファイルに一括して記述できるので人気があるのですが、JSが非推奨のブラウザなどに直面するとレンダリングされない問題が発生しているみたいです。

CSS in JSの代表格

  1. Styled Components
  2. emotion


CSS Framework

ReactでCSSを活用する方法いつつ目はCSS Frameworkです。

有名なCSS FrameworkとしてBootstrapがありますが、そのような簡単にUIを構築することができるFrameworkがReactにも存在しています。

おにちゃん

Frameworkがありすぎて、どれを選べば良いか分からないと言った方は下記の章を参考にしてみてください。


【2021年版】ReactでおすすめのCSS Framework

2021年版、ReactでおすすめのCSS Frameworkは「material ui→mui」だと思います。githubのスター数、評判を加味して評価しています。

ReactでおすすめのCSS Framework
  1. material-ui→mui
  2. react-toolbox
  3. react-bootstrap


CSS Framework:material-ui

おにちゃん塾ではmaterial-uiをメインのCSS Frameworkとして活用しています。

おにちゃん

導入方法、使い方、デザイン性のどれをとっても一級品なので、おすすめです。

導入方法を詳しく知りたい方は下記の記事を参考にしてみてください。

具体的に、使い方を知りたい方は【Material UI実践編】buttonコンポーネントでデザイン作成を参考にしてみてください。


ReactでCSS modulesを適用させる方法

ReactでCSS modulesを適用させる手順は下記の通りです。

適用させる手順

  1. CSSファイルを作成
  2. CSSファイルを読み込む
  3. ローカルスコープを確認する
おにちゃん

3分ほどで理解できるはずです。


手順1:CSSファイルを作成する

create-react-appでReactファイルを作成している方はCSS modulesが自動的に使えるので、何もする必要はありません。

CSS modulesの使い方:ファイル名に.module.cssとつけるだけ

手順1:CSSファイルを作成する

このように拡張子を変えるだけです。


手順2:CSSファイルを読み込む

先ほど作成した「App.module.css」を読み込みましょう。

import Apps from './App.module.css';

App.module.cssで記述してCSSをAppsとしてインポートしています。

classNameに展開する際は下記のようにします。

import Apps from './App.module.css';

function App() {
  return (
    <div>
      <p className={Apps.text}>おにちゃん塾</p>
    </div>
  );
}

export default App;

インポート名.スタイル名としてclassNameに記述します。

おにちゃん

たったこれだけで、CSSをローカルスコープすることができるのです。


手順3:ローカルスコープを確認する

npm startをしてプロジェクトを起動させてみてください。

このように、適当なランダム数が自動で割り当てられるので、ローカルスコープすることができるのです。

おにちゃん

僕はこの方法を活用してReactにCSSを導入しています。


Reactを有料動画で学ぶ


まとめ:ReactでCSSを使う場合は、自分の好きなものを活用しよう(正解はない気がします)

ここまでで「【2021年】React CSS FrameworkとCSS Modulesの使い方を紹介」の解説は以上です。

おにちゃん

Reactで使えるCSSの次はReact hooksについて学んでみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる