Angularでpugを使用するのをオススメしない理由

最近とある理由から既存のAngularアプリのテンプレートをpugからhtmlに戻しました。その理由を書こうと思います。

codelyzerが効かない

angular用のtslintの拡張ですが、これはHTMLの構文チェックまでやってるオプションがあります。 が、当然pugだと動きません。 チーム開発においてlintは書き方の最低限のルールを守れるようになると同時に、コードレビューでつまらない指摘をしなくて済むのでできれば設定したいところ。

https://github.com/mgechev/codelyzer

Prettierが効かない

最近htmlもサポートされ、自動で整形できるようになりました。これがないと自分でちまちま改行やスペースいれないといけないですし、また人によってそのあたりのルールがズレてきます。 prettierを使えばその辺自動でやってくれるのでとても楽に統一されたHTMLを作ることができます。

AOTでのエラーがわかりにくい

ビルド時にpugからhtmlすると一行のhtmlになってしまいます。それをそのままAOTすると、エラーがでてもすべて一行目のエラーとでるので複数でもエラー出たときの原因特定がしずらくなります

テンプレートが肥大化する

簡単にかける反面、そのせいでデカイなコンポーネントが量産されます。また、pugにはmixinやinclude機能あって、これを下手に使うとコンポーネントとして別れてるのかテンプレートとして別れてるのかよくわからないことになります。どうしてもpugが使いたいときは少なくともincludeやmixinは禁止したほうがよいでしょう。適切にコンポーネントが分割されていれば必要ない機能です

最後に

個人開発であればpugをつかうのはありかなと思ってます。ただ、チーム開発では上記の理由によりおススメできないとおもってます。 最近のIDEやエディタはHTMLを簡単にかけるプラグインが入ってることがほとんどなのでそこまで苦なくHTMLがかけます。 いろいろ鑑みて、pugにするメリットよりもHTMLをつかうメリットのほうが高いとおもってます。

(ちなみにAngular的にサポートしてないpugを使うためにng-cli-pug-loader を入れてました。)