はじめに
HTMLテンプレートエンジンPugについて微妙だと思ったところを羅列していきます。
モダンなフロントエンド開発をやっている現場ではJSXやTSXなどを使って、JavaScriptでHTMLを書いているのでしょうが、そういう現場ではない限り効率よくHTMLを書く方法について考えた結果、Pugを使っているところもあると思います。
Pugを使っている方、これから使おうとしている方に向けて、Pugのこういうところがダメだよね、もっとPugを生かす方法はないかな？と問題提起する目的や自分の中の課題感の備忘録として残しておきます。
pug-cliの開発が止まっている
Pugはnode.jsモジュールなので、npm installで持ってこようとするとインストール自体はできるのですが、パッケージマネージャの脆弱性診断に引っかかります。
脆弱性自体はpug-cliをインストールするときに古いpugが入ってしまうようで、package-lock.jsonにpugのバージョンを手動で変更すればいけるみたいですが、そもそもそのバグが公式で直されてない。
GitHubを見ると2017年で更新止まってますね。
https://github.com/pugjs/pug-cli
※ちなみにpugとpug-cliは違います。pug単体だとJavaScript上で使うモジュールで、pug-cliはpugファイルをhtmlファイルにコンパイルするのにpugコマンドが使えるというもの。
CSS Peekが使えない
IDEのプラグインでHTMLファイル上からCSSクラスの定義が参照できる「CSS Peek」というものがあります。
このプラグインはわざわざCSSファイルを参照してどういう定義がされているのか見に行く必要がなくなるので、非常に開発が捗ります。
しかし、Pugを利用している場合このCSS Peekが使えません。
そのため、ここにこのCSSクラス使われているけどどういう定義がされているのかな？と思ったときにCSSファイルを見に行くか、サーバーを立ち上げてディベロッパーツールで見るしかありません。
他に代替手段がある
Pugの魅力は「HTMLコンポーネントのモジュール化」「インデントによる記述の簡易化」「閉じタグなしによる見やすさ」などがあるのですが、モジュール化であればJavaであればThymeleafが使えるし、記述の簡易化ならEmmetを使えばいいんじゃないか？っていうことであまり旨味がないように思えてきます。
単純に手間が増える
HTMLファイルにコンパイルしないといけない、Pugファイル分の管理リソースが増えるといった単純に手間が増えるというデメリットがあります。
それにHTMLファイルを直に編集して、Pugファイルと差分が生まれるリスクもあります。
あとはPug自体は単純なのでそんなに覚えることはないのですが、学習コストは少なからずあります。
最近Pugの名前を聞かなくなった・・・
Reactなどのモダンフロント開発が流行っている昨今、Pugの名前はあまり聞かなくなった気がします・・・。
私自身、普段技術書籍やIT勉強会やUdemyなどの学習サイトをよく覗いているのですが、どこも最近はPugを扱っていません。
人が使わなくなっていくと、そのツール自体どんどん廃れていくので今後Pugの将来を考えるとあまり先行きはよくないのかなって感じます。
まとめ
バックエンドを気にしないWebデザインの制作会社であればまだまだ使っていそうですが、開発の現場ではもうあまり使わないのかなっていう所感です。使うとしても開発初期のモックアップとかでしょうか？
モックであればコンパイル後のHTMLを使っていけば、Pug自体はすぐに捨てられるのでリスクはありませんが、継続的に使うとしたらいつかPugの代替を探すときに苦労するかもしれません。それよりかは最初からもうHTMLで書いたほうがいいのではと感じました。