パグでより良いAngularテンプレートを作成する方法

開発者として、Angularアプリがどのように構成されているか、およびAngularCLIがそれらを構成するために利用できる多くのオプションに感謝しています。 コンポーネントは、ビューを構造化し、コードの再利用、補間、データバインディング、およびビューの他のビジネスロジックを容易にするための驚くべき手段を提供します。

Angular CLIは、Sass / SCSS、LESS、Stylusなどのコンポーネントスタイリング用の複数の組み込みCSSプリプロセッサオプションをサポートしています。 ただし、テンプレートに関しては、HTMLとSVGの2つのオプションしか使用できません。 これは、Pug、Slim、HAMLなどのより効率的なオプションが多数存在するにもかかわらずです。

この記事では、Angular開発者として、Pugを使用してより効率的に優れたテンプレートを作成する方法について説明します。 AngularアプリにPugをインストールし、HTMLを使用してPugを使用する既存のアプリを移行する方法を学習します。

Pug（以前はJadeと呼ばれていました）はテンプレートエンジンです。 これは、指定されたデータを統合するテンプレートからドキュメントを生成するツールであることを意味します。 この場合、Pugは、データを取り込んでHTMLドキュメントをレンダリングする関数にコンパイルされるテンプレートを作成するために使用されます。

テンプレートを作成するためのより合理化された方法を提供することに加えて、コードの再利用を容易にし、JavaScriptコードの埋め込みを可能にし、イテレーター、条件などを提供するミックスインのようなテンプレートの作成を超えた多くの価値ある機能を提供します。

HTMLは多くの人に広く使用されており、テンプレートで適切に機能しますが、DRYではなく、特に大きなコンポーネントテンプレートでは、読み取り、書き込み、および保守がかなり困難になる可能性があります。 そこでPugが登場します。Pugを使用すると、テンプレートの書き込みと読み取りが簡単になり、追加のボーナスとしてテンプレートの機能を拡張できます。 この記事の残りの部分では、AngularコンポーネントテンプレートでPugを使用する方法について説明します。

パグを使うべき理由

HTMLは基本的に反復的です。 ほとんどの要素では、DRYではない開始タグと終了タグが必要です。 HTMLでもっと書く必要があるだけでなく、もっと読む必要もあります。 Pugを使用すると、開閉アングルブラケットや終了タグ​​はありません。 したがって、コードの記述と読み取りが大幅に少なくなります。

たとえば、HTMLテーブルは次のとおりです。

 <table> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> <th>Currency</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>37.59 million</td> <td>Canadian Dollar</td> </tr> <tr> <td>South Africa</td> <td>Cape Town, Pretoria, Bloemfontein</td> <td>57.78 million</td> <td>South African Rand</td> </tr> <tr> <td>United Kingdom</td> <td>London</td> <td>66.65 million</td> <td>Pound Sterling</td> </tr> </tbody> </table>

これは、同じテーブルがPugでどのように見えるかです。

 table thead tr th Country th Capital(s) th Population th Currency tbody tr td Canada td Ottawa td 37.59 million td Canadian Dollar tr td South Africa td Cape Town, Pretoria, Bloemfontein td 57.78 million td South African Rand tr td United Kingdom td London td 66.65 million td Pound Sterling

表の2つのバージョンを比較すると、PugはHTMLよりもはるかにきれいに見え、コードの可読性が優れています。 この小さな例では無視できますが、Pugテーブルに書き込む行はHTMLテーブルよりも7行少なくなります。 プロジェクト用に時間の経過とともにより多くのテンプレートを作成すると、Pugを使用して累積的に書き込むコードが少なくなります。

Angularテンプレート言語によって提供される機能を超えて、Pugはテンプレートで達成できることを拡張します。 機能（ミックスイン、テキストと属性の補間、条件、イテレーターなど）を使用すると、個別のコンポーネント全体を記述したり、依存関係をインポートしたり、要件を満たすようにディレクティブを設定したりするのとは対照的に、Pugを使用して問題をより簡単に解決できます。

パグのいくつかの機能

Pugはさまざまな機能を提供しますが、使用できる機能は、Pugをプロジェクトに統合する方法によって異なります。 ここにあなたが役に立つと思うかもしれないいくつかの機能があります。

1. includeを使用してテンプレートに外部Pugファイルを追加します。
   
   たとえば、より簡潔なテンプレートが必要であるが、追加のコンポーネントを作成する必要性を感じていないとします。 テンプレートからセクションを取り出して部分的なテンプレートに入れてから、元のテンプレートに戻すことができます。
   
   たとえば、このホームページコンポーネントでは、「About」セクションと「Services」セクションは外部ファイルにあり、ホームページコンポーネントに含まれています。
   

    //- home.component.pug h1 Leone and Sons h2 Photography Studio include partials/about.partial.pug include partials/services.partial.pug

    //- about.partial.pug h2 About our business p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    //- services.partial.pug h2 Services we offer P Our services include: ul li Headshots li Corporate Event Photography

   

2. ミックスインを使用したコードブロックの再利用。
   
   たとえば、コードブロックを再利用していくつかのボタンを作成したいとします。 ミックスインを使用して、そのコードブロックを再利用します。
   

    mixin menu-button(text, action) button.btn.btn-sm.m-1('(click)'=action)&attributes(attributes)= text +menu-button('Save', 'saveItem()')(class="btn-outline-success") +menu-button('Update', 'updateItem()')(class="btn-outline-primary") +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger") 

   

3. 条件付きを使用すると、条件が満たされているかどうかに基づいてコードブロックとコメントを簡単に表示できます。
   

    - var day = (new Date()).getDay() if day == 0 p We're closed on Sundays else if day == 6 p We're open from 9AM to 1PM else p We're open from 9AM to 5PM

   

4. eachやwhileなどのイテレータは、反復機能を提供します。
   

    ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'

   

   

5. 上記の例に示されているように、インラインJavaScriptはPugテンプレートで記述できます。
6. 補間が可能であり、タグと属性に拡張されます。
   

    - var name = 'Charles' p Hi! I'm #{name}. p I'm a #[strong web developer]. a(href='https://about.me/${name}') Get to Know Me

   

7. フィルタを使用すると、Pugテンプレートで他の言語を使用できます。
   
   たとえば、JSTransformer Markdownモジュールをインストールした後、PugテンプレートでMarkdownを使用できます。
   

    :markdown-it # Charles the Web Developer ![Image of Charles](https://charles.com/profile.png) ## About Charles has been a web developer for 20 years at **Charles and Co Consulting.** 

   

これらは、Pugが提供する機能のほんの一部です。 Pugのドキュメントには、より広範な機能のリストがあります。

Angularアプリでパグを使用する方法

Angular CLI 6以降を使用する新規アプリと既存アプリの両方について、 ng-cli-pug-loaderをインストールする必要があります。 これは、Pugテンプレート用のAngularCLIローダーです。

新しいコンポーネントとプロジェクトの場合

1. ng-cli-pug-loaderをインストールします。
   

    ng add ng-cli-pug-loader

2. 好みに応じてコンポーネントを生成します。
   
   たとえば、ホームページコンポーネントを生成しているとしましょう。
   

    ng gc home --style css -m app

3. HTMLファイル拡張子.htmlをPug拡張子.pugに変更します。 最初に生成されたファイルにはHTMLが含まれているため、その内容を削除して、代わりにPugで新たに開始することを選択できます。 ただし、HTMLは引き続きPugテンプレートで機能するため、そのままにしておくことができます。
4. コンポーネントデコレータでテンプレートの拡張子を.pugに変更します。
   

    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css'] })

既存のコンポーネントとプロジェクトの場合

1. ng-cli-pug-loaderをインストールします。
   

    ng add ng-cli-pug-loader

2. html2pugCLIツールをインストールします。 このツールは、HTMLテンプレートをPugに変換するのに役立ちます。
   

    npm install -g html2pug

3. HTMLファイルをPugに変換するには、次のコマンドを実行します。
   

    html2pug -f -c < [HTML file path] > [Pug file path]

   HTMLテンプレートを使用しており、完全なHTMLファイルではないため、 -fを渡して、生成されたテンプレートをhtmlおよびbodyタグでラップしてはならないことをhtml2pugに示す必要があります。 -cフラグにより​​、 html2pugは、変換中に要素の属性をコンマで区切る必要があることを認識できます。 これが重要である理由を以下で説明します。
4. 「新しいコンポーネントとプロジェクトの場合」セクションの説明に従って、コンポーネントデコレータでテンプレートの拡張子を.pugに変更します。
5. サーバーを実行して、Pugテンプレートのレンダリング方法に問題がないことを確認します。
   
   問題がある場合は、HTMLテンプレートを参照として使用して、問題の原因を特定してください。 これは、まれではありますが、インデントの問題または引用符で囲まれていない属性である場合があります。 Pugテンプレートのレンダリング方法に満足したら、HTMLファイルを削除します。

HTMLからパグテンプレートに移行する際の考慮事項

ng-cli-pug-loaderでインラインPugテンプレートを使用することはできません。 これはPugファイルのみをレンダリングし、コンポーネントデコレータで定義されたインラインテンプレートはレンダリングしません。 したがって、既存のテンプレートはすべて外部ファイルである必要があります。 インラインHTMLテンプレートがある場合は、それらの外部HTMLファイルを作成し、 html2pugを使用してそれらをPugに変換します。

変換したら、バインディングおよび属性ディレクティブを使用するテンプレートを修正する必要がある場合があります。 ng-cli-pug-loaderでは、Angularのバインドされた属性名を一重引用符または二重引用符で囲むか、コンマで区切る必要があります。 これを実行する最も簡単な方法は、 html2pugで-cフラグを使用することです。 ただし、これは複数の属性を持つ要素の問題のみを修正します。 単一の属性を持つ要素の場合は、引用符を使用してください。

ここで説明するセットアップの多くは、タスクランナー、スクリプト、または大規模な変換用のカスタムAngular回路図面を使用して自動化できます（作成することを選択した場合）。 テンプレートがいくつかあり、インクリメンタル変換を実行する場合は、一度に1つのファイルのみを変換することをお勧めします。

パグテンプレートのAngularテンプレート言語構文

ほとんどの場合、Angularテンプレート言語の構文はPugテンプレートで変更されませんが、バインディングと一部のディレクティブ（上記のとおり）に関しては、 () 、 [] 、および[()]以降、引用符とコンマを使用する必要があります。 [()] Pugテンプレートのコンパイルを妨害します。 次にいくつかの例を示します。

 //- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding. img([src]='itemImageUrl', [style.border]='imageBorder') //- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute. button('(click)'='onSave($event)') Save

ngClass 、 ngStyle 、ngModelなどの属性ディレクティブは引用符でngModel必要があります。 *ngIf 、 *ngFor 、 *ngSwitchCase ngSwitchCase、* ngSwitchDefaultなどの構造ディレクティブも、引用符で*ngSwitchDefaultか、コンマで使用する必要があります。 テンプレート参照変数（例： #var ）は、Pugテンプレートのコンパイルに干渉しないため、引用符やコンマは必要ありません。 {{ }}で囲まれたテンプレート式は影響を受けません。

AngularテンプレートでPugを使用することの欠点とトレードオフ

Pugは便利でワークフローを改善しますが、Pugを使用することにはいくつかの欠点があり、 ng-cli-pug-loaderを使用するときに考慮する必要があるいくつかのトレードオフがあります。

ファイルは、 .partial.pugまたは.include.pugで終わるか、 mixins.pugと呼ばれない限り、 includeを使用してテンプレートに含めることはできません。 これに加えて、テンプレートの継承はng-cli-pug-loaderで機能しないため、これが便利なPug機能であるにもかかわらず、ブロックの使用、Pugコードの追加、および追加はできません。

Angular CLIはHTMLテンプレートを使用したコンポーネントのみを生成するため、パグファイルは手動で作成する必要があります。 生成されたHTMLファイルを削除してPugファイルを作成するか、HTMLファイル拡張子を変更してから、コンポーネントデコレータのtemplateUrlを変更する必要があります。 これは、スクリプト、回路図、またはタスクランナーを使用して自動化できますが、ソリューションを実装する必要があります。

大規模な既存のAngularプロジェクトでは、HTMLテンプレートからPugテンプレートへの切り替えには、多くの作業と複雑さが伴う場合があります。 切り替えを行うと、ファイルごとに修正するか、カスタムツールを使用して自動的に修正する必要がある多くの壊れたコードが発生します。 要素内のバインディングと一部のAngularディレクティブは、引用符で囲むか、コンマで区切る必要があります。

Pugに慣れていない開発者は、プロジェクトに組み込む前に、まず構文を学習する必要があります。 Pugは、山かっこと終了タグのない単なるHTMLではなく、学習曲線を伴います。

Pugを作成し、Angularテンプレートでその機能を使用する場合、 ng-cli-pug-loaderはPugテンプレートにコンポーネントのプロパティへのアクセスを許可しません。 その結果、これらのプロパティは、変数、条件、イテレータ、およびインラインコードで使用できません。 Angularディレクティブとテンプレート式もPug変数にアクセスできません。 たとえば、Pug変数の場合：

 //- app.component.pug - var shoppingList = ['Eggs', 'Milk', 'Flour'] //- will work ul each item in shoppingList li= item //- will not work because shoppingList is a Pug variable ul li(*ngFor="let item of shoppingList") {{item}}

コンポーネントのプロパティを使用した例を次に示します。

 //- src/app/app.component.ts export class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour']; }

 //- app.component.pug //- will not work because shoppingList is a component property and not a Pug variable ul each item in shoppingList li= item //- will work because shoppingList is a property of the component ul li(*ngFor="let item of shoppingList") {{item}}

最後に、 index.htmlをPugテンプレートにすることはできません。 ng-cli-pug-loaderはこれをサポートしていません。

結論

Pugは、Angularアプリで使用するためのすばらしいリソースですが、新しいプロジェクトまたは既存のプロジェクトを学習して統合するには、ある程度の投資が必要です。 課題に取り組んでいる場合は、Pugのドキュメントを参照して、その構文の詳細を確認し、プロジェクトに追加することができます。 ng-cli-pug-loaderは優れたツールですが、一部の領域では不足している可能性があります。 プロジェクトでPugがどのように機能するかを調整するには、プロジェクトの要件を満たすAngular回路図面を作成することを検討してください。