テンプレートリテラルを１分でマスタ―する【JavaScript】

JavaScript

2020.02.07

テンプレートリテラル（別名：テンプレート文字列）は、 ECMAScript6から新しく使えるようになった構文で文字列の中に変数や定数を埋め込むことができる便利な仕組みです。

このページでは、テンプレートリテラルについて初心者の人でも今日から使えるように１から解説します。

このページで学べる内容

JavaScript初心者でも１分で理解できるようサンプルコード付きで解説します。是非最後までご覧ください。

テンプレートリテラル（テンプレート文字列）とは？

テンプレートリテラル（テンプレート文字列）は、文字列の中に変数や定数などを埋め込んだり、改行を入れたりすることができるようにして、文字列の扱いを楽に便利にできる構文です。

テンプレートリテラルができるまでは、文字列を結合する際に「+」を記述する必要がありましたが、テンプレートリテラルを用いればその必要がありません。そのため、JavaScriptの構文全体がすっきりして見やすくなって、JavaScript初心者の方でもぱっと見で意味が分かりやすくなります。

テンプレートリテラルは、最新の構文なのでちょっと前までは対応しているブラウザが少なかったのですが、今ではほとんどのブラウザで対応済。これからの主流です。

テンプレートリテラルの使い方は非常に簡単。

これまで文字列を「””（ダブルクォーテーション）」もしくは「''（シングルクォーテーション）」で囲んきましたが、テンプレートリテラルでは「``（バックコート）」にするだけです。

console.log(`テンプレートリテラル`) //  `（バックコート）で囲むだけ！

構文は全く難しくありませんので、早速ここからはテンプレートリテラルでできることを見てきましょう。

これまで改行するには「\n（エスケープ）」を記述する必要がありましたが、テンプレートリテラルを利用すればそのまま改行することができます。

let sample  = "はろー\nわーるど";   // "\n"エスケープを利用して改行

let sample2 = `はろー
わーるど`;                          // コード内で改行（テンプレートリテラル）

${変数}とすることで、文字列の中に直接変数を埋め込むことができます。

これまでは「+」記号をうまく使って文字列をマニュアルで結合していました。これ結構面倒でしたね。

今後は、テンプレートリテラルを利用して変数は直接文字列の中に埋め込むのが主流になっていくはずです。

変数（定数）

JavaScriptの変数/定数について詳しく知りたい方はこちらの記事をご覧ください。

変数だけではなく、${式}を文字列に埋め込むことも可能です。

See the Pen テンプレートリテラル　式 by ビズドットオンライン (@BizOnline) on CodePen.

これまで改行を行う場合に用いていた「\n（エスケープ）」も一緒に利用することができます。

ただし、この利用方法はあまり見かけない気がします。テンプレートリテラルを利用するのであれば、わざわざエスケープする必要はありません。

使いどころは分かりませんが、こういうのもできるんだ程度に覚えておくと役に立つときが来るかもしれません。

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。