ReactでのCSSの使いかたをまとめる

Reactでのスタイリングの方法はかなり色々な方法があり、私自身いまいち整理できていなかったため、まとめてみます。

大きく分けるとCSSでスタイリングする方法と、コンポーネントライブラリを使用する方法の2つがあります。

今回はCSSでのスタイリングを解説します。

CSSでのスタイリング

CSSでのスタイリングのメリットは自由にデザイン出来ることや、従来のデザインのやり方がそのまま使えることにあります。

デメリットは細かくスタイリングしていかなくてはならないので、技術や労力が必要になることです。

主に以下のような方法があります。

インラインで書く

インラインスタイルはタグに直接styleを書く方法です。style={{ ここにCSS }} の形でCSSのオブジェクトをそのままstyleに渡します。

<div style={{ fontSize: "20px" }}>

インラインでCSSを書くのは結論から言うと悪手です。サンプルコードやCSSを試すために使うもので、実際の開発時にインラインで書くと、どこに何を書いたかわからなくなり、メンテナンス性がかなり落ちます。

普通にCSSをimportする

create-react-appをした直後のcssファイルのように普通にそのままcssファイルをインポートさせることが出来ます。→import "./path/to/style.css"

ただしこのやり方でcssをimportすると「コード全体に」そのスタイルが適用されます。直感的にはimportしたファイルでのみcssを適用されると思ってしまいますが、全体に適用されます。

例えば.buttonでボタンのCSSを指定すればclassName="button"でデザインが適用されますが、importしたファイル以外のコンポーネントにも適用されますので名前の衝突に注意する必要があります。

例えば以下のサンプルではヘッダー部分とコンテンツ部分があり、それぞれ独立したコンポーネントになっています。

ここでボタンにスタイルを適用させます。どちらのボタンもbuttonクラスを持っているとします。

コンテンツコンポーネントのみでcssをインポートさせても以下のようにヘッダー部分にもスタイルが適用されてしまいます。

CSSをモジュール化する

前述のように普通にimportするだけではプログラムが大きくなればなるほど管理が厄介になると想像できると思います。そこでimportしたファイルでのみCSSが適用されるようにする方法がモジュール化です。

reactの過去のバージョンではnpm run ejectを行い、設定ファイルを書き換える必要がありましたが、現在は特別な設定はいりません。

まずCSSファイルをstyle.module.cssのように.cssの前に.moduleをつけます。importする際は以下のように名前をつけてimportします。

import classes from "./path/to/style.module.css";

名前は好きに決めて構いません。classesと名付ける必要はないです。そして classNameの指定ですが、以下のようにします。

<button className={classes.button}>Submit</button>

このようにclassを指定します。

先程の例で試してみると以下のように、コンテンツ部分でのみスタイルが適用され、ヘッダー部分には適用されません。

このようにモジュール化を行うことで、意図しない場所にデザインが適用されてしまうことがなくなりますので便利です。

Sassを使う

ceate-react-app環境でSassを使うのは簡単で、node-sassをnpmもしくはyarnでインストールするだけで使えるようになります。

またモジュール化もcssと同じ要領で出来ます。

Sassでは他のファイルから変数をimportしたりも出来ますからすごく便利です。

ただしcreate-react-appのドキュメントを読むと、Sassを含めたCSSプリプロセッサをあまり推奨していないように読めます。

というのもCSSプリプロセッサの特徴であるmixinやネストさせる書き方を推奨しておらず、その代わりにコンポーネントを切り分けて、それぞれに別のスタイルを適用させたほうがいいと書いてあります。

外部のライブラリを使用する : styled-components

上記で紹介したものは従来のスタイリングをReactで使えるようにする方法でした。

これらの他にも外部のライブラリを使用し、Reactの機能を活かしつつスタイリングをする方法もあります。最もポピュラーなものがstyled-componentsです。

styled-components

 

66 Users

3006 Pockets

styled-components

https://styled-components.com

ここでは詳細は述べませんが、例えばpropsの値による条件分岐やjavascriptの変数を組み込めるという点が従来のCSSとは異なる部分です。

コンポーネントライブラリ(次回の記事)

コンポーネントライブラリを使用するメリットは、すでに完成された美しいデザインのコンポーネントを利用できることにあります。

デメリットはライブラリの使い方を覚えなくてはならないという点や、外部のコンポーネントを使用するため最終的なコードが読みづらくなることなどがあります。

メジャーなコンポーネントライブラリは以下のようなものがあります。

このサイトではいくつかMaterial UIを使ったサンプルを紹介していますが、他にもたくさんのライブラリがあります。

次回の記事でこれらを使ってみようと思います。

まとめ

Reactでスタイリングする方法は主にCSSでのスタイリングとコンポーネントライブラリによるデザインの2つがあり、今回はCSSによるスタイリングを紹介しました。

次回はコンポーネントライブラリによるデザインを取り上げる予定です。(2~3日後)

===

どういうわけか私のMacではcreate-react-appのドキュメントサイト(だけ)が開けないんですが、なぜなんでしょう？他のPCでは見られるのにMacだけ見られない。(めっちゃ困ってます😭)