【React】styled-components を試してみる!
今回は styled-components
を試してみたい と思います。
ついでに、色を操作できるライブラリ chroma.js
も試してみたいと思います。
styled-components
と chroma.js
の詳細については、以下のページを参照してください。
それでは早速、styled-components
と chroma.js
を試していきたいと思います。
目次
Reactセットアップ
TypeScript が慣れているので、惰性で typescript テンプレートを使用します(*´▽`*;)
以下のコマンドで、React をセットアップしてください。
npx create-react-app my-app --template typescript
必要なパッケージのインストール
今回試す、styled-components
と chroma-js
をインストールします。
yarn add styled-components chroma-js
yarn add -D @types/styled-components @types/chroma-js
「 styled-components 」と「 chroma-js 」を試してみる
今回、styled-components
と chroma-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-components
の Getting 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
と chroma.js
を試してみました。
styled-components
は ネット上に公開されている CSS サンプルをそのままコンポーネント化でき、想像以上に捗りそうです。
chroma-js
も、動的に色を変化させる 場合などに便利そうです。
最後に、今回の内容について、簡単にまとめてみたいと思います。
styled-components
。。。おそろしい子!- サンプル CSS で 10 秒コンポーネントも夢じゃない!
- パッケージ化とか夢が広がる(੭ु´・ω・`)੭ु⁾⁾
今回の内容は、以下のリポジトリで公開しています。
うまく動かなかった場合は、以下のリポジトリをクローンして試してみてください。