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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

mustache

【mustache入門:JS版】mustache.jsの再入門

以前、mustacheの記事を書きましたが、勉強し直したので改めて記事にします。今回は、HTMLとJavaScriptの分離に焦点を当てて書きます。 HTMLを挿入する例 HTMLのテンプレート化 HTMLコードの分離 まとめ 参考 HTMLを挿入する例 id属性がresultである要素の子…

【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パッケージを使って勉強します。 …

» HTML入門のまとめはこちらです。