こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、先日弊社で開催されたExciteHD TechCon 2025で発表した、Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略についてご紹介します。
ExciteHD TechConについて
ExciteHD TechConは、エキサイトホールディングスで毎年開催している技術カンファレンスです。
エンジニアだけではなく、デザイナー・ビジネス職のメンバーによる発表もあり、職種を超えて技術発信がされていることが特徴です。
今年のTechConについては以下の記事もご覧ください。
発表内容
今回私は、『CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略』と題して発表しました。
発表内容の要約は次の通りです。
- フロントエンドのペインとして「UIを構成する要素が散らばりがちで、追いにくい」点が挙げられる
- 理想状態は「要素を一発で消せる状態」なのでは
- 「消しやすい」は追加や拡張もしやすいにつながる
- CSS・JSをHTMLテンプレートにまとめると理想に近づく
- 実現方法の一つにTailwind CSS、Alpine.js、htmxがある
- これらにより要素間の影響がCSS、JSも含めてなくなるので、自分が把握していない要素でも怖がらずに手を加えられる
- 命名に関する議論も最小限に留められるのでチーム開発だからこそ活きる
フロントエンドのややこしいところ
フロントエンドは、HTML、CSS、JSなどの「UIを構成する要素が散らばりがちで、追いにくい」というペインを抱えることがあると思います。
特に歴史が長いプロダクトでは、CSSやJSのファイルが肥大化したり、不要なものが残り続けてしまいがちです。
昨年20周年を迎えたエキサイトブログでも課題を抱えていました。
フロントエンドの理想状態とは
では、フロントエンドの理想状態はいったいどんな状態なのでしょうか。
その一つに「要素が一発で消せる状態」があると考えます。
要素を消す場合、HTMLを単に削除すれば良いだけではなく、様々な思考を必要とします。
要素に紐づくCSSやJSも合わせて削除したいが、他の要素への影響を気にする必要があったりと、自分以外が実装した要素では特に「一発で消せる」ことは少ないです。
一方で、要素が一発で消せる状態にしておくと、新規追加や拡張もしやすい状態となると考えます。
どうすれば理想状態に近づくのか
「要素が一発で消せる状態」にするにはどうすれば良いのでしょうか。
もう一度、要素を消す場合の思考を振り返ります。
HTMLを消すという作業に対して、CSSやJSも気にする必要があります。
｢HTMLだけなら楽なのに…｣に対して「HTMLだけにしてしまおう！」というのが、今回ご紹介する戦略です。
どうやって実現するのか
実現手段を考えます。まずは、標準の技術から検討します。
CSSはすべてstyle属性に記述する？
ユーティリティクラスだけでスタイリングするようにする？
JSはすべてインラインスクリプトにする？
標準の技術だけでは困難なため、ライブラリを検討します。
「ひとまとめ」を実現する技術たち
CSSやJSをHTMLに寄せるための手段として、Tailwind CSS、Alpine.js、htmxがあります。
Tailwind CSS
Alpine.js
htmx
戦略はどう活きているか
私が所属するメディア・プラットフォーム事業部内のプロダクトの一部ではご紹介した戦略を採用しています。
その結果、
- 自分以外が実装した要素でも消しやすく、追加・編集しやすくなった
- 命名に関するコンテクストを合わせる必要が最小限になった
といった点で効果を発揮しています。
戦略の課題は
一方で、特にTailwind CSSについて次のような課題が浮き彫りになりました。
- ユーティリティファーストなスタイリングによる可読性の低下
- 導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくい
これらに対して、コードフォーマットの自動化やドキュメント整備等の対策を講じています。
まとめ
今回ご紹介したことは、あくまで方法の一つに過ぎず、銀の弾丸ではありません。
一方で、ThymeleafやLaravel Bladeといったテンプレートエンジンが使用できる環境で、フロントエンドは最小構成にしたいといったケースには相性が良いと考えております。
最後に
「分かりやすかった」「エンジニア目線だと目からウロコだった」等の励みになるフィードバックも多く頂戴しました。
また、Best Session Awardも受賞させていただきました。
昨年来2回目の登壇でしたが、来年も登壇できるように日々の業務に一層励みたいと改めて認識した機会となりました。
本発表がどなたかの一助となれば幸いです。ご精読ありがとうございました。
昨年の発表
昨年はFigmaのVariablesについて発表をしました。
他の登壇者の発表
他の登壇者の発表についても順次ご覧いただけます。ぜひ、「TechCon」カテゴリをチェックしてください。
免責
- 本資料および講演内容は、発表者個人の見解であり、所属する組織の公式見解を示すものではありません。
- 本資料に含まれる情報は、発表時点での情報に基づいています。資料作成には細心の注意を払っておりますが、その正確性、完全性、有用性を保証するものではありません。
- 本資料および講演内容の利用によって生じたいかなる損害についても、発表者および所属組織は一切の責任を負いかねます。
- 本資料に記載されている会社名、製品名、サービス名は、各社の商標または登録商標です。これらの画像は、各社の情報提供を目的として使用しており、権利侵害を意図するものではありません。
