pug（旧：Jade）を使い倒して時短マークアップしよう！
- 公開日:
- メンテナンス日:
広告
広告
FAQ
- Pugでの連想配列（オブジェクト）の書き方は？
- PugではJavaScriptの記法がそのまま使えます。
- var menu = { key: 'value' }のように変数を宣言し、each val, key in menuでループ処理するのが一般的です。具体的な 連想配列のループ処理パターン を本記事で解説しています。
- Pugで function（関数）や Mixin を使い分ける方法は？
- HTML構造の再利用なら Mixin、ロジックの計算なら function が適しています。当サイトでは、 Mixinの具体的な活用例 と functionによる条件分岐 の両方をソースコード付きで紹介しています。プロジェクトの複雑さに応じて使い分けてください。
- Pugで for / if / each などの制御構文は使えますか？
- はい、すべて使用可能です。特に each文 は配列や連想配列を扱う際に非常に強力です。インデントの深さがそのまま階層構造になるため、 基本のループ・分岐の書き方 を参考に、正確なインデントで記述してください。
- GulpやWebpackを使わずにPugを導入することは可能ですか？
- 可能です。 pug-cli を利用すれば、npmスクリプトだけで手軽にコンパイル環境を構築できます。複雑なビルドツールを導入したくない方は、 pug-cliでの導入手順 から読み進めてみてください。
広告
