JavaScript内でdocument.writeを使わずにHTMLを書く方法とは【メンターが回答】

「JavaScriptコード内でdocument.writeなど使わずにHTMLを書く方法とは」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptコード内でdocument.writeなど使わずにHTMLを書く方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

JavaScript内でdocument.writeを使用せずにHTMLを書く方法は何かないでしょうか?

タブインデントや改行などを使用した本来のHTMLに近い形で、JSONで受け取った値を扱いたいので、方法があれば教えてもらえればと思います。

 

自分で試したこと

AngularJSを使ったりもしましたが、HTML側で出力する仕様だったので、結果的に意図した動きにはなりませんでした。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

テンプレートリテラルを使用すると綺麗にHTMLを書くことができます。テンプレートリテラルとは、ES6 で新しく使えるようになった構文のひとつです。文字列の引用符にバッククォート「`」を使用することで、複数行のテキストをそのまま記載することができます。

テンプレートリテラルでは、${ }を使って式を入れることもできます。これを使うことで繰り返し処理を盛り込むこともできます。

<script>
var json = {
  a: {
    title: "title A",
    date: "2016/1/1",
    body: "Body A"
  },
  b: {
    title: "title B",
    date: "2017/1/1",
    body: "Body B"
  },
  c: {
    title: "title C",
    date: "2018/1/1",
    body: "BodyC"
  }
};

var html = `
${Object.keys(json).map(function(i) {
  return `  <article>
    <h1>${json[i].title}</h1>
    <h2>${json[i].date}</h2>
    <p>${json[i].body}</p>
  </article>`;
}).join("\n")}
`;

document.querySelector("main").innerHTML = html;
</script>

以上、JavaScriptコード内でdocument.writeなど使わずにHTMLを書く方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptコード内でdocument.writeなど使わずにHTMLを書く方法について解説したよ。

大石ゆかり

テンプレートリテラルというのは何でしょうか?

田島悠介

プログラム内でHTMLなどを書く時にそのまま書けたりする構文なんだ。他の言語でも同じような構文があるよ。

大石ゆかり

わかりました。ありがとうございます!

 

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。