元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【mustache入門:Ruby版】データの埋め込み

mustacheの基本的な記述を見ていきます。まず、データファイルとテンプレートファイルを用意します。データファイルにデータを、テンプレートファイルにテンプレートを記述します。mustacheコマンドでデータがテンプレートに埋め込まれることを確認します。

作成するファイル

  • データファイル:data.yml
  • テンプレートファイル:template.mustache

データファイルとテンプレートファイルを以下のように作成します。

#data.yml(データの記述)
name: hoge
id: 1

YAMLでは、#コメントアウトします。

{{! template.mustache(テンプレートの記述) }}
- {{name}}
- {{id}}

テンプレートファイルでは、{{! }}コメントアウトします。

データの埋め込みの確認

mustacheコマンドを実行して、データがテンプレートに埋め込まれるかを確認します。

mustache data.yml template.mustache
- hoge
- 1

コマンドを実行すると{{name}}がhoge、{{id}}が1に置き換わっていることが確認できると思います。

まとめ

今回、ご紹介した書き方が基本形です。まずは、基本形をしっかりと理解します。

参考サイト