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ライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。