プログラミングを勉強し始めた時に数字の足し算は習いますが、「文字の足し算」「文字の合体」みたいなことの方は意外と知らなかったりします。
「四則演算の足し算しか方法を知らない」
「文字と変数、記号など色んなもの同士を合体させる方法を知りたい」
「””と“の違いがよく分かっていない」
本日はそんな方に向けた内容になります。
テンプレートリテラルは、従来の文字列結合よりも簡潔で読みやすいコードを実現するための強力なツールです。
従来の方法では文字列を結合するために演算子（「+」）を使用することが一般的でした。
しかし、この方法は複雑な式を扱う際に読みづらくなることがありました。
テンプレートリテラルでは、バッククオート（“）で囲まれた部分に変数や式を埋め込むことができます。
この記事では具体的なコード例を交えながらテンプレートリテラルの基本的な使い方を詳しくご紹介します。
また動画もあるので必要に応じて使ってください。
JavaScriptで一番簡単に文字を結合する方法
一番簡単なやり方は四則演算の足し算を使えば良いです。
足し算は数字だけでなく文字にも使えるんですよね。
const text1 = "おはよう";
const text2 = "ございます";
console.log(text1 + text2); //"おはようございます"と出力されるちなみに足し算は文字だけでなくスペースや記号にも使えます。
const text1 = "おはよう";
const text2 = "ございます";
console.log(text1 + " " + text2); //"おはよう ございます"と出力されるさらに変数と文字列の結合もできます。
const text1 = "おはよう";
console.log(text1 + "ございます"); //"おはようございます"と出力されるただAPIからデータを取得するケースなど、変数の数が多くなると若干しんどくなります。
let data;
const student = {
id: "0001",
name: "tanaka",
age: 20,
};
data =
"学籍番号：" +
student.id +
" " +
"名前：" +
student.name +
" " +
"年齢：" +
student.age;テンプレートリテラルの使い方
意外と簡単に文字の結合ができることが分かりました。
JavaScriptには文字の結合にもっと便利な機能があるので紹介します。
恐らく実務ではこちらの方が登場頻度は多いかと思います。
const text1 = "おはよう";
const text2 = "ございます";
console.log(`${text1}${text2}`); //"おはようございます"と出力される出力結果は同じなのですが、何だか見慣れない記号が出てきましたね。
まず「“」はテンプレートリテラルと呼ばれています、「”」「””」ではないので注意してください。
キーボードのシフトキーを押しながら「@」のキーを押すと入力できます。
また「${ }」は変数を扱うための記号で、「${ }」のなかで変数を記載することで変数の値を出力することができます。
先ほどの足し算と違って、「+」など間に挟む記号が無くなったので便利ですよね。
またAPIコールするときのURLにも使われることが多いです。
例えば以下のようにidによって表示内容を変えたい時です。
// URL自体をテンプレートにするとidが入る部分を変数として処理できる
fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
.then(response => response.json())
.then(json => console.log(json))さらにJavaScript側でHTMLタグを作成するときも使えます。
以下はinsertAdjacentHTMLメソッドというものの引数にHTMLタグを指定しています。
const wrapper = document.querySelector(".wrapper");
wrapper.insertAdjacentHTML("afterbegin", `<div class="test">テスト</div>`);一番基本的な方法でHTMLタグを作成する時は以下のような形かと思います。
// タグの生成
const el = document.createElement("div");
// classの生成
el.classList.add("test");
// テキストの生成
el.innerHTML = "テスト";テンプレートリテラルだと「“」で囲んだ中に直接HTMLコードを書けるので直感的ですよね。
JavaScriptで文字を結合する例
最後に簡単な例題で使い方を見てみましょう。
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<label for=""><input type="text" class="text" id="family"></label>
<label for=""><input type="text" class="text" id="first"></label>
</div>
<p>お名前：<span id="full"></span>様</p>
</body>
</html>
簡単な入力欄を作成しています。
入力欄それぞれに「性」「名」を入力するとフルネームを表示するようにしたいと思います。
const familyName = document.querySelector("#family");
const firstName = document.querySelector("#first");
const fullName = document.querySelector("#full");
firstName.addEventListener("keyup", keyup);
familyName.addEventListener("keyup", keyup);
function keyup(){
const familyNameValue = familyName.value;
const firstNameValue = firstName.value;
fullName.innerHTML = `${familyNameValue} ${firstNameValue}`;
}2つの入力欄の値をそれぞれ取得してテンプレートリテラルで結合しています。
「性」と「名」の間にスペースも付けていますね、テンプレートリテラルの方が足し算よりも分かりやすく書くことができました。
動作も問題ないですね、文字の結合はとても頻度の多いプログラムなので積極的に使っていきましょう。
JavaScriptのテンプレートリテラル関数
テンプレートリテラルは文字と変数、定数の結合に使うのがメインですが実は関数として動作させることもできるのです。
使用目的としては結合された文字列と変数、定数を分解して個別のデータを取得することです。
const firstName = '山田';
const lastName = '太郎';
function custom(str, ...val) {
console.log(str);
console.log(val);
}
custom`${firstName} ${lastName}さん`; // [" ","さん"]と["山田","太郎"]が出力される関数の実行は通常の書き方として「関数名(引数)」というものですが、テンプレートリテラル関数は「関数名`${firstName} ${lastName}さん」のような書き方をします。
また関数の宣言時に2つの引数を取り、第一引数が「文字列部分のみを抽出して配列にする」ことになり、第二引数が「文字列以外(${}の中身)を抽出して配列にする」ようになります。
これ自体を自分で使う機会は少ないかもしれませんがReactのStyled-Componentsというライブラリにはテンプレートリテラル関数が使われています。
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid #bf4f74;
color: #bf4f74;
margin: 0 1em;
padding: 0.25em 1em;
`;スタイルコンポーネントを宣言する時にstyledオブジェクトの関数を実行することで、「“」の中身のCSSプロパティを文字列として受け取っているわけです。
上記のコードだとbuttonタグを生成して「“」の中身のCSSを生成したbuttonタグに当てるようになります。