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

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

 メニュー

mustache

【mustache】mustacheの記事まとめ

当ブログで紹介したmustacheの記事を一覧にまとめました。 そもそもmustacheに出会ったのは、Vue.jsの勉強時でした。知らないことでしたので、これを機に勉強しました。 mustacheの記事まとめ mustache入門:Ruby版 mustache入門:JavaScript版 参考サイト mus…

【mustache入門:JS版】データを別ファイル(JSONP)にして読み込む

レンダー部分でデータを指定しているところがあります。そこを外部ファイルとして読み込むように変更します。ここでは、データをJSONPファイルとして用意します。 作成するファイル JSONPでデータを読み込む まとめ 参考サイト 作成するファイル HTMLファイ…

【mustache入門:JS版】コードの整理

前回は、公式サイトのサンプルコードをそのまま利用してmustacheの動作確認をしました。今回は、気になる部分のコードを整理していきたいと思います。 作成するファイル テンプレートをJavaScriptに記述するように変更する 変更前 変更後 まとめ 作成するフ…

【mustache入門:JS版】mustacheの導入

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、JavaScriptでmustacheを勉強します。 公式サイト…

【mustache入門:Ruby版】テンプレートファイルの部品化(partials)

テンプレートファイルの中身が多くなるとコードの見通しが悪くなります。そこでテンプレートの一部分を部品化して、別ファイルに切り出す方法を見ていきます。 作成するファイル テンプレートの部品化 部品化の確認 まとめ 参考サイト 作成するファイル デー…

【mustache入門:Ruby版】複雑なデータ(セクション)

データがある限り一覧表示する方法を見ていきます。 作成するファイル 複雑なデータの埋め込みの確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイル:template.mustache データファイルとテンプレートファイルを以下のよ…

【mustache入門:Ruby版】真偽値(セクション)

セクションという塊を作り、真偽値の値によって表示を出し分けます。 作成するファイル 真偽値による表示の確認 真偽値に応じてテンプレートの表示を切り替える 真偽値による表示の切り替えの確認 まとめ 参考サイト 作成するファイル データファイル:data.y…

【mustache入門:Ruby版】区切り記号の変更

区切り記号を{{}}から他のものに変更する方法を見ていきます。 作成するファイル 区切り記号の変更 区切り記号変更の確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイル:template.mustache データファイルとテンプレー…

【mustache入門:Ruby版】HTMLタグの埋め込み

テンプレートにHTMLタグを埋め込む方法を見ていきます。少し注意が必要なので、そちらも合わせて書きます。 作成するファイル HTMLタグの埋め込み HTMLタグの埋め込みの確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイ…

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

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

【mustache入門:Ruby版】mustacheの導入

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、Rubyのmustacheパッケージを使って勉強します。 …