styled-components

スタイルドコンポーネント

styled-components を分かりやすく

それでは「styled-components」について話しましょう！「そもそもこれ使う意味あるん？」って方いるかと思いますが、あります。だいぶヤバいやつです。

styled-componentsはReactのCSS-in-JSライブラリの一つで、スタイリングを直感的に行うことができます。CSSのスタイルをJSファイルの中に書くことができ、コンポーネントにスタイルを直接適用できます。これはつまり、あなたのコンポーネントとそれに関連するスタイルが一緒になるので、管理がめっちゃ便利なんですよ！

例え話で言うと、各コンポーネントをファッションの衣装だと思ってください。従来のCSSだと、衣装（スタイル）は別のクローゼット（CSSファイル）に保管されていて、それをモデル（コンポーネント）に着せる感じですよね。でもstyled-componentsの世界では、それぞれの衣装がモデルにぴったりと組み合わされていて、ショーツ（コンポーネント）とシャツ（スタイル）が一緒になっています。

だから、新しいモデル（コンポーネント）が登場したときには、専用の衣装（スタイル）がすぐに用意されています。これなら衣装選びに迷うことはないですよね！組み合わせの問題もありません。それぞれのモデルが自分だけの衣装を持っているわけですから。

「一体どういうことなん？」って思いますよね？でも、これがstyled-componentsの凄さなんです。スタイルとコンポーネントが一緒になることで、開発がよりスムーズになり、管理も楽になるんです。ここまで大丈夫ですか？なんて素晴らしいんでしょう！

結論

Styled-components は、React アプリケーションのためのスタイリングライブラリです。CSS-in-JS というアプローチを採用しており、JSX 内に直接スタイルを記述することができます。これにより、コンポーネントのスタイルがカプセル化され、再利用性が高くなります。Styled-components は、styled API を提供するライブラリであり、CSS のように見えるが、JavaScript で書かれたスタイルを定義します。

例えば、以下のように、styled-components を使って div タグをスタイリングすることができます。

import styled from 'styled-components'

const StyledDiv = styled.div`
  color: red;
  font-size: 20px;
`

function MyComponent() {
  return <StyledDiv>Hello world</StyledDiv>
}

この例では、styled API を使用して StyledDiv という名前のスタイル化された div コンポーネントを作成しています。StyledDiv には、CSS プロパティが定義され、このプロパティが div 要素に適用されます。

Next.js と styled-components を使ったサンプルコード

以下のサンプルコードは、Next.js と styled-components を使用して、サンプルの Web ページをスタイリングする方法を示しています。

import styled from 'styled-components'
import Head from 'next/head'

const PageContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
`

const Title = styled.h1`
  font-size: 4rem;
  color: #333;
`

const Subtitle = styled.h2`
  font-size: 2rem;
  color: #666;
`

export default function Home() {
  return (
    <PageContainer>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <Title>Hello World</Title>
      <Subtitle>Welcome to my app!</Subtitle>
    </PageContainer>
  )
}

この例では、PageContainer、Title、Subtitle という 3 つのコンポーネントを作成し、それぞれにスタイルを適用しています。styled.h1やstyled.h2を使うことで、HTML タグに対してスタイルを適用することもできます。

Next.js を学ぶ一覧へ