Zenn
🦁

JavaScriptにおけるテンプレート文字列

2022/06/27に公開
JavaScript
JavaScript
#
テンプレート文字列
tech

JSのフレームワーク勉強するってなった時にテンプレート文字列がバンバン出てきて雰囲気で流しちゃったことがあったので自分の復習もかねてまとめます。
使用するコードはgitに用意しているので適宜コピーして試してみてください。
URL：https://github.com/Souru-Hishinuma/templateString

前提知識・対象者

・JavaScript初学者
・JavaScriptの基礎をある程度理解しているが変数宣言を雰囲気で済ませてしまった方
・JavaScriptの学習を終えてこれからフレームワークを用いた高度なJavaScriptの学習にステップアップを考えている方

従来の方法

まずは従来(ES6以前)の方法で変数を文字列の中で使用する方法を見ていきます。

const lastName = "山田";
const firstName = "太郎";
const hobby = "テニス";

const output = "私の名前は" + lastName + firstName + "です。" + "趣味は" + hobby + "です。";
console.log(output);

出力を確認するためにHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script src="./index.js"></script>
</body>
</html>

ディベロッパーツールで確認してみましょう。

しっかりと出力ができているのが確認できます。
正直別にこれでも正常に動作はするのですが、コードが冗長になり可読性が低く、スマートとは言えません。
また、フレームワークを用いる際にはこちらの方法を使うことはほとんどありませんのでしっかりと次に紹介するテンプレート文字列を使用する方法を理解しておきましょう。

テンプレート文字列を用いた結合

では、テンプレート文字列を用いた結合方法を見ていきましょう。
次のようなコードを追加し、consoleをディベロッパーツールで確認していきます。

const output2 = `私の名前は${lastName}${firstName}です。趣味は${hobby}です。`;
console.log(output2);

結果

しっかりと同じように出力できていることがわかります。
特徴としてはバッククォート（``）で囲う点と、${}の形で変数名を囲う点です。
特にReact.jsなどではJS上で作った変数をHTML上に埋め込んで表示することが多いため、今は使い道がいまいちイメージできない方も学習の中で出会ったら見直しに来てほしいと思います。

まとめ

JavaScriptにおけるテンプレート文字列を用いた文字列と変数の結合を説明しました。
この書き方がスタンダードになるので是非ご自身でも試してみてください。
お疲れさまでした！

Discussion