ES6 Template stringsの嬉しさ

ES6で追加されるTemlate stringsの嬉しさを書きます。

JavaScriptでDOMElementを追加する方法を考えます。
次のHTMLをbodyに追加してみましょう。

<div class="hoge">
    Hello world!
</div>

ビフォー

createElementを使う

var div = document.createElement('div')
div.classList.add('hoge')
div.appendChild(document.createTextNode('HelloWorld!'))

document.body.appendChild(div)

長くて書くのが大変です。
元のHTMLから、API呼び出しに置き換えるのが手間です。

insertAdjacentHTMLを使う

var div = "<div class="hoge">Hello world!</div>"

document.body.insertAdjacentHTML('afterend', div)

簡単に書けます。
改行できません。
追加するHTMLが複雑になったら、div文字列の定義を無限に右に伸ばすのでしょうか？
それとも+演算子を使って、改行ごとに結合しましょうか？

こんな感じで

var div = '<div class="hoge">' + 
    'Hello world!' + 
    '</div>'

jQueryを使う

var $div = $('<div>')
    .class('hoge')
    .append('Hello World!')

$('body')
    .append()

メソッドチェーンで書けます。
複雑なHTMLもメソッドをつなげて書けます。
元のHTMLから、メソッド呼び出しに置き換えるのは手間です。
また、修正する際に、元のHTMLをイメージするのが大変です。

アフター

const div = `
    <div class="hoge">
        Hello world!
    </div>
`

document.body.insertAdjacentHTML('afterend', div)

なんと！そこには、入れたかったHTMLが、そのままあったのです！！！

デザインを決める時に使ったHTMLをそのまま使えます。
修正時にHTMLのどの部分を置き換えればいいかイメージしやすいです。

与太話

ヒアドキュメントや逐語的文字列などの改行を含む文字列を表現できるプログラミング言語があります。一方、改行を含む文字列を持たないプログラミング言語は、HTMLやSQLなどの長い文字列をソースコード中に持つのが苦手です。改行とインデントを維持できません。人間が読みやすい形式を維持できません。

JavaやVB.NETでのソースコード中のSQL文字列を思い出してください。
うう、頭が・・・

人類はそれを解決するために、外部ファイルに定義したSQLを読み込ませたり、SQLを構築するメソッド集ライブラリを作ったり、ModelからSQLを自動生成したり・・・

そうじゃない！そのまま書きたいんだ！

ユーザーが入力した値を埋め込む場合は、SQLインジェクションやXSS対策が必要です。お気をつけください。