フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武（ハム）

Transcript

1. ⼩規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜 ⻑⾕川 広武 株式会社HAMWORKS
2. ⾃⼰紹介
3. ハム ⻑⾕川 広武 は せ が わ ひろむ 株式会社HAMWORKS bit part 合同会社 株式会社カワラバン SaCSS 主催
5. 本題
6. https://ja.vitejs.dev/
7. https://ja.vitejs.dev/  ⾼速なビルドツール  軽量かつ直感的な開発環境  ⼩規模サイトでも導⼊が容易で、設定がシンプル Vite
11. src _layouts css js main.js assets index.html default.html header.html footer.html style.css modules modules
12. dist css js main.js assets index.html style.css
13. src css js main.js assets index.html style.css 静的なページのビルド Static Site Generation
14. src _layouts css js main.js assets index.html default.html header.html footer.html style.css component modules
15. src _layouts css js main.js assets index.html default.html header.html footer.html style.css component modules 納品後にCMSテンプレート化案件
16. 余談
18. https://wordpress.org/news/2018/12/bebo/ 2018年12⽉6⽇
21. WordPress案件では 静的HTML制作は、もう⾏わない
22. src _layouts css js main.js assets index.html default.html header.html footer.html style.css component modules WordPress 以外の 納品後にCMSテンプレート化案件
24. 以前はローカルサーバー動かして PHPのインクルードで対応 なんて時代もあった
25. https://astro.build/
26. https://astro.build/ 最近では Astro の利⽤も
27. https://astro.build/
28. https://www.11ty.dev/
29. https://www.11ty.dev/ 11ty のほうが構成的にも HTML だけを⾒るならシンプルに
30. https://www.11ty.dev/
31. https://pugjs.org/api/getting-started.html
32. https://pugjs.org/api/getting-started.html
33. https://pugjs.org/api/getting-started.html
34. https://pugjs.org/api/getting-started.html CMSテンプレートにする場合 Pug は避けたい （そのまま使い難い）
35. https://ejs.co/
36. https://ejs.co/
37. https://ejs.co/ EJSもシンプルだが layout ベースでの構成だと ひと⼿間かかってしまう
38. https://mozilla.github.io/nunjucks/
39. https://mozilla.github.io/nunjucks/ 11ty で Nunjucks エンジン利⽤が 構成的にシンプル
40. https://docs.github.com/ja/pages
41. https://docs.github.com/ja/pages Nunjucks エンジンにしているのは GitHub Pages で使われていた jekyll がシンプルで好んでいる為
42. https://jekyllrb.com/
43. https://shopify.github.io/liquid/
44. https://jinja.palletsprojects.com/en/3.1.x/
49. シンプルな設定だけだと CSS・JSのビルド後のファイル名が ⾃動で変換かかってしまう
53. dist css js main.js assets index.html style.css
54. dist css js main.js assets index.html style.css ディレクトリ・ファイル名を 任意のものにするための コードを追加で、⾃由にできる
55. ./src/assets/css/style.css
56. ./src/assets/css/style.css Vite は、postcss-import を介した CSS @import のインライン化を デフォルトでサポート
57. まとめ
58.  静的HTMLの案件でも Vite の利⽤が便利  CMS化案件時はシンプルに渡せるものを利⽤  Viteはデフォルトで CSS @import の
 インライン化をサポート
59. 以上！
60. ご清聴ありがとうございました