こんにちは。駆け出しコーダーのYUYA MATSUURAです。
フリーランスとして保険薬剤師業務で生活収入を得ながら、プログラミング言語の取得に励んでいます。
プログラミングのカテゴリー内の記事では、日々学んだ内容をアウトプットすることにより知識の定着を狙うために、
同じくプログラミングの勉強をしている方々に有意義であると思われる内容を記事に起こしていこうと思っています。
今回はJavaScriptの【基礎中の基礎】シリーズ４回目としまして、
JavaScriptにおけるテンプレートリテラル（テンプレート文字列）の記述方法を記事にしたいと思います。
テンプレートリテラルもES6以降にJavaScriptに実装された記述方法ですが、
従来の記述方法より断然見やすくなるかな？と思いますので、早めに身に付けておきましょう。
それでは、本文の方をどうぞ！
従来の書き方でコンソールを出力してみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テスト</title>
</head>
<body>
<script src="/js/main.js"></script>
</body>
</html>いつものように、コンソールを出力するだけの、テスト用のHTMLを準備します。
let name = "浜田";
let friend = "松本";
console.log(name + "と" + friend + "は友達です！" );コンソールには『浜田と松本は友達です！』出力されたと思います。
これが従来の書き方です。
若干、見難いので迷子になりそうですね。
テンプレートリテラルで書いてみよう！
さて、本題のテンプレートリテラルで書いてみましょう。
ルールは２つです。
①「 ` 」（バッククォーテーション）で囲むこと （「Shift」キー押しながら、「＠」で入力できるかと）
②変数などの式を入れる部分を 「 ${} 」 で囲む
実際に書き換えてみますね。
let name = "浜田";
let friend = "松本";
console.log(`${name}と${friend}は友達です！`);
出力結果は変わりません。
慣れるとこちらの書き方の方が見やすくて、直感的になります。
テンプレートリテラルの書き方に慣れていきましょう！
まとめ
実際に自分で手を動かしてみると、コードを書いてみると慣れてくると思います。
書き方としてはテンプレートリテラルの方が主流だと思いますので、
ぜひぜひアクティブに活用していきましょうね。
コメント