JSでバッククォート？テンプレートリテラル完全攻略

2019年9月2日

テンプレートリテラルとは

テンプレートリテラルは ES6 で新しく出た、文字列を扱うための構文です。
文字列として扱いたい箇所を「｀（バッククォート）」で囲うことで使用できます。

const str = `テンプレートリテラル`;

これまでのJavaScriptでは「"（ダブルクォート）」と「'（シングルクォート）」がありました。
こちらも文字列を扱うための記述ですが、テンプレートリテラルは文字列内で式を展開できるなど、利点が多くあります。
ぜひ使えるようにしておきましょう！！

テンプレートリテラルの使用例

まずは、習うより実際に手を動かそう！！
ってことで、実際にテンプレートリテラルの記述方法と出力結果をみていきましょう。

ここでは、以下をやっていきます。

変数と式の展開
改行処理
エスケープ処理

変数と式の展開

まずは、一番基本となる変数や式の展開です。
javascriptのコード内で使用されている変数や計算式を文字列内に直接、組み込むことができます。
（おそらくこれが一番のメリット）

// 変数と式の展開
const food = '焼肉';
const want_eat = `私は${food}を${10 * 20}人前、食べたい。`;

console.log(want_eat);

//出力
私は焼肉を200人前、食べたい。

使い方は、対象の文字列を「(`)バッククォート」で囲むだけでオッケーです！
文字列に変数や計算式を入れるには変数を${}で囲います。

これをテンプレートリテラルを使わないで書くと、こんな感じになります。

const food = '焼肉';
const want_eat = '私は' + food + 'を' + (10 * 20) + '人前、食べたい。';

console.log(want_eat);

こんな感じで、プラス(+)やらクォート(‘)やらたくさんついてしまいます。

たいして変わらない？？？

では、これだったらどうでしょう？

// テンプレートリテラル無し
const html = '<div class="wrapper">' +
  '<dl>' +
  '<dt>' + title + '</dt>' +
  '<dd>' + text + '</dd>' +
  '</dl>' +
  '</div>';

// テンプレートリテラル
const html2 = `
  <div class="wrapper">
  <dl>
  <dt>${title}</dt>
  <dd>${text}</dd>
  </dl>
  </div>
`

実際の実装では、要素を動的に出力する際に、HTMLタグを文字列として記述することがあると思います。
その際に、コードを見やすくするため、改行などをする人もいるかと思います。
そうすると、可読性は上がりますが、プラス(+)やクォート( ' )の記述が多くなってしまうデメリットがあります。

テンプレートリテラルを使うことで記述量を極限まで削減することができます。

改行処理

テンプレートリテラルでは、改行コードを書かなくても改行することができます。

// 記述
const text = `改行することも可能なんだぜ！
すごいだろ！！！`;

// 出力
改行することも可能なんだぜ！
すごいだろ！！！

もちろん、今まで通り、改行コードを使用することもできます。

// 記述
const text = `改行することも\n可能なんだぜ！
すごいだろ！！！`;

// 出力
改行することも
可能なんだぜ！
すごいだろ！！！

エスケープ処理

テンプレートリテラルでは、通常の文字列と同じように、エスケープ処理を行うことも出来ます。
例えば、以下のような文章をテンプレートリテラルを使って出力するとします。

\n ${hoge}

この文字列を出力しようすると、「 hogeという変数が見つかりません」というエラーが出てしまいます。

Uncaught ReferenceError: hoge is not defined

また、「\n」も文字列ではなく、改行として認識されてしまいます。

この問題を解決するために、エスケープ処理を行う必要があります。
記述方法はエスケープしたい文字の始めに「\（バックスラッシュ）」を付ければOKです。

`\\n \${hoge}`

これを出力すると、

\n ${hoge}

となるはずです！

String.rawを使ってみる

エスケープ処理は「\（バックスラッシュ）」を付けるだけの簡単な作業でしたが、次のような文字列を出力するとしたらどうでしょう？

\nは文章を改行する時に使います。そのほかにも「\r」や「\b」「\r」「\f」「\u」などもあるのでぜひ使ってみてね！！

いちいち、エスケープするのは面倒ですね・・・。

そんなときは「String.raw」を使いましょう！！
String.rawを使用することで特殊文字をエスケープすることが出来ます。

// String.rawを使った記述
console.log(String.raw`\nは文章を改行する時に使います。そのほかにも「\r」や「\b」「\r」「\f」「\u」などもあるのでぜひ使ってみてね！！`);

// 出力
\nは文章を改行する時に使います。そのほかにも「\r」や「\b」「\r」「\f」「\u」などもあるのでぜひ使ってみてね！！

さて、「String.raw`～`」は少し見慣れない記述ですね。
見慣れないけど、これはただの関数です。

次はテンプレートリテラル×関数について見ていきましょう！！

テンプレートリテラルで関数を作ってみよう

テンプレートリテラルを使って関数を作ることも出来ます。
この関数は「タグ付きテンプレートリテラル」と呼ばれています。

まずは、タグ付きテンプレートリテラルの引数を出力する関数（hoge）を作ってみます。


function hoge() {
  console.log(arguments);
}

const foo = 'の';
hoge`\\タグ付き\\テンプレートリテラル${foo}実験 part${3 * 3}`;

// 次のような配列が出力されます
[
0 : [“\タグ付き\”, “テンプレートリテラル”, “実験 part”, “”],
1 : [“の”],
2 : 9
];

この配列は、それぞれ以下のようになっています。

配列[0]：テンプレートリテラルで文字列として扱われている個所の配列
配列[1]：１つ目の「${}」で受け取った値
配列[2]：２つ目の「${}」で受け取った値
以降、「${}」で受け取った値が入ります。

このタグ付きテンプレートリテラルを扱うことで、文字列を自由に扱うことが出来ます。

テンプレートリテラルを使うメリット

ここまで来ると、

「今まで通りで実装できるのに、なぜあえてテンプレートリテラルを使うのか？」

と、疑問をもたれた方もいると思います。

それは全て【シュガーシンタックス】のためなのです！！！

シュガーシンタックス

シュガーシンタックスとは、プログラミング言語の「分かりにくい構文」を「シンプルな構文」に書けるようにしたものです。

分かりやすい例はfor文ですね！

const arr = [1, 2, 3, 4, 5];
for(let i = 0; i ＜ arr.length; i++) {
  console.log(arr[i]);
}

for(let i of arr) {
  console.log(arr[i]);
}

この２つのfor文は、どちらも同じ意味です。
しかし記述量、見やすさとしては明らかにfor-ofの方が優秀だと分かりますね！！

これが数千行と、複雑になってくると、シュガーシンタックスのありがたみを実感できると思います。

同様に、文字列を多く扱う場合はテンプレートリテラルと使用した方が、可読性、メンテナンス性が向上します。

まとめ

テンプレートリテラルとは？

テンプレートリテラルはECMAScript 6(ES6)で新しく出た、文字列を扱うための構文
文字列として扱いたい箇所を「｀（バッククォート）」で囲うことで使用できる
変数や式の展開が出来る
タグ付きテンプレートリテラルが扱える

テンプレートリテラルの使用例

変数と式の展開

「${}」で囲うことで文字列に変数や式を展開することが出来ます。

const food = '焼肉';
const want_eat = `私は${food}を${10 * 20}人前、食べたい。`;

cnosole.log(want_eat);

改行

改行コードを記述することなく、改行できます。


const text = `改行することも可能なんだぜ！
すごいだろ！！！`;

// 出力
改行することも可能なんだぜ！
すごいだろ！！！

エスケープ

「\（バックスラッシュ）」を使うことで特殊コードをエスケープできます。

// エスケープの記述
console.log(`\\n \${hoge}`);

// 出力
\n ${hoge}

String.raw

「String.raw」を使うことで、一括でエスケープできます。

// String.rawを使った記述
console.log(String.raw`\nは文章を改行する時に使います。そのほかにも「\r」や「\b」「\r」「\f」「\u」などもあるのでぜひ使ってみてね！！`);

// 出力
\nは文章を改行する時に使います。そのほかにも「\r」や「\b」「\r」「\f」「\u」などもあるのでぜひ使ってみてね！！

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

テンプレートリテラルを使って関数を作ることが出来ます。


function hoge() {
  console.log(arguments);
}

const foo = 'の';
hoge`\\タグ付き\\テンプレートリテラル${foo}実験 part${3 * 3}`;

// 次のような配列が出力されます
[
0 : ["\タグ付き\", "テンプレートリテラル", "実験 part", ""],
1 : ["の"],
2 : 9
];

関数の引数は次のようになっています。

・0：テンプレートリテラルで文字列として扱われている個所の配列
・1：１つ目の「${}」で受け取った値
・2：２つ目の「${}」で受け取った値
・以降、「${}」で受け取った値が入ります。

テンプレートリテラルを使うメリット

テンプレートリテラルを使用することで「分かりにくい構文」を「シンプルな構文」にすることが出来ます。
その結果、可読性やメンテナンス性が向上します。

// テンプレートリテラル無し
const html = '<div class"wrapper"="">' +
  '<dl>' +
  '<dt>' + title + '</dt>' +
  '<dd>' + text + '</dd>' +
  '</dl>' +
  '</div>';

// テンプレートリテラル
const html2 = `
  <div class"wrapper"="">
  <dl>
  <dt>${title}</dt>
  <dd>${text}</dd>
  </dl>
  </div>
`

オススメの参考書（Javascript）

ここからは僕が実際に読んで・使ってみて良かった参考書を紹介します！

インターネットでパーツをかき集めて勉強するのもいいですが、参考書を購入した方が効率が良かったりします。
インターネットで勉強するデメリットは、こんな感じになります！

記述例を網羅的に書いてあるサイトは少なく、いちいちググらないといけない
そもそも知らない用語だと検索できない
実装は出来るけど、メンテナンス性がイケてないサイトがまぁまぁあるｗ

こんな感じですね～。
逆に言うと参考書になるとこのデメリットが解消されますね！！
というわけで、長くなりましたが紹介していきます！！！！

ウェブ開発を始めたばかりの方向け

本当によくわかるJavaScriptの教科書

ウェブ開発を始めた「駆け出しエンジニア」のための書籍になります。
if文やfor文、DOMの操作方法など入門するには丁度いい内容です。
ネットだけでJavascriptを学習しようとして挫折した方にもオススメです！

Amazonで購入する

JSをある程度知っている・もっと学習したい方向け

JavaScript コードレシピ集

JSを使って何か実装経験がある方向けの書籍になります。
小技やcanvas・json・fetch・class構文などJSで出来ることが網羅的に紹介されています。
これ1冊あれば実務でもかなり重宝します。

Amazonで購入する

Webクリエイターのアトリエ

JSでバッククォート？テンプレートリテラル完全攻略

テンプレートリテラルとは

テンプレートリテラルの使用例

変数と式の展開

改行処理

エスケープ処理

String.rawを使ってみる

テンプレートリテラルで関数を作ってみよう

テンプレートリテラルを使うメリット

シュガーシンタックス

まとめ

テンプレートリテラルとは？

テンプレートリテラルの使用例

変数と式の展開

改行

エスケープ

String.raw

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

テンプレートリテラルを使うメリット

オススメの参考書（Javascript）

本当によくわかるJavaScriptの教科書

JavaScript コードレシピ集

【Javascript入門】Set オブジェクトを使って重複しない配列を作る

【脱jQuery】JSのclassListでクラスを追加/削除/判定する！

【JS入門】ES6から使えるmap / filter / reduceの使い方と活用術

【SASS入門】for文の使い方と業務で使える３つの活用術

CSSでスマホの向きを判定できるorientationを使おう！

JSでクリップボードのコピー&ペーストを実装する2つの方法【execCommand / Clipboard API】

JSでバッククォート？テンプレートリテラル完全攻略

CSSでテキストにグラデーションを掛けてみた！

npm scriptを使って自動的にSASSをコンパイルしよう！【使って覚えるSASS入門】