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

by h2ham

Slide 1

Slide 1 text

⼩規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜⻑⾕川広武株式会社HAMWORKS

Slide 2

Slide 2 text

⾃⼰紹介

Slide 3

Slide 3 text

ハム⻑⾕川広武はせがわひろむ株式会社HAMWORKS bit part 合同会社株式会社カワラバン SaCSS 主催

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

本題

Slide 6

Slide 6 text

https://ja.vitejs.dev/

Slide 7

Slide 7 text

https://ja.vitejs.dev/  ⾼速なビルドツール  軽量かつ直感的な開発環境  ⼩規模サイトでも導⼊が容易で、設定がシンプル Vite

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

src _layouts css js main.js assets index.html default.html header.html footer.html style.css modules modules

Slide 12

Slide 12 text

dist css js main.js assets index.html style.css

Slide 13

Slide 13 text

src css js main.js assets index.html style.css 静的なページのビルド Static Site Generation

Slide 14

Slide 14 text

src _layouts css js main.js assets index.html default.html header.html footer.html style.css component modules

Slide 15

Slide 15 text

src _layouts css js main.js assets index.html default.html header.html footer.html style.css component modules 納品後にCMSテンプレート化案件

Slide 16

Slide 16 text

余談

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

https://wordpress.org/news/2018/12/bebo/ 2018年12⽉6⽇

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

WordPress案件では静的HTML制作は、もう⾏わない

Slide 22

Slide 22 text

src _layouts css js main.js assets index.html default.html header.html footer.html style.css component modules WordPress 以外の納品後にCMSテンプレート化案件

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

以前はローカルサーバー動かして PHPのインクルードで対応なんて時代もあった

Slide 25

Slide 25 text

https://astro.build/

Slide 26

Slide 26 text

https://astro.build/ 最近では Astro の利⽤も

Slide 27

Slide 27 text

https://astro.build/

Slide 28

Slide 28 text

https://www.11ty.dev/

Slide 29

Slide 29 text

https://www.11ty.dev/ 11ty のほうが構成的にも HTML だけを⾒るならシンプルに

Slide 30

Slide 30 text

https://www.11ty.dev/

Slide 31

Slide 31 text

https://pugjs.org/api/getting-started.html

Slide 32

Slide 32 text

https://pugjs.org/api/getting-started.html

Slide 33

Slide 33 text

https://pugjs.org/api/getting-started.html

Slide 34

Slide 34 text

https://pugjs.org/api/getting-started.html CMSテンプレートにする場合 Pug は避けたい（そのまま使い難い）

Slide 35

Slide 35 text

https://ejs.co/

Slide 36

Slide 36 text

https://ejs.co/

Slide 37

Slide 37 text

https://ejs.co/ EJSもシンプルだが layout ベースでの構成だとひと⼿間かかってしまう

Slide 38

Slide 38 text

https://mozilla.github.io/nunjucks/

Slide 39

Slide 39 text

https://mozilla.github.io/nunjucks/ 11ty で Nunjucks エンジン利⽤が構成的にシンプル

Slide 40

Slide 40 text

https://docs.github.com/ja/pages

Slide 41

Slide 41 text

https://docs.github.com/ja/pages Nunjucks エンジンにしているのは GitHub Pages で使われていた jekyll がシンプルで好んでいる為

Slide 42

Slide 42 text

https://jekyllrb.com/

Slide 43

Slide 43 text

https://shopify.github.io/liquid/

Slide 44

Slide 44 text

https://jinja.palletsprojects.com/en/3.1.x/

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

シンプルな設定だけだと CSS・JSのビルド後のファイル名が⾃動で変換かかってしまう

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

dist css js main.js assets index.html style.css

Slide 54

Slide 54 text

dist css js main.js assets index.html style.css ディレクトリ・ファイル名を任意のものにするためのコードを追加で、⾃由にできる

Slide 55

Slide 55 text

./src/assets/css/style.css

Slide 56

Slide 56 text

./src/assets/css/style.css Vite は、postcss-import を介した CSS @import のインライン化をデフォルトでサポート

Slide 57

Slide 57 text

まとめ

Slide 58

Slide 58 text

 静的HTMLの案件でも Vite の利⽤が便利  CMS化案件時はシンプルに渡せるものを利⽤  Viteはデフォルトで CSS @import の  インライン化をサポート