JavaScript内に<HTML>タグの要素を結構複雑に書かなきゃいけない場面が多々あると思います。コードを見やすくスッキリさせて、可読性の良い、ケアレスミスの少ないプログラムを書いてみましょう。
ホントダメな例、やったらNGなコード
var htmlTags = '<h1>' + a + '</h1><div><p class="godIsDead">' + b + '</p></div>';もはやHMTLの構造が頭に浮かばない＆やっつけ仕事すぎて改修する気も起きないコードです。
これはまだいい方ですが、中にはfloatかかってたり、positionかかってたりもうわけわからんことになっている場合があります。これはやっちゃだめです。
var htmlTags = '<h1>' +
a +
'</h1><div><p class="godIsDead">' +
b +
'</p></div>';上に挙げた例は極端ではありますが、たまーにやるエンジニアがいると絶望しかありません。
おそらく別のサイトで、長い文章を「+」と改行で読みやすくした応用のつもりでしょうが、目も当てられません。最低限、
var htmlTags = '<h1>' + a + '</h1>'+
'<div><p class="godIsDead">' + b + '</p></div>';これくらいならまだ読みやすくなりました。
しかし、もっともっとひどいと……
var htmlTags = '<h1>' + a + '</h1>';
htmlTags += '<div><p>' + b + '<p></div>';
htmlTags += '<div>' + c + '</div>';
htmlTags += '<p>' + d + '</p>';
htmlTags += '<p>' + e + '</p>';
htmlTags += '<p>' + f + '</p>';メンテが大変そう、ぱっと見からモチベーションが下がる……※個人の感想です。
まだ、良い例（かな）
まだ読みやすいかなという例は「\（バックスラッシュ）」を利用して改行をエスケープする例です。
var test = '\
<h1>' + a + '</h1>\
<div>\
<h2>' + c + '</h2>\
<p>' + b + '</p>\
</div>';もはやオワコンのIEを無視してしまってスッキリ解決
ここで伝家の宝刀「テンプレートリテラル」に登場してもらいましょう。びっくりするくらい綺麗に書けます。後で注意事項として挙げますがこの記法、IEで全滅なんですよ。エラーになって動きません。
var tmprate = `
<h1>a<h1>
<div class="wrapper">
<h2 class="hedding">b</h2>
<p class="description">c</p>
</div>
<p>c</p>
`;めっちゃ見やすくなりました。HTMLファイルに書いてるのではないかと思っちゃうぐらい綺麗ですね。きちんと階層構造が保持され、かつ、視認性が抜群に良いです。
でも、変数使えないんでしょう……？という方に朗報です。変数は問題なく使えます。上の書き方では駄目ですが、ちょっと気を付けることで変数入りのソースが吐けるようになります。
let name = 'ハーデス';
let cost = 100000;
let mainTxt = 'GODは8192回に一度';
let mainDescription = '厳しい戦いになりそうだ';
var tmprate = `
<h1>${name}<h1>
<div class="wrapper">
<h2 class="hedding">${mainTxt}</h2>
<p class="description">${mainDescription}c</p>
</div>
<p>$(cost)</p>
`;
console.log(tmprate);これ、実行できるんですよ。ちゃんと変数も入った状態で出力できます。
この「`（バッククォーテーション、「＠」の上にあります）」で囲むことで実現できる、テンプレートリテラルですが、先ほども言いましたがIEではつかえません。
ただし、IEは近いうちに公式にEdgeに移行してしまうことを明言しているのであんまり気にしなくて良いと思います。
余談ですが、Dart言語の「$」の使い方と遠からずな関係ですね。Dartでは「$name」ですが、JavaScriptのテンプレートリテラルでは「${name}」になります。
気になる方はDart言語での「$」ドルマークの扱い方【Flutter】の記事も見てみてくださいね。
React Nativeオワコン論争2022の記事も書きましたので興味ある方は是非。
