styled-components の

` ← について

誰？

 

名前: @kimizuy

 

JS歴: 9か月

 

今やってる: React, Redux, TypeScript 

 

趣味: お笑い芸人のラジオ, スプラトゥーン2 

TL;DR

・APIの改善

単なる文字列よりもテンプレートリテラルを使ったほうがすっきりした見た目で操作できる

` （バックティック）

styled-components とは

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

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

https://www.styled-components.com/docs/basics

styled-components とは

・ファイルやコンポーネント単位でスタイル管理ができる

→ Label や Wrapper などの汎用的な名前で定義できる

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

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

styled-components とは

・シンプルで直感的なUIコンポーネントを作れる

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

ん？

なぜお前がここに？

テンプレートリテラル

Template literalはダブルクオートやシングルクオートの代わりにバックティック文字(` `) (grave accent)で囲みます。Template literalにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧(${expression})で示されます。

 

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

`string text ${expression} string text`

初心者ぼく「はいはい、文字列をいいかんじにしてくれるやつね」

タグ付きテンプレートリテラル

const logArgs = (...args) => console.log(...args)

logArgs('a', 'b')
// -> a b

logArgs`I like pizza`
// -> ["I like pizza"]

https://mxstbr.blog/2016/11/styled-components-magic-explained/

関数を使ってテンプレートリテラルのアウトプットを調整できる

const execFuncArgs = (...args) => args.forEach(arg => {
  if (typeof arg === 'function') {
    arg()
  }
})

execFuncArgs('a', 'b')
// -> undefined

execFuncArgs(() => { console.log('this is a function') })
// -> "this is a function"

例: 引数が関数オブジェクトならそれを実行する関数

const execFuncArgs = (...args) => args.forEach(arg => {
  if (typeof arg === 'function') {
    arg()
  }
})

// テンプレートリテラルを引数に渡す
execFuncArgs(`Hi, ${() => { console.log('Executed!') }}`)
// -> undefined

// タグ付きテンプレートリテラル
execFuncArgs`Hi, ${() => { console.log('Executed!') }}`
// -> "Executed!"

例: 引数が関数オブジェクトならそれを実行する関数

初心者ぼく「なんでテンプレートリテラルを使う必要があるんだ？」

styled-components を

テンプレートリテラルを使わないで使う

const Button = styled('button')([], 
  'background: palevioletred', 
  'color: #fff'
)
const Button = styled.button`
  background: palevioletred;
  color: #fff;
`

通常

結論

・APIの改善

単なる文字列よりもテンプレートリテラルを使ったほうがすっきりした見た目で操作できる

他にも

lit-html

let sayHello = name =>
  html`
    <h1>Hello ${name}</h1>
  `;

render(sayHello("World"), document.body);

graphql-tag

const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

以上

ありがとうございました。

Made with Slides.com