2018.06.08

逆引きstyled-components 共通コンポーネントをうまく作る5つの小技

ここのところstyled-componentsでのAtomicDesignの実装を考えていた。共通コンポーネント(Atomっぽいの)を書くときに役立つTips。
それ以外のときはあまり役立たないかもしれない。基本TypeScriptで真価を発揮すると思っています。（エディタ補完的な意味で）

> react-routerのLinkにstyled-componentsを使いたいreact-routerのLinkにstyled-componentsを使いたい

styled.h1, styled.pみたいにHTMLにもともと存在するタグにstyled-componentsを使うのはよくある。Linkはどうなの？って聞かれたのでその時の見せた例。
調べてみたらDocsのstyling-any-componentsに書いてあった。

jsx
import styled from 'styled-components'
import { Link } from 'react-router-dom'

const StyledLink = styled(Link)`
  text-decoration: none;
`

const HogeComponent = (props) => (
  <StyledLink to='/'>No underline</StyledLink>
)

> 複数のボタンやバリエーションをキレイに書きたい複数のボタンやバリエーションをキレイに書きたい

よくあるケース、ボタンみたいなバリエーションを作りたい時は、ベースとなるスタイルを定義して、継承させて別スタイルを当ててexportする。
Docsのextending-stylesで記載されている例。

Button.jsx
import styled from 'styled-components'

const BaseButton = styled.a`
  padding: 8px 16px;
  color: white;
`

export const SuccessButton = BaseButton.extend`
  background-color: green;
`

export const DisabledButton = BaseButton.extend`
  background-color: gray
`

もう一つpropsで管理する方法もあるが、可読性的には上記のextendが好み。3項演算子が増えてくるとしんどい。

Button.jsx
import styled from 'styled-components'

const BaseButton = styled.a`
  padding: 8px 16px;
  color: white;
  background-color: ${props => props.primary ? 'blue': 'gray'};
`

> 同じスタイルを別のタグで使いまわしたい同じスタイルを別のタグで使いまわしたい

styled-componentsで作ったコンポーネントにwithCompoentを使うとベースのタグが変えられる。a => spanとかh1 => h2, h3, h4とかのケース。

jsx
import styled from 'styled-components'
import { Link } from 'react-router-dom'

const MenuLInkItem = styled(Link)`
  border-bottom: 3px solid transparent;
  padding: 15px 12px 12px;
`

const MenuActiveItem = MenuLInkItem.withComponent('span').extend`
  color: red;
  border-bottom-color: #red;
`

> 定数や色を管理したい定数や色を管理したい

別ファイルを作ってimportして使う。

colors.js
export default {
  primary: '#0a9b94',
  secondary: '#efede0'
  success: '#08837d',
  warning: '#bf7600',
  text: '#3c4a60'
}

styled-componentsのcssでスニペットみたいなのも作れる。font-familyとかSCSSでいうmixinみたいなものを定義しておくと良さげ。

snippets.js
import { css } from 'styled-components'

export const fontFamily = css`
  font-family: "Lato", Arial, Emoji, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif
`

export const fontFamilyDreamOrphans = css`
  font-family: "DreamOrphans", Arial, sans-serif
`

export const truncateMultiLine = (lines) => css`
  display: -webkit-box;
  -webkit-line-clamp: ${lines};
  -webkit-box-orient: vertical;
  overflow: hidden;
`

> Text系のスタイルが乱立するのでまとめたいText系のスタイルが乱立するのでまとめたい

冗長と思う人もいるかもしれないが、1ファイルにまとめていくのがいいんじゃないかと思ってる。
Interface Inventoryっていう既存サイトの同じようなスタイルをまとめて一覧化するみたいな手法がある。それを模したコードを意識したらこのファイル構造になった。
既存サイトがあってデザインがバラバラみたいなシチュエーション（ある？）ではデザインガイドを作る時にこういったファイルが役立つのではないかと思っている。
共通化のスタート地点としてのファイル。

ここではcssで共通スタイルを書いて、それを各コンポーネントで読む方式で書いた。

Heading.jsx
import styled from 'styled-components'

const headingBaseStyle = css`
  font-weight: 600;
  color: #3c5064;
`

const BaseHeading1 = styled.h1`
  ${headingBaseStyle}
  font-size: 20px;
  letter-spacing: 1px;
`

export const Post = BaseHeading.extend`
  margin-top: 6px;  
`

export const PostSection = styled.h2`
  ${headingBaseStyle}
  font-size: 20px;
  margin-bottom: 16px;
`

export const Card = styled.h3`
  ${headingBaseStyle}
  font-size: 13px;
`

正直AtomicDesignはエンジニアとデザイナーが協力しても難しいトピックなので自分の中でもあまり明確なゴールは描けていない。
AtomicDesignのボイラープレートみたいなものがあって、それをエンジニアとデザイナーでこなしていけば完成みたいな銀の弾丸はないだろうか？（いや、ない）
現状は、今あるデザインを共通箇所を見つけていって小さくしていくことが多そう。デザイナー的にこれを意識しながらAtomから作っていくのはしんどそう。

ただ、styled-componentsはAtomic Designでなくても使えるので便利に使っていきたいと思う。

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

2023/04/30

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

2018/05/30netlify

dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数（4つ）の貢献を行った人に特典がプレゼントされるものになっています。自分はドキュメ

2022/11/02