大型犬好きによるPugの紹介

Minato.dev#01 非公式 Vue Fes Japan直前回！フロントエンド特集 登壇資料

Transcript

1. 大型犬好きによる Pugの紹介 Minato.dev#01 | 2026/10/13 yamanoku
2. yamanoku 一児の父・会社員 「お元気ですか.fm」パーソナリティ • Web Standard • フロントエンド • アクセシビリティ • 大型犬 • Kawaii Future Base
3. Vue Fes Japan 2026に登壇します！ https://vuefes.jp/2026/speaker/yamanoku
4. 皆さん、犬は好きですか？
9. 犬が含まれるサービス・ソフトウェア・ OSS • Datadog（監視・APMサービス） • Husky（Git Hooks） • Puppy Linux（軽量Linuxディストリビューション） • Watchdog（Pythonのファイル監視ライブラリ） • Bark（Sunoの音声生成モデル） • Dogecoin（暗号資産）
10. フロントエンド開発で 見かける犬といえば
12. Pug • JavaScript製のHTMLテンプレートエンジン • Haml から影響を受けている • .pug という拡張子 • 必ずインデント記述する • 昔は Jade という名前だった ◦ 商標問題で v2.0 より Pug に名前が変わった ◦ Renaming jade -> pug · Issue #2184 · pugjs/pug
13. サンプルコード Pug HTML
14. Pugの良いところ • 再利用性 ◦ include, extends, mixin, block • 制御構文がある ◦ if, while, each of • UIライブラリ・フレームワークで活用できる • 閉じタグを書かなくてよい • HTML要素自体も書くことができる
15. 再利用性
16. 制御構文
17. ちなみに PugはVue.jsで今も使える
18. 令和最新 Vue.jsでPugを使う方法 • pug、@vue/language-plugin-pug をインストール • tsconfig.app.json に以下設定 "vueCompilerOptions": { "plugins": ["@vue/language-plugin-pug"] }, • template に lang="pug" で書き始められる
19. 令和の今、 Pugを使うことはあるか？ • 正直積極的に使うことは無いかもしれない… • UIライブラリによるコンポーネント志向が浸透してきた • メタフレームワークで完結できる開発になってきた • HTMLを直接書くこと自体がデフォルト ◦ 静的解析もHTMLでサポートされているものが多い • AIが選ぶ選択肢としてもまずない状況 ちなみにPug自体はまだ更新されている（pug@3.0.4 は 2026/3/14 リリース）
20. Vueにおいては移行事例もある • 1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話 | PLAID engineer blog • Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog 移行ツール • https://github.com/dperrymorrow/vue-pug-to-html • https://github.com/plaidev/pug-to-html ◦ Jadeも対応している
21. 🔍Pug 使わない 理由 🔍Pug 流行らない 理由 🔍Pug 盛り上げたい 🔍Pug 今 必要なもの 🔍Pug 覇権 取り方
22. Pugのこと、たまには 思い出してやってください
23. ありがとうございました