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
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
Search
Saito Ayumu
June 22, 2025
Technology
0
970
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
ExciteHD TechCon 2025の登壇資料です。
Saito Ayumu
June 22, 2025
Tweet
Share
More Decks by Saito Ayumu
See All by Saito Ayumu
チーム内のUIデザインのコミュニケーションを円滑にするFigmaの機能「Variants」をおさらい!
d120145
0
1.2k
Other Decks in Technology
See All in Technology
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
MCPと認可まわりの話 / mcp_and_authorization
convto
2
290
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
1.4k
Kiro Hookを Terraformで検証
ao_inoue
0
140
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
270
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
870
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
520
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
180
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
310
claude codeでPrompt Engineering
iori0311
0
530
M365アカウント侵害時の初動対応
lhazy
7
5.1k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Adopting Sorbet at Scale
ufuk
77
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
RailsConf 2023
tenderlove
30
1.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Six Lessons from altMBA
skipperchong
28
3.9k
A better future with KSS
kneath
238
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How STYLIGHT went responsive
nonsquared
100
5.7k
Transcript
Front-end strategy to combine CSS and JS into HTML templates
齋藤 歩 エキサイト株式会社 メディア・プラットフォーム事業部 デザイナー CSS、JSをHTMLテンプレートにまとめる フロントエンド戦略
免責 本資料および講演内容は、発表者個人の見解であり、所属する組織の公式見解を示すものではありません。 本資料に含まれる情報は、発表時点での情報に基づいています。資料作成には細心の注意を払っておりますが、 その正確性、完全性、有用性を保証するものではありません。 本資料および講演内容の利用によって生じたいかなる損害についても、発表者および所属組織は一切の責任を負 いかねます。 本資料に記載されている会社名、製品名、サービス名は、各社の商標または登録商標です。これらの画像は、各 社の情報提供を目的として使用しており、権利侵害を意図するものではありません。
齋藤 歩 エキサイト株式会社 メディア・プラットフォーム事業部 デザイナー Qiita、エキサイトでのインターンを経て、 中京大学法学部卒業後にエキサイトに新卒入社(24卒) 。 仕様策定から、UI/UX設計、Webフロントエンドの実装まで携わっています。 「エキサイトブログ」
「ウーマンエキサイト」等を担当しています。 自己紹介
お話すること 20min フロントエンドを取り巻く環境 理想状態を実現するための「ひとまとめ」戦略 戦略はどう活きているかと課題 01 02 03 フロントエンドの「ややこしさ」と理想状態、直面した課題を実例を用いてお話します 理想状態の実現のために取った戦略と、その手段としてのTailwind
CSS 、Alpine.js、htmxをご紹介します 「ひとまとめ」戦略による成果と課題、それに対してどう向き合っているかをお話します
フロントエンドを取り巻く環境 01
フロントエンドを取り巻く環境 01 フロントエンドのややこしいところ
フロントエンドを取り巻く環境 01 UIを構成する要素が 散らばりがちで、追いにくい ややこしいところ
フロントエンドを取り巻く環境 01 実際に遭遇した事象 リビルド以前のエキサイトブログサービスサイト(トップ面) BEMとTailwind CSS的なお手製ユーティリティクラ スが混在 ユーティリティクラスはどこで何が使われているか不 明。それ故、車輪の再発明が散見されCSSが肥大化 JSもインラインで書かれているもの、ファイルに切
り出されているものが混在して管理しきれずに、不要 なファイル・処理が消せずに残り続ける状態に
フロントエンドを取り巻く環境 01 フロントエンドの理想状態とは
フロントエンドを取り巻く環境 01 要素が一発で消せる状態 理想状態
フロントエンドを取り巻く環境 01 要素を消すときの思考 <div class="entry-cta__wrapper mt40 columnSet"> <p class="fs16 fwB">
ここから記事を書くとポイントがもらえます</p> <button type="button" class="entry-cta__btn"> 記事を書く</button> </div>
フロントエンドを取り巻く環境 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>
フロントエンドを取り巻く環境 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> 自分以外が実装した要素を消すのは大変
フロントエンドを取り巻く環境 01 ページや要素が一発で消せる状態 新規追加や拡張もしやすい状態 =
理想状態を実現するための「ひとまとめ」戦略 02
理想状態を実現するための「ひとまとめ」戦略 02 どうすれば理想状態に近づくのか
理想状態を実現するための「ひとまとめ」戦略 <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も消さないと
理想状態を実現するための「ひとまとめ」戦略 <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だけなら楽なのに⋯
理想状態を実現するための「ひとまとめ」戦略 <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だけにしてしまおう!
理想状態を実現するための「ひとまとめ」戦略 02 CSS・JSを HTMLテンプレートにまとめる 理想状態の実現のための指向 in
理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはインラインスクリプトにする?
理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはインラインスクリプトにする?
理想状態を実現するための「ひとまとめ」戦略 02 CSSはすべてstyle属性に記述する? <p style="font-size: 16px; font-weight: bold;">Hello World</p> HTMLとCSSの凝集度は高められる
スコープが効いた状態になるので、異なる要素間での影響は排除できる メディアクエリや擬似クラスが使用できない
理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはインラインスクリプトにする?
理想状態を実現するための「ひとまとめ」戦略 02 ユーティリティクラスだけでスタイリングするようにする? <p class="fs16 fwB">Hello World</p> HTMLとCSSの凝集度は高められる スコープが効いた状態になるので、異なる要素間での影響は排除できる メディアクエリや擬似クラス用のユーティリティクラスを用意する必要あり
設計コスト、メンテナンスコストが高くなってしまう
理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはインラインスクリプトにする?
理想状態を実現するための「ひとまとめ」戦略 02 JSはすべてインラインスクリプトにする? <button id="function-btn">Hello World</button> <script> ... </script> 要素と処理を紐づけるためのidやclassの命名が必要
JSXならこれは解消できる?
理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはインラインスクリプトにする?
理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する? ユーティリティクラスだけでスタイリングするようにする? JSはインラインスクリプトにする? ライブラリを検討する
理想状態を実現するための「ひとまとめ」戦略 02 「ひとまとめ」を実現する技術 Tailwind CSS Alpine.js htmx
理想状態を実現するための「ひとまとめ」戦略 02 Tailwind CSS ユーティリティクラスを用いてスタイリング 必要な分だけ生成するのでCSSが常に最小になる 要素に直接スタイリングすることで、要素間の影響が 排除され、 「一発で消せる状態」になる メディアクエリ・擬似クラスの利用も可能
<p class="text-lg sm:text-md">Hello World</p> ポイント
理想状態を実現するための「ひとまとめ」戦略 02 Alpine.js Vue.jsに近い使用感 *CDNから読み込むファイルの容量 44KBと軽量(Vue.jsは約551KB)* 要素に直接処理を記述することで、要素間の影響が排 除され、 「一発で消せる状態」になる DOM操作に特化した必要最小限のAPIで理解しやすい
<button @click="$el.remove()"> ボタンが消える</button> ポイント
理想状態を実現するための「ひとまとめ」戦略 02 htmx 通信を伴うDOMの部分更新に特化したライブラリ マークアップの延長でAJAXの実装ができる 要素に直接処理を記述することで、要素間の影響が排 除され、 「一発で消せる状態」になる 複雑なJSを記述することなくAJAXが実装できる <button
hx-post="/endpoint"> リクエスト発行</button> ポイント
理想状態を実現するための「ひとまとめ」戦略 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>
戦略はどう活きているかと課題 03
戦略はどう活きているかと課題 03 どう活きているか 自分以外が実装した要素でも消しやすく、追加・編集しやすくなった ファイルが分散せずにテンプレートファイルのみに集中すれば良い CSS・JS含めて要素が独立するため他の要素への影響が排除 要素の再利用もしやすい 命名に関するコンテクストを合わせる必要が最小限になった ユーティリティファーストなスタイリングのためclass名の命名は不要 JSもタグに直接記述するためid等の命名は不要
戦略はどう活きているかと課題 03 課題 特にTailwind CSSについて ユーティリティファーストなスタイリングによる可読性の低下 導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくい
戦略はどう活きているかと課題 03 課題への取り組み ユーティリティファーストなスタイリングによる可読性の低下 Prettierによる規則的なソートを実行 公式プラグインのprettier-plugin-tailwindcssを使用 githooksのpre-commitを使用してcommit時に自動実行 課題 対処
プロジェクトへの導入方法やスタイリング方法のチュートリアルを作成 https://github.com/excitejp/media-tutorial-tailwind-css 導入教材としての開発指針を作成 https://excite-japan.atlassian.net/wiki/spaces/MED/pages/1225031752/Tailwind+CSS 戦略はどう活きているかと課題 03 課題への取り組み 導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくい チュートリアルや開発指針の整備 課題
対処
まとめ 04 フロントエンドの理想状態は「要素を一発で消せる状態」なのでは 消しやすいは追加や拡張もしやすいにつながる CSS・JSをHTMLテンプレートにまとめると理想に近づく 実現方法の一つにTailwind CSS、Alpine.js、htmxがある これらにより要素間の影響がCSS、JSも含めてなくなるので、自分が把握 していない要素でも怖がらずに手を加えられる 命名に関する議論も最小限に留められるのでチーム開発だからこそ活きる
ご紹介した技術のテックブログでの発信にも注力しています Tailwind CSS 23記事 7記事 6記事 Alpine.js htmx
ご清聴ありがとうございました!