ツール一覧

💡 記事の下にエディタを用意しています。壊してもOK!

更新日: 2025年3月1日

JavaScriptのテンプレートリテラルの使い方

📌

結論

テンプレートリテラルで変数を文字列に埋め込める

バッククォート(\)で囲むと、${変数} で値を埋め込めます。
📝 実際のコードはこちら
const name = '太郎';
console.log(`こんにちは、${name}さん!`);

従来の書き方との比較

方法書き方
+ で結合'こんにちは、' + name + 'さん!'
テンプレートリテラル\こんにちは、${name}さん!\
テンプレートリテラルの方が見やすく、現代JSでは主流です。

まとめ

・バッククォート +
${}` で変数を埋め込める ・+による文字列結合より読みやすい

演習で試してみよう

テンプレートリテラルで挨拶文を作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫!

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

name変数(太郎)を使ってこんにちは、太郎さんとconsole.logで出力してください。

詰まったらヒント

バッククォートと${name}を使う

15pt

テンプレートリテラル

name変数(太郎)を使ってこんにちは、太郎さんとconsole.logで出力してください。

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説