APIを使ってGitHubのAPIからユーザー情報を取得しました。このセクションでは取得したデータをHTMLに整形して、アプリケーションにユーザー情報を表示してみましょう。HTMLを組み立てるHTML文字列の生成にはテンプレートリテラルを使います。テンプレートリテラルは文字列中の改行が可能なため、HTMLのインデントを表現できて見通しが良くなります。変数の埋め込みも簡単なため、HTMLのテンプレートに対して動的なデータをあてはめるのに適しています。次のコードではGitHubのユーザー情報から組み立てるHTMLのテンプレートを宣言しています。<dd>${userInfo.public_repos}</dd></dl>`;このテンプレートにuserInfoオブジェクトの値をあてはめると、次のようなHTML文字列になります。<dd>1</dd></dl>HTML文字列をDOMに追加する次に、生成したHTML文字列をDOMツリーに追加して表示します。動的にHTMLをセットするために、目印となる要素をindex.htmlに追加します。今回はresultというidを持ったdiv要素(以降div#resultと表記します)を配置します。</body></html>ここから、div#result要素の子要素としてHTML文字列を挿入することになります。document.getElementByIdメソッドを使い、id属性が設定された要素にアクセスします。div#result要素が取得できたら、先ほど生成したHTML文字列をinnerHTMLプロパティにセットします。view;JavaScriptによってHTML要素をDOMに追加する方法には、大きく分けて2つあります。1つは、今回のようにHTML文字列をElement#innerHTMLプロパティにセットする方法です。1つは、文字列ではなくElementオブジェクトを生成して手続き的にツリー構造を構築する方法です。後者はセキュリティ的に安全ですが、コードは少し冗長になります。今回はElement#innerHTMLプロパティを使いつつ、セキュリティのためのエスケープ処理を行います。HTML文字列をエスケープするElement#innerHTMLに文字列をセットすると、その文字列はHTMLとして解釈されます。GitHubのユーザー名に<記号や>記号が含まれていると、意図しない構造のHTMLになる可能性があります。これを回避するために、文字列をセットする前に、特定の記号を安全な表現に置換する必要があります。この処理を一般にHTMLのエスケープと呼びます。多くのViewライブラリは内部にエスケープ機構を持っていて、動的にHTMLを組み立てるときにはデフォルトでエスケープをしてくれます。エスケープ用のライブラリを利用するケースも多いでしょう。今回のように独自実装するのは特別なケースで、一般的にはライブラリが提供する機能を使うのがほとんどです。次のように、特殊な記号に対するエスケープ処理をescapeSpecialChars関数として宣言します。"&#039;");}このescapeSpecialChars関数を、HTML文字列の中でuserInfoから値を注入しているすべての箇所で行います。テンプレートリテラル中で挿入している部分すべてに関数を適用するのは手間ですし、メンテナンス性もよくありません。そこで、テンプレートリテラルをタグづけすることで、明示的にエスケープ用の関数を呼び出す必要がないようにします。タグづけされたテンプレートリテラルは、テンプレートによる値の埋め込みを関数の呼び出しとして扱えます。次のescapeHTML関数はテンプレートリテラルにタグづけするためのタグ関数です。タグ関数には、第一引数に文字列リテラルの配列、第二引数に埋め込まれる値の配列が与えられます。値が文字列型であればエスケープするようにしています。}escapeHTML関数はタグ関数なので、通常の()による呼び出しではなく、テンプレートリテラルに対してタグづけして使います。テンプレートリテラルのバッククォート記号の前に関数を書くと、関数がタグづけされます。view;これでHTML文字列の生成とエスケープができました。関数の中で呼び出します。ここまでで、index.jsとindex.htmlは次のようになっています。</body></html>アプリケーションを開いてボタンを押すと、次のようにユーザー情報が表示されます。このセクションのチェックリストテンプレートリテラルを使ってHTML文字列を組み立てたinnerHTMLプロパティを使ってHTML文字列をDOMに追加した[タグつきテンプレート関数][]を使ってHTML文字列をエスケープしたfetchUserInfo関数を呼び出し、HTMLにユーザー情報が表示されることを確認した。