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

Slide 1

Slide 1 text

Front-end strategy to combine CSS and JS into HTML templates 齋藤歩エキサイト株式会社メディア・プラットフォーム事業部デザイナー CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略

Slide 2

Slide 2 text

免責本資料および講演内容は、発表者個人の見解であり、所属する組織の公式見解を示すものではありません。本資料に含まれる情報は、発表時点での情報に基づいています。資料作成には細心の注意を払っておりますが、その正確性、完全性、有用性を保証するものではありません。本資料および講演内容の利用によって生じたいかなる損害についても、発表者および所属組織は一切の責任を負いかねます。本資料に記載されている会社名、製品名、サービス名は、各社の商標または登録商標です。これらの画像は、各社の情報提供を目的として使用しており、権利侵害を意図するものではありません。

Slide 3

Slide 3 text

齋藤歩エキサイト株式会社メディア・プラットフォーム事業部デザイナー Qiita、エキサイトでのインターンを経て、中京大学法学部卒業後にエキサイトに新卒入社（24卒）。仕様策定から、UI/UX設計、Webフロントエンドの実装まで携わっています。「エキサイトブログ」「ウーマンエキサイト」等を担当しています。自己紹介

Slide 4

Slide 4 text

お話すること 20min フロントエンドを取り巻く環境理想状態を実現するための「ひとまとめ」戦略戦略はどう活きているかと課題 01 02 03 フロントエンドの「ややこしさ」と理想状態、直面した課題を実例を用いてお話します理想状態の実現のために取った戦略と、その手段としてのTailwind CSS 、Alpine.js、htmxをご紹介します「ひとまとめ」戦略による成果と課題、それに対してどう向き合っているかをお話します

Slide 5

Slide 5 text

フロントエンドを取り巻く環境 01

Slide 6

Slide 6 text

フロントエンドを取り巻く環境 01 フロントエンドのややこしいところ

Slide 7

Slide 7 text

フロントエンドを取り巻く環境 01 UIを構成する要素が散らばりがちで、追いにくいややこしいところ

Slide 8

Slide 8 text

フロントエンドを取り巻く環境 01 実際に遭遇した事象リビルド以前のエキサイトブログサービスサイト（トップ面） BEMとTailwind CSS的なお手製ユーティリティクラスが混在ユーティリティクラスはどこで何が使われているか不明。それ故、車輪の再発明が散見されCSSが肥大化 JSもインラインで書かれているもの、ファイルに切り出されているものが混在して管理しきれずに、不要なファイル・処理が消せずに残り続ける状態に

Slide 9

Slide 9 text

フロントエンドを取り巻く環境 01 フロントエンドの理想状態とは

Slide 10

Slide 10 text

フロントエンドを取り巻く環境 01 要素が一発で消せる状態理想状態

Slide 11

Slide 11 text

フロントエンドを取り巻く環境 01 要素を消すときの思考

ここから記事を書くとポイントがもらえます

記事を書く

Slide 12

Slide 12 text

フロントエンドを取り巻く環境 01 要素を消すときの思考これはユーティリティクラス？ JSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと

ここから記事を書くとポイントがもらえます

記事を書く

Slide 13

Slide 13 text

フロントエンドを取り巻く環境 01 要素を消すときの思考これはユーティリティクラス？ JSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと

ここから記事を書くとポイントがもらえます

記事を書く

自分以外が実装した要素を消すのは大変

Slide 14

Slide 14 text

フロントエンドを取り巻く環境 01 ページや要素が一発で消せる状態新規追加や拡張もしやすい状態 =

Slide 15

Slide 15 text

理想状態を実現するための「ひとまとめ」戦略 02

Slide 16

Slide 16 text

理想状態を実現するための「ひとまとめ」戦略 02 どうすれば理想状態に近づくのか

Slide 17

Slide 17 text

理想状態を実現するための「ひとまとめ」戦略

ここから記事を書くとポイントがもらえます

記事を書く

02 要素を消すときの思考これはユーティリティクラス？コンテンツ的にJSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと

Slide 18

Slide 18 text

理想状態を実現するための「ひとまとめ」戦略

ここから記事を書くとポイントがもらえます

記事を書く

02 要素を消すときの思考これはユーティリティクラス？コンテンツ的にJSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと HTMLだけなら楽なのに⋯

Slide 19

Slide 19 text

理想状態を実現するための「ひとまとめ」戦略

ここから記事を書くとポイントがもらえます

記事を書く

02 要素を消すときの思考これはユーティリティクラス？コンテンツ的にJSの処理がありそう。どこだろう？ BEMぽい！CSSも消さないと HTMLだけにしてしまおう！

Slide 20

Slide 20 text

理想状態を実現するための「ひとまとめ」戦略 02 CSS・JSを HTMLテンプレートにまとめる理想状態の実現のための指向 in

Slide 21

Slide 21 text

理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？

Slide 22

Slide 22 text

Slide 23

Slide 23 text

理想状態を実現するための「ひとまとめ」戦略 02 CSSはすべてstyle属性に記述する？

Hello World

HTMLとCSSの凝集度は高められるスコープが効いた状態になるので、異なる要素間での影響は排除できるメディアクエリや擬似クラスが使用できない

Slide 24

Slide 24 text

Slide 25

Slide 25 text

理想状態を実現するための「ひとまとめ」戦略 02 ユーティリティクラスだけでスタイリングするようにする？

Hello World

HTMLとCSSの凝集度は高められるスコープが効いた状態になるので、異なる要素間での影響は排除できるメディアクエリや擬似クラス用のユーティリティクラスを用意する必要あり設計コスト、メンテナンスコストが高くなってしまう

Slide 26

Slide 26 text

Slide 27

Slide 27 text

理想状態を実現するための「ひとまとめ」戦略 02 JSはすべてインラインスクリプトにする？ Hello World ... 要素と処理を紐づけるためのidやclassの命名が必要 JSXならこれは解消できる？

Slide 28

Slide 28 text

Slide 29

Slide 29 text

理想状態を実現するための「ひとまとめ」戦略 02 戦略の実現手段のアイデア CSSはすべてstyle属性に記述する？ユーティリティクラスだけでスタイリングするようにする？ JSはインラインスクリプトにする？ライブラリを検討する

Slide 30

Slide 30 text

理想状態を実現するための「ひとまとめ」戦略 02 「ひとまとめ」を実現する技術 Tailwind CSS Alpine.js htmx

Slide 31

Slide 31 text

理想状態を実現するための「ひとまとめ」戦略 02 Tailwind CSS ユーティリティクラスを用いてスタイリング必要な分だけ生成するのでCSSが常に最小になる要素に直接スタイリングすることで、要素間の影響が排除され、「一発で消せる状態」になるメディアクエリ・擬似クラスの利用も可能

Hello World

ポイント

Slide 32

Slide 32 text

理想状態を実現するための「ひとまとめ」戦略 02 Alpine.js Vue.jsに近い使用感 *CDNから読み込むファイルの容量 44KBと軽量（Vue.jsは約551KB）* 要素に直接処理を記述することで、要素間の影響が排除され、「一発で消せる状態」になる DOM操作に特化した必要最小限のAPIで理解しやすいボタンが消えるポイント

Slide 33

Slide 33 text

理想状態を実現するための「ひとまとめ」戦略 02 htmx 通信を伴うDOMの部分更新に特化したライブラリマークアップの延長でAJAXの実装ができる要素に直接処理を記述することで、要素間の影響が排除され、「一発で消せる状態」になる複雑なJSを記述することなくAJAXが実装できるリクエスト発行ポイント

Slide 34

Slide 34 text

理想状態を実現するための「ひとまとめ」戦略 02 キーが離されてから1.5秒後にPOST＆入力値をリアルタイムに表示

ニックネーム

入力値は：

Slide 35

Slide 35 text

戦略はどう活きているかと課題 03

Slide 36

Slide 36 text

戦略はどう活きているかと課題 03 どう活きているか自分以外が実装した要素でも消しやすく、追加・編集しやすくなったファイルが分散せずにテンプレートファイルのみに集中すれば良い CSS・JS含めて要素が独立するため他の要素への影響が排除要素の再利用もしやすい命名に関するコンテクストを合わせる必要が最小限になったユーティリティファーストなスタイリングのためclass名の命名は不要 JSもタグに直接記述するためid等の命名は不要

Slide 37

Slide 37 text

戦略はどう活きているかと課題 03 課題特にTailwind CSSについてユーティリティファーストなスタイリングによる可読性の低下導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくい

Slide 38

Slide 38 text

戦略はどう活きているかと課題 03 課題への取り組みユーティリティファーストなスタイリングによる可読性の低下 Prettierによる規則的なソートを実行公式プラグインのprettier-plugin-tailwindcssを使用 githooksのpre-commitを使用してcommit時に自動実行課題対処

Slide 39

Slide 39 text

プロジェクトへの導入方法やスタイリング方法のチュートリアルを作成 https://github.com/excitejp/media-tutorial-tailwind-css 導入教材としての開発指針を作成 https://excite-japan.atlassian.net/wiki/spaces/MED/pages/1225031752/Tailwind+CSS 戦略はどう活きているかと課題 03 課題への取り組み導入にはCLIに触れる必要があり、デザイナーにとってはとっつきにくいチュートリアルや開発指針の整備課題対処

Slide 40

Slide 40 text

まとめ 04 フロントエンドの理想状態は「要素を一発で消せる状態」なのでは消しやすいは追加や拡張もしやすいにつながる CSS・JSをHTMLテンプレートにまとめると理想に近づく実現方法の一つにTailwind CSS、Alpine.js、htmxがあるこれらにより要素間の影響がCSS、JSも含めてなくなるので、自分が把握していない要素でも怖がらずに手を加えられる命名に関する議論も最小限に留められるのでチーム開発だからこそ活きる

Slide 41

Slide 41 text

ご紹介した技術のテックブログでの発信にも注力しています Tailwind CSS 23記事 7記事 6記事 Alpine.js htmx

Slide 42

Slide 42 text

ご清聴ありがとうございました！