Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーデ...
Search
h2ham
August 24, 2024
Programming
1
2.9k
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
August 24, 2024
Tweet
Share
More Decks by h2ham
See All by h2ham
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』
h2ham
1
570
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.2k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
7
4.7k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6.8k
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
h2ham
2
6.4k
Other Decks in Programming
See All in Programming
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
10
1.5k
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
110
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
180
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
140
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
700
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
1.7k
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
140
GrafanaのHTTP API を眺めてみよう
rinchoku
0
140
pytest プラグインを開発して DRY に自動テストを書こう
inuatsu
2
260
RDBの世界をぬりかえていくモデルグラフDB〜truncus graphによるモデルファースト開発〜
jurabi
0
170
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
720
データフレームライブラリ徹底比較
daikikatsuragawa
2
100
Featured
See All Featured
Designing for humans not robots
tammielis
249
25k
In The Pink: A Labor of Love
frogandcode
139
22k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
GitHub's CSS Performance
jonrohan
1030
450k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
230
Clear Off the Table
cherdarchuk
91
320k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Design by the Numbers
sachag
278
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Transcript
⼩規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜 ⻑⾕川 広武 株式会社HAMWORKS
⾃⼰紹介
ハム ⻑⾕川 広武 は せ が わ ひろむ 株式会社HAMWORKS bit
part 合同会社 株式会社カワラバン SaCSS 主催
None
本題
https://ja.vitejs.dev/
https://ja.vitejs.dev/ ⾼速なビルドツール 軽量かつ直感的な開発環境 ⼩規模サイトでも導⼊が容易で、設定がシンプル Vite
None
None
None
src _layouts css js main.js assets index.html default.html header.html footer.html
style.css modules modules
dist css js main.js assets index.html style.css
src css js main.js assets index.html style.css 静的なページのビルド Static Site
Generation
src _layouts css js main.js assets index.html default.html header.html footer.html
style.css component modules
src _layouts css js main.js assets index.html default.html header.html footer.html
style.css component modules 納品後にCMSテンプレート化案件
余談
None
https://wordpress.org/news/2018/12/bebo/ 2018年12⽉6⽇
None
None
WordPress案件では 静的HTML制作は、もう⾏わない
src _layouts css js main.js assets index.html default.html header.html footer.html
style.css component modules WordPress 以外の 納品後にCMSテンプレート化案件
None
以前はローカルサーバー動かして PHPのインクルードで対応 なんて時代もあった
https://astro.build/
https://astro.build/ 最近では Astro の利⽤も
https://astro.build/
https://www.11ty.dev/
https://www.11ty.dev/ 11ty のほうが構成的にも HTML だけを⾒るならシンプルに
https://www.11ty.dev/
https://pugjs.org/api/getting-started.html
https://pugjs.org/api/getting-started.html
https://pugjs.org/api/getting-started.html
https://pugjs.org/api/getting-started.html CMSテンプレートにする場合 Pug は避けたい (そのまま使い難い)
https://ejs.co/
https://ejs.co/
https://ejs.co/ EJSもシンプルだが layout ベースでの構成だと ひと⼿間かかってしまう
https://mozilla.github.io/nunjucks/
https://mozilla.github.io/nunjucks/ 11ty で Nunjucks エンジン利⽤が 構成的にシンプル
https://docs.github.com/ja/pages
https://docs.github.com/ja/pages Nunjucks エンジンにしているのは GitHub Pages で使われていた jekyll がシンプルで好んでいる為
https://jekyllrb.com/
https://shopify.github.io/liquid/
https://jinja.palletsprojects.com/en/3.1.x/
None
None
None
None
シンプルな設定だけだと CSS・JSのビルド後のファイル名が ⾃動で変換かかってしまう
None
None
None
dist css js main.js assets index.html style.css
dist css js main.js assets index.html style.css ディレクトリ・ファイル名を 任意のものにするための コードを追加で、⾃由にできる
./src/assets/css/style.css
./src/assets/css/style.css Vite は、postcss-import を介した CSS @import のインライン化を デフォルトでサポート
まとめ
静的HTMLの案件でも Vite の利⽤が便利 CMS化案件時はシンプルに渡せるものを利⽤ Viteはデフォルトで CSS @import
の インライン化をサポート
以上!
ご清聴ありがとうございました