JavaScriptの勉強05-2【テンプレートリテラル】 - みっちぇのWebデザイン研究所

JavaScriptの基礎を学ぼうのコーナー。

当方、HTML、CSSしか経験ない（しかもどっちも独学）主婦です。

JavaScriptを学べば他の言語も覚えやすいと巷で見かけ、いろいろ手を出しかけたものの、きちんとJavaScriptを学んでから戻ってこようと思い、一から勉強しています。

勉強サイトはMDN Web Docs。
今回は文字列の続き、テンプレートリテラルについて学んでいこうと思います！

前回の記事はこちら

micche-labo.hatenablog.com

はじめに

このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！
玄人の方はどうぞ温かい目で見守っていてください。

なにか間違い・助言あれば、ご教授おねがいします。

勉強方法：Chromeのデベロッパーツールでコンソールを開いて実行。

今回勉強する内容
テンプレートリテラルとは
具体例
テンプレートリテラルにすると便利な点
- テンプレートリテラルを使用しなかった場合
- テンプレートリテラルを使用した場合
複雑な計算式の一例
改行について
まとめ

今回勉強する内容

JavaScriptの「文字列」から、「テンプレートリテラル」なるものを学びます。

勉強サイトのMDNはこちら developer.mozilla.org

テンプレートリテラルの具体的な内容と使い方をまとめます。

テンプレートリテラルとは

普通に文字列を書こうとすると

'文字列'のようなシングルクォートか、"文字列"のようなダブルクォートで囲ってやる必要があるが、

テンプレートリテラルは`文字列`のようなバッククォートで囲むことで認識される。

具体例

以下に記述具体例。

//通常の文字列
let text = '私の名前はみっちぇです。';
//テンプレートリテラルに変換
text = `私の名前はみっちぇです。`;

シングルクォートからバッククォートに変わっています。（見た目に分かりづらいけど！！！）

テンプレートリテラルにすると便利な点

MDNサイトによると、

文字列を連結したり、文字列内に式の結果を含めたりする場合、従来の文字列で書くのは面倒です。
テンプレートリテラルはこれを非常に簡単に行えます。
テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN

とある。

テンプレートリテラルを使用しなかった場合

実際の例は以下。

let name = 'みっちぇ';
let num = 20;
let num2 = 8;
text = '私の名前は "' + name + '"です。私の年齢は' + (num + num2) + 'です。';

//この結果は
//`私の名前は "みっちぇ"です。私の年齢は28です。'
//と表示される。

この例の~~めんどくさい点~~難点は、

文字を連結する際に毎回` `で囲む必要がある。
""と` `が隣り合っていて見づらい

といった点。

テンプレートリテラルを使用した場合

実際の例は以下。

let name = `みっちぇ`;
let num = 20;
let num2 = 8;
text = `私の名前は "${ name }"です。私の年齢は${ num + num2 }です。`;

//この結果は
//'私の名前は "みっちぇ"です。私の年齢は28です。'
//と表示される。

テンプレートリテラルを使用すると、変数名や計算式を${}（プレースホルダー）でくくるだけでつなげることができる。

つまり、`文字` + `文字` + `計算` + `文字` …などといった面倒で見づらい形式を取らずとも簡単に表現できるのが最大の利点である。

また、複雑な計算式を含めることもできる。
以下に具体例。

複雑な計算式の一例

例えば試験の合格・不合格で文章を変える時。

let yourScore = 20; //回答が正解した数
let maxScore = 100; //全部で100問

`あなたがテストで正解した問題数は ${ yourScore }/${ maxScore } (${ Math.round((yourScore/maxScore*100)) }%)でした。${ yourScore >= 40 ? 'あなたは合格です！' : '残念ですが、あなたは不合格です。' }`;

/*式の説明（私のような計算のできない文系向け）
1.最初の文で100問中20問正解、それが20%ですよという計算。
2.正解した数÷全問数×100で割合を求める。
3.Math.round()関数で小数点を切り捨て整数にする。（今回は割り切れる数なので必要ないが。全問数が100ではなく70とかの時に役立つ）

4.次の文で条件分岐。三項演算子を用いてtrueかfalseで文を変える。
5.yourScore >= 40　で、40点以上なら合格とする。
*/

//実行結果
'あなたがテストで正解した問題数は 20/100 (20%)でした。残念ですが、あなたは不合格です。'

//これは、20点なのでfalseとなり、:のあとに続く不合格の文章が表示される。

テンプレートリテラルを使用することで、

文章の中で関数を使用できる
三項演算子(if文のような条件式)を含められる

といった利点もある。

三項演算子について

developer.mozilla.org

Math.round()関数について

developer.mozilla.org

改行について

また、文字列の中で改行をする際には\nとする必要があったが、テンプレートリテラルでは必要ない。(ソースコードの改行をそのまま再現するため)

はじめの例で改行してみるとこんな感じ。

let name = `みっちぇ`;
let num = 20;
let num2 = 8;

text = `私の名前は "${ name }"です。
私の年齢は${ num + num2 }です。`;

//結果
'私の名前は "みっちぇ"です。\n私の年齢は28です。'

改行を含んでもエラーにならず、結果にはちゃんと\nが挟まっており、きちんと認識されていることがわかる。

単にコード内だけで見やすさのために改行するなら、

text = `私の名前は "${ name }"です。\
私の年齢は${ num + num2 }です。`;

//結果
'私の名前は "みっちぇ"です。私の年齢は28です。'

と、改行したい文の最後尾に\をつける。

まとめ

文字列を扱うには、テンプレートリテラル` `を使用した方が見やすく、扱いやすいということがわかった。

積極的に使用して慣れていこうと思う！

次回、文字列メソッドについて学ぶ！