文字列の連結はもう使わなくてよいですか

変数を混ぜるならテンプレートリテラルのほうが読みやすいので、そちらを既定にして構いません。連結が悪いわけではなく、値が 1 つだけの短い場面では + のままでも十分です。1 つの式に + が 3 回以上出てきたら書き換えの合図だと考えてください。

埋め込みの中に長い式を書いてもよいですか

動きますが読みにくくなります。計算は手前の行で変数に受けておき、埋め込みには変数名だけを書くのがおすすめです。テンプレートリテラルは文章の形を見せるための道具なので、中に処理を詰め込むと利点が失われます。

画面に [object Object] と出るのはなぜですか

オブジェクトをそのまま埋め込んだためです。オブジェクトを文字列にすると、既定ではこの表示になります。work.title のように必要なプロパティを取り出すか、中身を確認したいだけなら JSON.stringify(work) を使ってください。

テンプレートリテラル｜コードで実践

このレッスンで分かること

バッククォートで囲んだ文字列の中に、変数や式をそのまま埋め込めます

ソースコードに書いた改行が、そのまま文字列の改行になります

プラスと引用符で目がすべる

つなぐ値が 2 つくらいなら + の連結で足りますが、数が増えると引用符とプラス記号が入り混じって読めなくなります。

JavaScript

const workTitle = "プロフィールサイト";
const year = 2026;
const line = "制作 " + workTitle + "（" + year + "年）";

この書き方には弱点が 2 つあります。半角スペースを引用符の内側に入れ忘れて単語がくっついてしまうこと、そして完成した文章の形がコードから想像しにくいことです。

テンプレートリテラル を使うと、この 2 つが同時に解決します。

JavaScript

const line = `制作 ${workTitle}（${year}年）`;

囲む記号をバッククォートに変え、埋め込みたい場所にドル記号と波括弧を書くだけです。完成する文章がそのまま見えているので、スペースの位置も一目で分かります。

目印バッククォートは引用符とは別の記号です。キーボードでは Shift と @ の組み合わせなどで入力します。

変わる場所だけ波括弧で示す

波括弧の中には、変数だけでなく式も書けます。計算も関数呼び出しも入ります。

JavaScript

const stock = 12;
console.log(`残り ${stock} 個`);
console.log(`来月は ${stock + 3} 個の予定です`);

ただし埋め込みの中に長い処理を書くと読みにくくなります。計算は手前で変数に受けておき、埋め込みには名前だけを書くほうが読みやすくなります。

波括弧の中の値は、String() を通したときと同じ形で文字列になります。数値でも真偽値でも、そのまま書けます。

埋め込む値	結果	補足
`12`	`12`	数値はそのままの見た目
`true`	`true`	真偽値も文字になる
`null`	`null`	エラーにはならない
`{ a: 1 }`	`[object Object]`	中身は見えない

画面に [object Object] と出たら、オブジェクトを直接埋め込んだサインです。必要な項目を取り出してから埋め込みます。null や undefined が "null" "undefined" という文字として画面に出てしまう事故もよく起きるので、値が無いかもしれない場所は埋め込む前に確かめてください。

シングルクォートとダブルクォートに機能の差はありません。変数を埋め込むときだけ、バッククォートに切り替えます。

改行をそのまま書く

もう 1 つの特徴が、改行をコードの見た目どおりに書ける点です。通常の文字列では、改行はバックスラッシュと n の 2 文字で表します。

JavaScript

const card1 = "1 行目\n2 行目";
const card2 = `1 行目
2 行目`;

どちらも同じ文字列になります。行数が増えるほど、後者のほうが完成形を想像しやすくなります。

注意点として、インデントもそのまま文字列に含まれます。関数の中で字下げして書くと、字下げ分の空白が 2 行目以降の先頭に入ってしまいます。意図しない空白を避けたいときは、行頭を字下げせずに書くか、改行をバックスラッシュと n で書きます。

よくある間違い

多いのは、囲む記号と波括弧のどちらかを間違えるケースです。

JavaScript

const stock = 12;
console.log("残り ${stock} 個"); // ダブルクォートだと記法が文字のまま出る
console.log(`残り $stock 個`);   // 波括弧が無いと埋め込みにならない

1 行目はバッククォートに直します。2 行目はドル記号だけでは埋め込みになりません。必ず波括弧で変数名を囲みます。どちらも画面には書いたとおりの文字がそのまま出るので、表示を見れば見分けられます。

関数名は introduceCard、引数は name (文字列) と title (文字列) と workCount (数値) の 3 つ
テンプレートリテラルで組み立てる。+ による連結は使わない
戻り値は名前と肩書きと 作品 N 件 を改行でつないだ 1 つの文字列

このレッスンで分かること

バッククォートで囲んだ文字列の中に、変数や式をそのまま埋め込めます

ソースコードに書いた改行が、そのまま文字列の改行になります

プラスと引用符で目がすべる

つなぐ値が 2 つくらいなら + の連結で足りますが、数が増えると引用符とプラス記号が入り混じって読めなくなります。

JavaScript

const workTitle = "プロフィールサイト";
const year = 2026;
const line = "制作 " + workTitle + "（" + year + "年）";

テンプレートリテラル を使うと、この 2 つが同時に解決します。

JavaScript

const line = `制作 ${workTitle}（${year}年）`;

目印バッククォートは引用符とは別の記号です。キーボードでは Shift と @ の組み合わせなどで入力します。

変わる場所だけ波括弧で示す

波括弧の中には、変数だけでなく式も書けます。計算も関数呼び出しも入ります。

JavaScript

const stock = 12;
console.log(`残り ${stock} 個`);
console.log(`来月は ${stock + 3} 個の予定です`);

波括弧の中の値は、String() を通したときと同じ形で文字列になります。数値でも真偽値でも、そのまま書けます。

埋め込む値	結果	補足
`12`	`12`	数値はそのままの見た目
`true`	`true`	真偽値も文字になる
`null`	`null`	エラーにはならない
`{ a: 1 }`	`[object Object]`	中身は見えない

シングルクォートとダブルクォートに機能の差はありません。変数を埋め込むときだけ、バッククォートに切り替えます。

改行をそのまま書く

もう 1 つの特徴が、改行をコードの見た目どおりに書ける点です。通常の文字列では、改行はバックスラッシュと n の 2 文字で表します。

JavaScript

const card1 = "1 行目\n2 行目";
const card2 = `1 行目
2 行目`;

どちらも同じ文字列になります。行数が増えるほど、後者のほうが完成形を想像しやすくなります。

よくある間違い

多いのは、囲む記号と波括弧のどちらかを間違えるケースです。

JavaScript

const stock = 12;
console.log("残り ${stock} 個"); // ダブルクォートだと記法が文字のまま出る
console.log(`残り $stock 個`);   // 波括弧が無いと埋め込みにならない

関数名は introduceCard、引数は name (文字列) と title (文字列) と workCount (数値) の 3 つ
テンプレートリテラルで組み立てる。+ による連結は使わない
戻り値は名前と肩書きと 作品 N 件 を改行でつないだ 1 つの文字列

テンプレートリテラル

プラスと引用符で目がすべる

変わる場所だけ波括弧で示す

改行をそのまま書く

よくある間違い

要件

入出力例

ヒント

メモ

テンプレートリテラル

プラスと引用符で目がすべる

変わる場所だけ波括弧で示す

改行をそのまま書く

よくある間違い

要件

入出力例

ヒント

メモ