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

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

Slide 23

Slide 23 text

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

Hello World

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Hello World

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

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

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