TypeScriptでよくわからない書き方が発生した。
const GlobalStyle = createGlobalStyle`
${restCss}
body{
margin : 0;
padding: 0;
box-sizing: border-box;
}
`;
それはこのような物で、関数の後ろに直接 ` を使用して文字列を書いている。
これなら理解できる。
const GlobalStyle = createGlobalStyle(`
${restCss}
body{
margin : 0;
padding: 0;
box-sizing: border-box;
}
`);
注意
このQiita記事を書きながら問題解決しているので、無駄に長くなっています。サッっと結果だけ知りたい方はまとめを見たりCodePenで触ったりしてみて下さい。
この文法の正体
この文法の正体を教えて頂いたのでメモ。
- この文法の名前 :
タグ付きテンプレートリテラル
タグ付きテンプレートリテラルって何？
タグ付きテンプレートは、テンプレートリテラルのより高度な形式です。
タグを使用すると、テンプレートリテラルを関数で解析できます。タグ関数の最初の引数には、文字列リテラルの配列を含みます。残りの引数は式に関連付けられます。
タグ関数は、これらの引数に対して何でも望み通りの操作を実行することができ、加工された文字列を返します。 (または、以下の例の一つで示しているように、まったく異なるものを返すこともできます。)
タグに使用される関数の名前は、自由に指定できます。
MDN タグ付きテンプレート
そもそもテンプレートリテラルって何？
テンプレートリテラルは、組み込み式を扱うことができる文字列リテラルです。複数行の文字列や文字列挿入機能を使用することができます。
ES2015 仕様書よりも前の版では、"template strings" と呼ばれていました。
MDN テンプレートリテラル（テンプレート文字）
// これの事っぽい。
`Hello world`
`Hello ${user.name}`
タグって何？
つまり
`Hello ${user.name}` + タグ = タグ付きテンプレートリテラル
になるらしい。
これでタグが何か分かっていない事が分かった。
タグ
（少し下に翻訳あり & 逆に混乱する情報の方が多いので、コレは一旦スキップで良い。）
A tagged template (tag function) is what we call syntactic sugar. If you’ve never heard this term before it simply means that it’s syntax that was designed to make things easier to read.
With that in mind…A tagged template is a function call that uses a template literal from which to get its arguments.
// TAG FUNCTION
greetI'm ${name}. I'm ${age} years old.
A tag function is the function name ( greet ) followed by a template literal. Since our tag functions are purely syntactic sugar, using the above tag function, is equivalent to writing this normal function invocation:
>```javascript
// EQUIVALENT FUNCTION
greet(["I'm ", ". I'm ", " years old."], name, age)
JavaScript — What are Tag Functions?
タグ付きテンプレート（タグ関数）は、シンタックスシュガーと呼ばれるものです。この用語を聞いたことがない場合は、単に読みやすくするために設計された構文であることを意味します。
それを念頭に置いて…タグ付きテンプレートは、引数を取得するためのテンプレートリテラルを使用する関数呼び出しです。
// TAG FUNCTION
greetI'm ${name}. I'm ${age} years old.
タグ関数は、関数名（greet）の後にテンプレートリテラルが続くものです。タグ関数は純粋にシンタックスシュガーであるため、上記のタグ関数を使用することは、この通常の関数呼び出しを記述することと同じです。
>>```javascript
// EQUIVALENT FUNCTION
greet(["I'm ", ". I'm ", " years old."], name, age)
タグ = タグ関数
このタグと言うのはタグ関数という物の事だと思うので、
`Hello ${user.name}` + タグ関数 = タグ付きテンプレートリテラル
になる。
結局タグ付きテンプレートリテラル は何ができるの？
A.テンプレートリテラルを関数で処理する事ができる。
イメージ的にはArray.mapのテンプレートリテラル版だと思う。
See the Pen タグ付きテンプレートリテラル by lp0ql (@lp0ql) on CodePen.
実際にCodePenで触ってみて理解した。
このCodePenで書いたようなシチュエーションで使うのは無駄だと思うけど、タグ付きテンプレートリテラル で何が出来るのかはよく分かった。
まとめ
タグ関数 = Array.map のテンプレートリテラル版（イメージ）
テンプレートリテラル = `${a}は${b}です。` // こんなやつ
タグ付きテンプレートリテラル = タグ関数 に対して タグ付きテンプレートリテラル を使う事
実装方法
タグ関数を作る
const tagFunction = (handles:string[], values:string[]):string => {
return "あいうえお"
}
handles に ${}の外の文字列
values に ${} の中の値が入っている。
これらの値を使ってreturnする文字列を作る
タグ関数を使う
const displayString = tagFunction`${a}と${b}`;
console.log(displayString);
// => あいうえお