Handlebars

# インストール

使用しているプログラミング言語と環境に応じて、Handlebarsをインストールするにはさまざまな方法があります。

Handlebarsのリファレンス実装はJavaScriptで記述されています。 通常はnpmまたはyarnを使用してインストールされます。

npm install handlebars

または

yarn add handlebars

その後、Handlebarsをインポートして使用できます

import Handlebars from "handlebars";
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

CommonJS環境でHandlebarsを使用している場合は、requireを使用できます

const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

ヒント

npmまたはyarnを使用するのが、Handlebarsを使用する際の推奨方法です。 WebブラウザでHandlebarsテンプレートを使用する場合は、Webpack、Browserify、Parcelなどのビルドエンジンを使用することをお勧めします。

統合ページには、テンプレートを自動的にプリコンパイルしたり、Handlebarsを他の方法で使用したりできる、これらのローダーのプラグインのリストが含まれています。

詳細はこちら：統合

# npmパッケージ内のブラウザビルド

ブラウザビルドは、node_modules/handlebars/dist/ディレクトリにあります。 これらをブラウザからアクセスできるようにする方法は、使用しているビルドシステムによって異なりますが、ファイルをアクセス可能な場所にコピーするだけで済む場合があります。

これは、プリコンパイラを使用する場合に推奨されるインストール方法です。プリコンパイルされたテンプレートが常に同じバージョンのランタイムに対して実行されることが保証されるためです。

# Handlebarsのダウンロード

以下のダウンロードは、コミュニティへの便宜として提供されています。 これらは本番環境での使用を意図したものではありませんが、ビルドエンジンをセットアップしなくてもすぐに使い始めることができます。

# 最新リリース（バージョン4.7.8）

Handlebars 4.7.8（コンパイラ+ランタイム） ... 縮小版 ...

ブラウザでテンプレートをコンパイルする場合は、このバージョンをクイックスタートとして使用してください。

Handlebars 4.7.8（ランタイムのみ） ... 縮小版 ...

ブラウザでプリコンパイルされたテンプレートを使用する場合は、このバージョンを使用してください。 このバージョンにはコンパイラは含まれていません。

# 非リリースビルド

HandlebarsのすべてのリリースバージョンとCIビルドは、S3のビルドページ... (新しいウィンドウが開きます)からダウンロードできます。

最新の合格マスタービルドの名前はhandlebars-latest.jsで、マスターの合格SHAごとにhandlebars-gitSHA.jsファイルが作成されます。 これらはすべてCIに合格しますが、タグ付きリリースのいずれかを使用することをお勧めします。

**注**：ビルドページはコミュニティへの便宜として提供されていますが、本番環境でHandlebarsをホストするために使用しないでください。

# CDN

Handlebarsは、多くの無料CDNでもホストされています。

# RubyGems

公式のHandlebarsビルドは、https://rubygems.org/gems/handlebars-source... (新しいウィンドウが開きます)から入手できます。

# Bower、Component、Composer、jspm

Handlebarsは、次のような他のパッケージマネージャーを使用して有効にすることもできます。

  • Bower（非推奨）
  • Component
  • Composer
  • jspm

詳細は、https://github.com/components/handlebars.js... (新しいウィンドウが開きます)を参照してください。

# 使用方法

テンプレートを<script>タグに含めることで、ブラウザに配信できます。

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

常にテンプレートにscriptタグを使用してください

この方法を使用する場合は、テンプレートをscriptタグで囲む必要があります。 そうしないと、ブラウザがテンプレートの一部を削除または変更する可能性があります。 例については、「テーブル内の予期しないマークアップ」... (新しいウィンドウが開きます)を参照してください。

Handlebars.compileを使用して、JavaScriptでテンプレートをコンパイルします

var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

コンテキストを使用してテンプレートを実行することにより、Handlebarsテンプレートを評価した結果のHTMLを取得します。

var context = { title: "My New Post", body: "This is my first post!" };
var html = template(context);

結果は次のようになります

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

# テンプレートのプリコンパイル

前の例では、コンパイラとランタイムバージョンのHandlebarsを読み込みました。 テンプレートを事前にコンパイルし、プリコンパイルされたバージョンをWebサイトに含める方がはるかに効率的です。 より小さなランタイムを含めることができ、ブラウザはテンプレートを実行する前にコンパイルする必要がありません。

詳細はこちら：プリコンパイル

# Bower（非推奨）

警告

Bowerは非推奨です (新しいウィンドウが開きます)

HandlebarsのBowerバージョンは、後方互換性のために（現時点では）まだ公開されています。ただし、新しいプロジェクトを設定する場合、Bowerは使用しないでください。

# 他のプログラミング言語

Handlebarsの実装は、多くのプログラミング言語で利用できます。

最終更新日: 2023年8月5日 午後10時38分32秒

テンプレートのプリコンパイル →