LoginSignup
28

【初学者】Reactにおけるスタイリング方法をまとめてみた

Last updated at Posted at 2023-11-25

はじめに

はじめまして!りかと申します。
現在、RUNTEQにてプログラミングを学習しています。

12月に開催される「RUNTEQ祭」というイベントに向け、チーム開発を行いました。
その中でReactを使用した際に、スタイリング方法が複数あることを知ったため、それぞれの概要・メリット・デメリットを調べてみました。

【チーム開発】2人協力型のホラー×謎解きゲーム「MISERY

※一部音声が流れます

注意点

私はプログラミング学習中で、初学者です。
内容に誤りがある場合がございます。
もし間違いがあればご指摘いただけますと幸いです。

目次

  • インラインスタイル
  • CSS Modules
  • CSS in JS
  • Tailwind CSS
  • UIコンポーネントライブラリ

インラインスタイル

インラインスタイルは、スタイルをJavaScriptオブジェクトとして定義し、コンポーネントのstyle属性に適用します。

import React from 'react';

const App = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px'
  };

  return <button style={buttonStyle}>Click me</button>;
};

export default App;

【メリット】

  • 外部CSSファイルが不要
  • コンポーネント単位でスタイルを分けられる

【デメリット】

  • CSSの全機能をサポートしていないため、複雑なスタイリング(例:擬似クラスやメディアクエリ)には向かない
  • コンポーネント内にスタイルを直接記述するため、可読性が低くなることがある

CSS Modules

CSS Modulesは、CSSを別ファイルで管理し、モジュールのようにインポートするだけでスタイルを適用できます。

App.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}
App.js
import React from 'react';
import styles from './App.module.css';

const App = () => {
  return <button className={styles.button}>Click me</button>;
};

export default App;

【メリット】

  • CSSのスコープをコンポーネントに限定
  • クラス名の衝突を回避
    例:ビルド時に「button」というクラス名を「button__3a2fX」のような形に変換することで、異なるコンポーネント間でのクラス名の衝突を回避して、意図しない挙動を防ぐことができる

【デメリット】

  • Webpackなどのビルドツールで設定を行う必要があり、初学者にとっては複雑に感じられる可能性がある

CSS in JS(例:Styled Components)

CSS in JSは、JavaScriptの中にCSSを書く方法です。

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
`;

const App = () => {
  return <StyledButton>Click me</StyledButton>;
};

export default App;

【メリット】

  • コンポーネント単位でスタイルを分けられる
  • 動的なスタイリングが容易

【デメリット】

  • コンポーネント内にスタイルを直接記述するため、可読性が低くなることがある
  • ランタイムCSS in JSの場合、JavaScriptによる初期解析とブラウザによる生成されたCSSの再解析が必要なため、パフォーマンス上のオーバーヘッドが生じる可能性がある

CSS in JSライブラリの例:

  • Styled Components
  • Styled JSX
  • Emotion
  • vanilla-extract
  • Linaria
  • Panda CSS など

Tailwind CSS

Tailwind CSSは、CSSのフレームワークの一つです。Tailwind CSS特有のクラス名が用意されており、それらのクラスを組み合わせてスタイルを構築します。

import React from 'react';

const App = () => {
  return <button className="bg-blue-500 text-white py-2 px-4">Click me</button>;
};

export default App;

【メリット】

  • カスタマイズ性が高い
  • 迅速なスタイルの設定が可能

【デメリット】

  • 初学者には直感的でない場合あり
  • カスタマイズに慣れが必要

UIコンポーネントライブラリ

UIコンポーネントライブラリは、UIを構築する際に役立つツールの集合体です。ボタン、フォーム、メニューバーなどのUIコンポーネントをカスタマイズ可能な形で提供しています。

MUIの例:

ca7d77f449f5be295842b4b71acc4d62.gif

ライブラリをインストールし、コードをペーストするだけでスタイリングをすることができます。
また、ライブラリごとにデザインが統一されているので、デザインを一から考える必要がなく、自然な見た目のUIを作ることができます。

【メリット】

  • 迅速なスタイルの設定が可能
  • 一貫性のあるデザインにより、アプリケーション全体でのデザインの統一感が保たれる

【デメリット】

  • 一部のライブラリでは、カスタマイズのオプションが限られており、特定のデザイン要件を満たすのが難しいこともある

UIコンポーネントライブラリの例:

  • MUI(Material UI)
  • Chakra UI
  • Ant Design(AntD)
  • Semantic UI React
  • React Bootstrap
  • Mantine など

まとめ

Reactにおけるスタイリング方法を調べてみましたが、今回取り上げた方法以外にもまだまだたくさんあり、これからも引き続き調べてみたいと思いました!

調べてみた体感では、CSS ModulesCSS in JSが人気のようでしたが、RUNTEQではTailwind CSSを使用している方が多いように見えました。

プロジェクトの要件やチームの方針に応じて、適切な方法を選択できるよう、それぞれのメリット・デメリットを把握して活用できたらいいなと感じました。

最後まで読んでくださりありがとうございました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28