🐣 【日報】React実践の教科書 P132〜140
ENJIN React.js
作成日： 2021/12/14
1

今日やったこと

  • 「モダンJavaScriptの基本から始める React実践の教科書」 P132〜140
    • 5-3 Styled JSX
    • 5-4 styled components

学習メモ

Styled JSX

  • Next.jsに標準で組み込まれているライブラリ
  • CSS-in-JS と呼ばれ、コンポーネントファイルにCSSの記述をしていく
  • SCSS記法は使用できない
  • Next.jsで作成したプロジェクトでとりあえず使うという場合に最適
$ yarn add styled-jsx

<style jsx>{`
	/* ここにCSSを書く */
`}</style>

styled components

  • スタイルをあてたコンポーネントを定義するところが特徴的
  • こちらもCSS-in-JS
  • これまでと違い、classNameにクラスを指定するのではなくスタイルを適用したコンポーネントを定義するという方法になる
$ yarn add styled-components

import styled from "styled-components";

export const StyledComponents = () => {
    return (
        <SContainer>
            <STitle>styled componentsです</STitle>
            <SButton>ボタン</SButton>
        </SContainer>
    );
};

const SContainer = styled.div`
    border: solid 1px #AAA;
    border-radius: 20px;
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
`;

const STitle = styled.p`
    margin: 0;
    color: #AAA;
`;

const SButton = styled.button`
    background-color: #DDD;
    border: none;
    padding: 8px;
    border-radius: 8px;
    &:hover {
        background-color: #AAA;
        color: #FFF;
        cursor: pointer;
    }
`;
  • SContainerのような名称は大文字から始まる形であれば任意につけることができる
    先頭に大文字のS（StyledのS）を付与しているのは、あとから見たときに「styled componentsで作成したコンポーネントなのか、それ以外の外部ライブラリや他のコンポーネントなのか」がひと目で分かるようにするため

所感

Next.jsはReactを一通り学んだら一度使ってみたいです。
styled componentsは、人気があって採用しているプロジェクトが多いそうです。
通常のHTML/CSSとは全く違う書き方になりますが、慣れたいと思います。
Yuri Ishiguro