m's blog

備忘録とかメモとか

【React】styled-components を試してみる!

styled-components を試してみる!

今回は styled-components を試してみたい と思います。

ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います

styled-componentschroma.js の詳細については、以下のページを参照してください。

それでは早速、styled-componentschroma.js を試していきたいと思います

目次

Reactセットアップ

TypeScript が慣れているので、惰性で typescript テンプレートを使用します(*´▽`*;)

以下のコマンドで、React をセットアップしてください。

npx create-react-app my-app --template typescript

必要なパッケージのインストール

今回試す、styled-componentschroma-js をインストールします。

yarn add styled-components chroma-js
yarn add -D @types/styled-components @types/chroma-js

「 styled-components 」と「 chroma-js 」を試してみる

今回、styled-componentschroma-js を試すために、調整・追加したコードは以下の3つです。

  • src/index.tsx
  • src/packages/Sandbox.tsx
  • src/packages/SampleButton.tsx

3つのコードについて、簡単に見ていきたいと思います。

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';
import Sandbox from "./packages/Sandbox";

ReactDOM.render(
  <React.StrictMode>
    {/*<App />*/}
    <Sandbox/>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

後述のお試し用 Sandbox コンポーネントを追加しています。

表示チェックするだけなので、不要な App コンポーネントはコメントアウトしています。

src/packages/Sandbox.tsx

import React from "react";
import styled from "styled-components";
import chroma from "chroma-js";
import SampleButton from "./SampleButton";

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #76ff96
`;

const Wrapper = styled.section`
  padding: 4rem;
  background: ${chroma('#000000').brighten(2).hex()};
  text-align: center;
`;

export default function Sandbox() {
    return <Wrapper>
        <Title>
            Hello World!
        </Title>
        <SampleButton>Sample button</SampleButton>
    </Wrapper>
}

styled-componentsGetting Started のコードの、ほぼコピペです。

CSS を書くだけで、コンポーネントができてしまう とは。。。おそろしい子!

chroma-js も試したかったので、Wrapper コンポーネントの background 部分を少し調整しています。

src/packages/SampleButton.tsx

import styled from "styled-components";

const SampleButton = styled.h1`
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.29);
    &:active {
      box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
      transform: translateY(2px);
    }
`;

export default SampleButton

「ネット上のサンプル CSS を、そのままコンポーネント化できそう」 と思い、試しに作ってみたボタンです。

以下のページのボタンデザインを使わせてもらいました。

SCSS スタイルに少し書き直しただけで、ほぼほぼ、そのままのコードでコンポーネントができてしまいました

良さげなサンプルを集めて自分用にパッケージ化、storybook で表示チェック。。。夢が広がる੭ु´・ω・`)੭ु⁾⁾

実際に動かしてみる

以下のコマンドを実行して、サービスを起動してください。

yarn start

ポートの衝突などがなければ、3000 ポートでサービスがスタートするので、http://localhost:3000 で表示を確認してください。

以下のような感じで表示されれば、成功です。

styled-components を試してみる!

まとめ

今回は styled-componentschroma.js を試してみました

styled-componentsネット上に公開されている CSS サンプルをそのままコンポーネント化でき、想像以上に捗りそうです。

chroma-js も、動的に色を変化させる 場合などに便利そうです。

最後に、今回の内容について、簡単にまとめてみたいと思います。

  • styled-components。。。おそろしい子!
  • サンプル CSS で 10 秒コンポーネントも夢じゃない!
  • パッケージ化とか夢が広がる(੭ु´・ω・`)੭ु⁾⁾

今回の内容は、以下のリポジトリで公開しています。

うまく動かなかった場合は、以下のリポジトリをクローンして試してみてください。