CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略

ExciteHD TechCon 2025の登壇資料です。

Transcript

1. Front-end strategy to combine CSS and JS into HTML templates 齋藤 歩 エキサイト株式会社 メディア・プラットフォーム事業部 デザイナー CSS、JSをHTMLテンプレートにまとめる フロントエンド戦略
2. 免責 本資料および講演内容は、発表者個人の見解であり、所属する組織の公式見解を示すものではありません。 本資料に含まれる情報は、発表時点での情報に基づいています。資料作成には細心の注意を払っておりますが、 その正確性、完全性、有用性を保証するものではありません。 本資料および講演内容の利用によって生じたいかなる損害についても、発表者および所属組織は一切の責任を負 いかねます。 本資料に記載されている会社名、製品名、サービス名は、各社の商標または登録商標です。これらの画像は、各 社の情報提供を目的として使用しており、権利侵害を意図するものではありません。
3. 齋藤 歩 エキサイト株式会社 メディア・プラットフォーム事業部 デザイナー Qiita、エキサイトでのインターンを経て、 中京大学法学部卒業後にエキサイトに新卒入社（24卒） 。 仕様策定から、UI/UX設計、Webフロントエンドの実装まで携わっています。 「エキサイトブログ」 「ウーマンエキサイト」等を担当しています。 自己紹介
4. お話すること 20min フロントエンドを取り巻く環境 理想状態を実現するための「ひとまとめ」戦略 戦略はどう活きているかと課題 01 02 03 フロントエンドの「ややこしさ」と理想状態、直面した課題を実例を用いてお話します 理想状態の実現のために取った戦略と、その手段としてのTailwind CSS 、Alpine.js、htmxをご紹介します 「ひとまとめ」戦略による成果と課題、それに対してどう向き合っているかをお話します
5. フロントエンドを取り巻く環境 01
6. フロントエンドを取り巻く環境 01 フロントエンドのややこしいところ
7. フロントエンドを取り巻く環境 01 UIを構成する要素が 散らばりがちで、追いにくい ややこしいところ
8. フロントエンドを取り巻く環境 01 実際に遭遇した事象 リビルド以前のエキサイトブログサービスサイト（トップ面） BEMとTailwind CSS的なお手製ユーティリティクラ スが混在 ユーティリティクラスはどこで何が使われているか不 明。それ故、車輪の再発明が散見されCSSが肥大化 JSもインラインで書かれているもの、ファイルに切 り出されているものが混在して管理しきれずに、不要 なファイル・処理が消せずに残り続ける状態に
9. フロントエンドを取り巻く環境 01 フロントエンドの理想状態とは
10. フロントエンドを取り巻く環境 01 要素が一発で消せる状態 理想状態
11. フロントエンドを取り巻く環境 01 要素を消すときの思考 <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB"> ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div>
12. フロントエンドを取り巻く環境 01 要素を消すときの思考 これはユーティリティクラス？ JSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB"> ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div>
13. フロントエンドを取り巻く環境 01 要素を消すときの思考 これはユーティリティクラス？ JSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB"> ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div> 自分以外が実装した要素を消すのは大変
14. フロントエンドを取り巻く環境 01 ページや要素が一発で消せる状態 新規追加や拡張もしやすい状態 =
15. 理想状態を実現するための「ひとまとめ」戦略 02
16. 理想状態を実現するための「ひとまとめ」戦略 02 どうすれば理想状態に近づくのか
17. 理想状態を実現するための「ひとまとめ」戦略 <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB"> ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div> 02 要素を消すときの思考 これはユーティリティクラス？ コンテンツ的にJSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと
18. 理想状態を実現するための「ひとまとめ」戦略 <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB"> ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div> 02 要素を消すときの思考 これはユーティリティクラス？ コンテンツ的にJSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと HTMLだけなら楽なのに⋯
19. 理想状態を実現するための「ひとまとめ」戦略 <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB"> ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div> 02 要素を消すときの思考 これはユーティリティクラス？ コンテンツ的にJSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと HTMLだけにしてしまおう！
20. 理想状態を実現するための「ひとまとめ」戦略 02 CSS・JSを HTMLテンプレートにまとめる 理想状態の実現のための指向 in
21. 理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？
22. 理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？
23. 理想状態を実現するための「ひとまとめ」戦略 02 CSSはすべてstyle属性に記述する？ <p style="font-size: 16px; font-weight: bold;">Hello World</p> HTMLとCSSの凝集度は高められる スコープが効いた状態になるので、異なる要素間での影響は排除できる メディアクエリや擬似クラスが使用できない
24. 理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？
25. 理想状態を実現するための「ひとまとめ」戦略 02 ユーティリティクラスだけでスタイリングするようにする？ <p class="fs16 fwB">Hello World</p> HTMLとCSSの凝集度は高められる スコープが効いた状態になるので、異なる要素間での影響は排除できる メディアクエリや擬似クラス用のユーティリティクラスを用意する必要あり 設計コスト、メンテナンスコストが高くなってしまう
26. 理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？
27. 理想状態を実現するための「ひとまとめ」戦略 02 JSはすべてインラインスクリプトにする？ <button id="function-btn">Hello World</button> <script> ... </script> 要素と処理を紐づけるためのidやclassの命名が必要 JSXならこれは解消できる？
28. 理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？
29. 理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？ ライブラリを検討する
30. 理想状態を実現するための「ひとまとめ」戦略 02 「ひとまとめ」を実現する技術 Tailwind CSS Alpine.js htmx
31. 理想状態を実現するための「ひとまとめ」戦略 02 Tailwind CSS ユーティリティクラスを用いてスタイリング 必要な分だけ生成するのでCSSが常に最小になる 要素に直接スタイリングすることで、要素間の影響が 排除され、 「一発で消せる状態」になる メディアクエリ・擬似クラスの利用も可能 <p class="text-lg sm:text-md">Hello World</p> ポイント
32. 理想状態を実現するための「ひとまとめ」戦略 02 Alpine.js Vue.jsに近い使用感 *CDNから読み込むファイルの容量 44KBと軽量（Vue.jsは約551KB）* 要素に直接処理を記述することで、要素間の影響が排 除され、 「一発で消せる状態」になる DOM操作に特化した必要最小限のAPIで理解しやすい <button @click="$el.remove()"> ボタンが消える</button> ポイント
33. 理想状態を実現するための「ひとまとめ」戦略 02 htmx 通信を伴うDOMの部分更新に特化したライブラリ マークアップの延長でAJAXの実装ができる 要素に直接処理を記述することで、要素間の影響が排 除され、 「一発で消せる状態」になる 複雑なJSを記述することなくAJAXが実装できる <button hx-post="/endpoint"> リクエスト発行</button> ポイント
34. 理想状態を実現するための「ひとまとめ」戦略 02 キーが離されてから1.5秒後にPOST＆入力値をリアルタイムに表示 <div x-data="{ inputtedText: '' }" class="flex items-center gap-2 p-4"> <label> <span> ニックネーム</span> <input type="text" name="nickname" x-model="inputtedText" hx-post="/save" hx-trigger="keyup changed delay:1.5s"> </label> <p> 入力値は：<span x-text="inputtedText"></span></p> </div>
35. 戦略はどう活きているかと課題 03
36. 戦略はどう活きているかと課題 03 どう活きているか 自分以外が実装した要素でも消しやすく、追加・編集しやすくなった ファイルが分散せずにテンプレートファイルのみに集中すれば良い CSS・JS含めて要素が独立するため他の要素への影響が排除 要素の再利用もしやすい 命名に関するコンテクストを合わせる必要が最小限になった ユーティリティファーストなスタイリングのためclass名の命名は不要 JSもタグに直接記述するためid等の命名は不要
37. 戦略はどう活きているかと課題 03 課題 特にTailwind CSSについて ユーティリティファーストなスタイリングによる可読性の低下 導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくい
38. 戦略はどう活きているかと課題 03 課題への取り組み ユーティリティファーストなスタイリングによる可読性の低下 Prettierによる規則的なソートを実行 公式プラグインのprettier-plugin-tailwindcssを使用 githooksのpre-commitを使用してcommit時に自動実行 課題 対処
39. プロジェクトへの導入方法やスタイリング方法のチュートリアルを作成 https://github.com/excitejp/media-tutorial-tailwind-css 導入教材としての開発指針を作成 https://excite-japan.atlassian.net/wiki/spaces/MED/pages/1225031752/Tailwind+CSS 戦略はどう活きているかと課題 03 課題への取り組み 導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくい チュートリアルや開発指針の整備 課題 対処
40. まとめ 04 フロントエンドの理想状態は「要素を一発で消せる状態」なのでは 消しやすいは追加や拡張もしやすいにつながる CSS・JSをHTMLテンプレートにまとめると理想に近づく 実現方法の一つにTailwind CSS、Alpine.js、htmxがある これらにより要素間の影響がCSS、JSも含めてなくなるので、自分が把握 していない要素でも怖がらずに手を加えられる 命名に関する議論も最小限に留められるのでチーム開発だからこそ活きる
41. ご紹介した技術のテックブログでの発信にも注力しています Tailwind CSS 23記事 7記事 6記事 Alpine.js htmx
42. ご清聴ありがとうございました！