「フロントエンドでCSSの管理をもっと楽にしたい」
「コンポーネント内にCSSを書けたらいいのに」
今回は上記の悩みにお答えします。 結論から言うと、「styled-components」を使えば解決です。
この記事では、React開発でstyled-componentsを使ってCSS-in-JSを実装する方法を解説します。 ちなみに「CSS-in-JS」はJavaScriptを使ってCSSを書きつつスタイリングする方法のことです。
さらに、styled-componentsならではの応用的なCSSの書き方も解説します。 普通のCSSファイルでは不可能な書き方で、CSS-in-JSのすごさがわかっていただけるかと思います。
styled-componentsとは
styled-componentsは、CSS-in-JSを実現させるための方法のひとつです。 CSS-in-JSのメリットはやはり「CSSの管理が楽になること」です。
コンポーネントとCSSファイルを別々に作ると、クラス名とかの管理が面倒ですよね。 でも、CSS-in-JSではコンポーネント内にCSSも一緒に書くので管理が楽です。
CSS-in-JSには色々な種類があります。
CSS-in-JSの中でもstyled-componentsが一番人気で情報も多いです。 今後も進化していく可能性は高いので、学んでおいて損ではないかと。
では、以下よりstyled-componentsの具体的な使い方を解説していきます。
styled-componentsのインストール
まず、styled-componentsのパッケージをインストールします。 ターミナルに以下を入力して実行してください。
bash
$ npm install --save styled-components
または
bash
$ yarn add styled-components
これで、styled-componentsが使えるようになります。
基本の使い方
ここでは、Reactの基本的な開発環境を想定して解説を進めていきます。 App.jsには以下のように記述します。
jsx
/* App.js */
import React from "react";
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
};
export default App;
これに、styled-componentsを使ってスタイリングしていきます。 以下のように記述を追加してください。
jsx
/* App.js */
import React from "react";
/* ↓これ追加 */
import styled from "styled-components";
/* ↓これ追加 */
const StyledHello = styled.h1`
color: red;
`;
const App = () => {
return (
<div>
{/* ↓「h1」を「StyledHello」に変更 */}
<StyledHello>Hello, world!</StyledHello>
</div>
);
};
export default App;
まず、2行目で"styled-components"をインポートしています。
そして「StyledHello」を定義しています。 「StyledHello」という名前は、僕が適当につけました。
記述の形は以下です。
jsx
const (名前) = styled.(タグ名)`CSSの記述`;
今回は、「名前」を「StyledHello」にしました。 さらにタグは「h1」にしています。
これで、「Hello, world!」という文字の色が赤色になったと思います。
また、styled-componentsならSass記法も使えます。 以下のように記述してみます。
jsx
/* App.js */
import React from "react";
import styled from "styled-components";
const StyledHello = styled.h1`
color: red;
/* ↓これ追加 */
span {
color: blue;
}
/* これも追加 */
@media (min-width: 768px) {
span {
display: block;
}
}
`;
const App = () => {
return (
<div>
{/* ↓「span」を追加 */}
<StyledHello>Hello, world!<span>Hello, world!</span></StyledHello>
</div>
);
};
export default App;
上記の後半部分のように、「span」で囲った「Hello, world!」を追加してみました。
さらに、「StyledHello」の中にSass記法で「spanタグ」で囲った文字の色を青色に指定しています。 そして、メディアクエリも使ってspanに「display: block」を指定しています。
styled-componentsを使って、コンポーネント内でCSSスタイリングできました。 別ファイルでCSSを書くより、わかりやすくないですかね。
応用的な使い方
次に、styled-componentsの応用的な使い方をやってみます。 普通のCSSファイルではできないことです。
では、以下のように記述します。
jsx
/* App.js */
import React from "react";
import styled from "styled-components";
const StyledHello = styled.h1`
color: red;
span {
color: blue;
}
@media (min-width: 768px) {
span {
display: block;
}
}
`;
const App = () => {
return (
<div>
<StyledHello>Hello, world!<span>Hello, world!</span></StyledHello>
{/* ↓ボタンを追加 */}
<button>文字色を変える</button>
</div>
);
};
export default App;
上記のように、ボタンを追加してみました。 このボタンを押すと、「Hello, world!」の文字が変わるような仕組みを作ってみます。
少し複雑になりますが、以下のように記述します。
jsx
/* App.js */
/* 「useState」をimport↓ */
import React, { useState } from "react";
import styled from "styled-components";
const StyledHello = styled.h1`
/* 書き換える↓ */
color: ${props => (props.active ? "blue" : "red")};
span {
color: blue;
}
@media (min-width: 768px) {
span {
display: block;
}
}
`;
const App = () => {
/* ↓これ追加 */
const [active, setActive] = useState(false);
/* ↓これ追加 */
const colorToggle = () => {
setActive(!active);
}
return (
<div>
{/* active={active}を追加↓ */}
<StyledHello active={active}>Hello, world!<span>Hello, world!</span></StyledHello>
{/* 「onClick」を追加↓ */}
<button onClick={colorToggle}>文字色を変える</button>
</div>
);
};
export default App;
まず、一番上の方で「useState」をimportしています。 「useStateって何？」って方もいるかもですが、とりあえずわからなくて大丈夫です。
さらに、「StyledHello」の中で文字色の設定を以下のように記述しています。
jsx
color: ${props => (props.active ? "blue" : "red")};
/* 略さずに書くとこちら↓ */
color: ${props => (props.active === true ? "blue" : "red")};
なんか複雑ですよね。 上記のコードを簡単に説明すると以下です。
「activeの状態」のときは文字色を「blue」にする
「activeではない状態」のときは文字色を「red」にする
このように、styled-componentsを使えばCSSを動的に変化させることができるわけです。 これがstyled-componentsの応用的な使い方です。
「activeという状態はどうやって作るの？」って感じですよね。 そこで「useState」を使います。
コードを見ていくと、以下のような記述があります。
jsx
const [active, setActive] = useState(false);
これにより、「activeという状態」を定義できます。 「useState(false)」とあるので、デフォルトは「activeではない状態」です。
さらにコードを見ていくと、以下のように関数が定義されています。
jsx
const colorToggle = () => {
setActive(!active);
}
これは、「activeの状態」と「activeではない状態」を切り替える関数です。 この2つの状態を切り替えることで、「Hello, world!」の文字色を変えるわけです。
あとはどうやって切り替えるかです。 ここでは「ボタンをクリックしたとき」に切り替えることにします。
コードを見ていくと以下の記述があります。
jsx
<button onClick={colorToggle}>文字色を変える</button>
このボタンをクリックしたときに、関数「colorToggle」が発動します。 colorToggleが発動すると、「activeの状態」と「activeではない状態」が切り替わります。
ボタンをクリックすると、「Hello, world!」の文字色が変わります。 試しにクリックしてみてください。
まとめ
styled-componentsを使ってCSS-in-JSを実現させました。 最後に記事の内容をまとめたいと思います。
styled-componentsはCSS-in-JSを実現させる方法の一つ
コンポーネント内にCSSを書けるため、クラス名やセレクタの管理が楽
Sass記法が使える
メディアクエリも使える
動的にCSSを変化させることもできる
また、styled-componentsの応用的な使い方をご説明するときに、useStateを使いました。
useStateはReact開発で頻繁に使うことになると思います。 「useStateの使用例をもう少し見たい」という方は以下の記事も合わせてどうぞ。
というわけで記事は以上です。