JavaScriptテンプレートの基本

テンプレートリテラルを使用する方法: テンプレートリテラルは、バッククォート（）で囲まれたテキストです。テンプレートリテラル内では、変数や式を${}`で囲んで埋め込むことができます。例えば、次のコードは、変数nameの値を埋め込んだメッセージを生成します。

const name = "John";
const message = `こんにちは、${name}さん！`;
console.log(message);

テンプレートエンジンを使用する方法: JavaScriptには、テンプレートエンジンと呼ばれるライブラリやフレームワークがあります。テンプレートエンジンを使用すると、より高度なテンプレート処理や制御構造を実現できます。例えば、以下はHandlebars.jsという人気のあるテンプレートエンジンを使用したコード例です。

const template = Handlebars.compile("こんにちは、{{name}}さん！");
const data = { name: "John" };
const message = template(data);
console.log(message);

ウェブサイトのテンプレートを作成する方法: JavaScriptを使用して、ウェブサイトのテンプレートを作成することもできます。これにより、共通のレイアウトや要素を持つ複数のページを効率的に生成できます。以下は、簡単なウェブサイトのテンプレート作成の例です。

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>{{title}}</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">記事</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
  <main>
    <article>
      <h2>{{articleTitle}}</h2>
      <p>{{articleContent}}</p>
    </article>
  </main>
  <footer>
    <p>© 2024 サンプルウェブサイト</p>
  </footer>
</body>
</html>

上記の例では、{{}}内に変数やデータを埋め込むことができます。これにより、異なるタイトルや記事コンテンツを持つ複数のページを生成できます。

このように、JavaScriptのテンプレートを使用すると、動的なコンテンツの生成やウェブサイトのテンプレート作成が簡単に行えます。さまざまな目的に応じて、適切なテンプレート手法を選択してください。