複数行文字列(テンプレートリテラル)

このレッスンでは、テンプレートリテラルを使った複数行文字列の書き方を学び、読みやすい形でメッセージを組み立てられるようになることを目標にします。「JavaScript テンプレートリテラル 使い方」「JavaScript 複数行文字列」で調べている方向けです。

バッククォート` `で囲むテンプレートリテラルは、改行をそのまま含められるので、複数行にわたる文章を読みやすく書けます。メールの本文やHTMLの断片を組み立てるときに便利です。${変数}という書き方で、文字列の中に変数の値を直接埋め込めるのも大きな利点です。

サンプルコードでは、${name}という書き方で変数を文字列の中に埋め込みながら、改行を含む複数行のメッセージを組み立てています。従来の+による文字列結合で同じことをすると、行ごとに+と" "を書く必要がありコードが読みにくくなりますが、テンプレートリテラルならそのまま自然な形で書けます。

初心者がよくつまずくのが、通常のシングルクォートやダブルクォートとバッククォートを混同してしまうことです。バッククォートはキーボードの左上あたりにある特殊な記号で、これを使わないと${}による変数埋め込みは機能しません。テンプレートリテラルの中では、通常のクォートをエスケープせずに使える利点もあります。

文字列の組み立てをすっきり書けるようになるため、実務のコードでも標準的に使われています。メールのテンプレートや、APIに送信するメッセージの組み立てなど、複数行のテキストを扱うあらゆる場面でテンプレートリテラルが活用されています。