はじめに
現在、UdemyでReactのコースを学習しています。
そこで学んだReactでのCSSのあて方について、今回書いていきます。
前回と同様、今回も備忘録的になるので参考になるかどうかは分かりませんが、気になった方はよければ読んでみてください。
CSSのあて方
ここからはCSSのスタイリングの名称を関数名とし、親コンポーネントであるApp.jsに子コンポーネントとしてexportしている想定でいきます。（そのためそれぞれのコンポーネントはexport const 関数名 ~ から始めています。）
また、1~5のコードは全く同じ見た目になるようになっています。
1. インラインスタイル（Inline Styles）
returnの外で変数宣言して、その中にCSSを記述していきます。記法はJavaScriptでstyle属性としてCSSを当てるのと同じです。↓ちなみにstyle属性の記法はこちら。
<p style="color: blue;">Hello World!</p>
では、本題のインラインスタイルでの書き方です。
export const InlineStyle = () => {
const containerStyle = {
border: "solid 2px #392eff",
borderRadius: "20px",
padding: "8px",
margin: "8px",
display: "flex",
justifyContent: "space-around",
alignItems: "center"
};
const titleStyle = {
margin: 0,
color: "#3d84a8"
};
const buttonStyle = {
backgroundColor: "#abedd8",
border: "none",
padding: "8px",
borderRadius: "8px"
};
return (
<div style={containerStyle} className="App">
<p style={titleStyle}>- Inline Styles -</p>
<button style={buttonStyle}>BUTTON</button>
</div>
);
};
ただ公式ドキュメントや、実務の現場で奮闘されているフロントエンドの方達の記事を見てみると、"style属性をスタイリングの主要な手法として使っていくのはあまり推奨されていない"そうです。
↓公式ドキュメントより
2. スタイル・コンポーネント（Styled Components）
スタイルコンポーネントはタグ付きのテンプレートリテラルを活用することでインラインスタイルのようなJavaScriptのオブジェクトではなく、CSS のシンタックスをそのまま使うことが出来るライブラリです。
import styled from "styled-components"でライブラリをインポートする必要があります。
またCodeSandBoxで行う場合はstyled-componentsというDependencyをインストール、VSCode では vscode-styled-components をインストールする必要があります。
ちなみにSassの（&:hoverのような）記法も適用可能です。
import styled from "styled-components";
export const StyledComponents = () => {
return (
<>
<SContainer>
<STitle>- Styled Components -</STitle>
<SButton>BUTTON</SButton>
</SContainer>
</>
);
};
const SContainer = styled.div`
border: solid 2px #392eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
`;
const STitle = styled.p`
margin: 0;
color: #3d83a8;
`;
const SButton = styled.button`
background-color: #abedd8;
border: none;
padding: 8px;
border-radius: 8px;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
`;
一点注意点として、<SContainer>や<STitle>のような記述にしているのは、そのまま下記のように書いてしまうと、後から見たときに他のコンポーネントとしてインポートしたものなのか、スタイルを当てただけのコンポーネントなのかが見分けがつかない場合があるためです。
export const StyledComponents = () => {
return (
<>
<Container>
<Title>- Styled Components -</STitle>
<Button>BUTTON</SButton>
</Container>
</>
);
};
今でも根強い人気のあるライブラリであるこちらも、実は賛否両論あるらしく、私が受けたコースの講師はスタイルコンポーネントを実務で使用されているそうですが、さまざまなケースによって使用が推奨されていない声も見ました。
このスタイルコンポーネントはCSS in JavaScript（CSS in JS）とも言われることが多いみたいです。
代わりに、のちに紹介するCSS ModulesやBEM的運用等の導入が推奨されています。
参考にさせていただいた記事を下記に貼っておきます。よかったら読んでみてください。
3. スタイルJSX（Styled JSX）
こちらはstyle属性に適用するCSSを、JavaScriptに書くお馴染みの記法でまとめて記述し、classNameとして別ファイルから読み込むのと同じようにできます。
export const StyledJsx = () => {
return (
<>
<div className="container">
<p className="title">- Styled JSX -</p>
<button className="button">BUTTON</button>
</div>
<style jsx="true">{`
.container {
border: solid 2px #392eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
}
.title {
margin: 0;
color: #3d83a8;
}
.button {
background-color: #abedd8;
border: none;
padding: 8px;
border-radius: 8px;
// デフォルトではSassは使えない
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
}
`}</style>
</>
);
};
こちらも先程のドキュメントの通り、あまり推奨はされていないようです。
ただこの記述も理解しておきましょう。（実務現場で普通に使われているケースはあるみたいです）
またSassでの記法もそのままでは使えません。
4. CSSモジュール（CSS Modules）
こちらが先程の、Styled Compoenentの時に触れたものです。
こちらはCSSやSass（.scss）のファイルをコンポーネントのJSX（.jsx）のファイルに対応する形で作成して、それをコンポーネントにimportすることで使うことができます。
ここで１つルールが、下記のCssModules.module.scssのように.moduleを.cssや.scss拡張子の前に記述しておく必要があります。
記述方法は下記のコードを参照してください。
CodeSandboxでは、node-sassをDependencyとして導入しておきます。
CssModules.module.scss
.container {
border: solid 2px #392eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
}
.title {
margin: 0;
color: #3d83a8;
}
.button {
background-color: #abedd8;
border: none;
padding: 8px;
border-radius: 8px;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
}
CssModules.jsx
import classes from "./CssModules.module.scss";
export const CssModules = () => {
return (
<div className={classes.container}>
<p className={classes.title}>- CSS Modules -</p>
<button className={classes.button}>BUTTON</button>
</div>
);
};
5. Emotion
Emotionではライブラリを導入することで上記に挙げてきたさまざまな記法を使うことができます。
ここでは、タグごとに3つの方法を紹介しています。
1.CSSやSassと全く同じ記法ができるやり方-divタグ
2.インラインスタイルと同様の記法ができるやり方-pタグ
3.スタイルコンポーネントと同様の記法ができるやり方-buttonタグ
CodeSandboxでは、@emotion/reactと@emotion/styledをDependencyとして導入しておきます。
//↓２つの記述はバージョンの関係でエラーが出るのでそれを防ぐためのものです。
//また、私の場合だけかもしれませんがReactをimportしていないとエラーが出るみたいなのでReactをimportしています。
// /** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";
import styled from "@emotion/styled";
import React from "react";
export const Emotion = () => {
const containerStyle = css`
border: solid 2px #392eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
`;
const titleStyle = css({
margin: 0,
color: "#3d84a8"
});
return (
<>
<div css={containerStyle}>
<p css={titleStyle}>- Emotion -</p>
<SButton>BUTTON</SButton>
</div>
</>
);
};
const SButton = styled.button`
background-color: #abedd8;
border: none;
padding: 8px;
border-radius: 8px;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
`;
終わりに
基本とは言ってもほんといろんな書き方がありますね・・・。
初心者からすると賛否両論いろんな声もあって「結局どれを使ったらいいの？」って感じですが、先程取り上げさせてもらった記事を読めば、どんなケースにも対応できる絶対的なものはなく、ケースバイケースで最適なものを使うというのが良いのかと思いました。
まあ基本的には入ったチームや組織で使うものに合わせていけば良いので、学習段階では「こういう書き方があるんだな〜！」というくらいで留めておこうかと思います。
ここまでお読みいただきありがとうございます。
それではまた！
フロントエンド強化月間参加中！！
またQiitaのフロントエンド強化月間にも参加中です！
なんというタイミング...これを機にフロントエンド技術を一気に学んでいきます。
コチラ→Qiita フロントエンド強化月間
↧