styled-componentsのドキュメントを読むと、こんな書き方がされています。
styled.div` // css... `
ちょっと見た目気持ち悪いですが、これはES6のTagged Template Literalというものです。
Tagged Template Literalの解説
const ttl = (args: any, a?: any, b?: any, c?:any) => {
console.dir(args)
console.log(a)
console.log(b)
console.log(c)
}
ttl`hello world`
// ["hello world"]
// undefined
// undefined
// undefined
引数argsには、こうなります。
引数a, b, cを受け取りたい時は下記のようにする。
ttl`hello world${1}${2}${3}`
// ["hello world", "", "", ""]
// 1
// 2
// 3
可変長引数ならスプレッド構文を使うのがおすすめ
const ttl = (args: any, ...values: any) => {
console.dir(args)
console.dir(values)
}
ttl`hello world${1}${2}${3}`
// ["hello world", "", "", ""]
// [1,2,3]
使い時を考える
文字列の一部を変換して返したい時
// Tagged Template Literal
const currentYear = (args: any, ...values: any) => {
return args[0] +values[0].getFullYear() +"年"
}
// 関数
const currentYearFunc = (text: string, date: Date) => {
return text +date.getFullYear() +"年"
}
currentYear`現在は${new Date()}`
currentYearFunc("現在は", new Date())
// 現在は2020年
慣れれば前者の方が読みやすそうです。
フロントエンド開発でお困りのことはありませんか？
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。
