FROKAN x UIT #1 登壇資料
CSS設計全盛期に学ぶフロントエンド設計FROKAN x UIT #1 @Takepepe
View Slide
About Me■ Takefumi Yoshii / @Takepepe■ DeNA / DeSC Healthcare■ Frontend Engineer■ TypeScript Meetup JP member
■ コンポーネント設計に悩んでいる方■ まだまだ現場でCSS設計が必要な方■ CSS設計 + VDOMライブラリ折衷設計をしたい方■ CSS設計を全く知らない・興味がない方本日の対象聴講者あらかじめお断り：CSS設計がオワコンという話では絶対ありません
もう不要？CSS設計
CSS設計をご存知でしょうか？CSS設計といえば、秩序をもたらすものとして、今もなお現場で活用されているノウハウです。もう不要？CSS設計CSS設計を思い出す
メジャーなCSS設計はつぎの様なものがありました。いずれも、それぞれ解決した課題がやや異なります。MCSSSMACSSITCSSBEMFLOCSSOOCSSもう不要？CSS設計CSS設計を思い出す
複数のCSS設計の良いとこどりをした独自設計も、多くの現場で採用されていたと聞きます。MCSSSMACSSITCSSBEMFLOCSSOOCSSもう不要？CSS設計CSS設計を思い出す
CSS設計を知らず「Scoped CSS ネイティブ」としてフロントエンド開発に参入される方も多い現在。CSS設計に関する話題は減りました。もう不要？CSS設計Scoped CSS ネイティブな現在
しなしながらCSS設計には、現在にも通じるコンポーネント設計のノウハウが凝縮されていたことは、あまり語られていません。もう不要？CSS設計Scoped CSS ネイティブな現在
「CSS設計全盛期・最新のソリューション」を比較すると「設計の本質は変わっていない」ということを、本日主張していきたいと思います。もう不要？CSS設計Scoped CSS ネイティブな現在
線を引く技術
これより紹介する「4つのCSS設計」それぞれが解決した課題は、どんな設計にも共通する本質を突いています。線を引く技術メジャーなCSS設計
線を引く技術名前空間の担保（BEM）依存性の注入（SMACSS）関心の分離（FLOCSS）責務の線引き（ITCSS）
名前空間の担保（BEM）依存性の注入（SMACSS）関心の分離（FLOCSS）責務の線引き（ITCSS）線を引く技術
ModifierElementBlock名前空間の担保（BEM）線を引く技術CSS設計でまず一番気にかけなければならないのは、名前空間の担保です。とても冗長な命名規則は初めは「正直キモイ」と私も思いました。
競合しない名前空間（Block）で「線引き」することにより、外部から影響を受けない、安全性を担保しました。（BEM は Block、Element、Modifierの略）ModifierElementBlock線を引く技術名前空間の担保（BEM）
プライベートな名前空間に指定が閉じられるので、外部に影響をおよぼす憂慮なく、コンポーネントスタイルを書くことができます。ModifierElementBlock線を引く技術名前空間の担保（BEM）
最新のソリューションによる Scoped CSS の再現は、モジュールバンドラーのハッシュ値付与により、この名前空間を管理しているにすぎません。線を引く技術名前空間の担保（BEM）ModifierElementBlock
話が少しそれますが、Redux・Vuex などの状態管理ライブラリでも、名前空間で影響範囲が閉じられています。冗長な命名は、グロバールスコープにおける設計の基礎です。線を引く技術名前空間の担保（BEM）ModifierElementBlock
SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。ModuleLayoutBaseThemeState線を引く技術依存性の注入（SMACSS）
コンポーネント粒度に応じた「線引き」がなされました。Layout の分離は、マルチデバイス対応に効果的でした。ModuleLayoutBaseThemeState線を引く技術依存性の注入（SMACSS）
コンポーネントは、親要素・子要素の存在を知りません。レイアウトの責務が明瞭に分断されました。ModuleLayoutBaseThemeState線を引く技術依存性の注入（SMACSS）
特筆すべきなのは、BEM では許容していなかった外部からの依存性注入です。ModuleLayoutBaseThemeState線を引く技術依存性の注入（SMACSS）
（.is-）プレフィクスによる状態管理とテーマの注入で、BEMよりも柔軟な指定を許容しました。ModuleLayoutBaseThemeState線を引く技術依存性の注入（SMACSS）
Theme Provider / Container Component で依存性を注入する、最新のソリューションとも似ています。ModuleLayoutBaseThemeState線を引く技術依存性の注入（SMACSS）
SMACSS より多くの線をもつ、FLOCSS。関心（コンテキスト）の「線引き」がなされました。LayoutFoundationUtilityProjectComponent線を引く技術関心の分離（FLOCSS）
大分類「Object」に含まれる「Component / Project / Utility」は関心範囲の広さで区分されています。LayoutFoundation線を引く技術関心の分離（FLOCSS）UtilityProjectComponent
「Project」に定義された指定は、プロダクトの成長に伴い関心範囲が広がることがあります。LayoutFoundation線を引く技術関心の分離（FLOCSS）UtilityProjectComponent
繰り返される指定は、汎用的なものとして線引きされ、関心範囲の広い方へと移行します。LayoutFoundation線を引く技術関心の分離（FLOCSS）UtilityProjectComponent
CSSプリプロセッサが支えた関心範囲の移行。最新のソリューションでは Module システムが移行を支えます。FoundationUtilityProjectComponentLayout線を引く技術関心の分離（FLOCSS）
最も後発の ITCSS は、最も「線引き」が多いCSS設計です。SettingsTrumpsComponentsObjectsTools Generic Base線を引く技術責務の線引き（ITCSS）
このぐらいの線の量になると、プロダクトによっては過剰、といえるレベルです。SettingsTrumpsComponentsObjectsTools Generic Base線を引く技術責務の線引き（ITCSS）
このCSS設計は最後の課題であるセレクター詳細度の管理を解決しました。SettingsTrumpsComponentsObjectsTools Generic Base線を引く技術責務の線引き（ITCSS）
CSSプリプロセッサ を利用することが前提であり、変数・mixin・function のみが定義されたレイヤーがあります。SettingsTrumpsComponentsObjectsTools Generic Base線を引く技術責務の線引き（ITCSS）
これは最新のソリューションでいうユーテリティ関数です。責務の線引きが色濃く現れた設計といえます。SettingsTrumpsComponentsObjectsTools Generic Base線を引く技術責務の線引き（ITCSS）
名前空間の担保（BEM）依存性の注入（SMACSS）関心の分離（FLOCSS）責務の線引き（ITCSS）4つのCSS設計が引いた線を確認しました。線を引く技術受け継がれるソリューション
名前空間の担保（Scoped CSS）依存性の注入（Dependency Injection）関心の分離（Atomic Design）責務の線引き（Module System）最新のソリューションと比較すると、本質は変わっていません線を引く技術受け継がれるソリューション
設計の基本となるのは「線を引く技術」です。線を引く技術
線の数はプロダクト毎に異なり、成長過程で「増減」します。線を引く技術
各設計が示した「線引き」を参考にしつつプロダクト毎に判断が必要です。線を引く技術
「規約」で線を引いていたCSS設計は、JavaScript Module システムに移管することに。線を引く技術
線を引き直す技術
最新のソリューションがもたらした、CSS設計全盛期に叶わなかった課題解決は何でしょうか？VDOM ライブラリが救ったのは、jQuery による混沌とした実装だけではありません。線を引き直す技術VDOM ライブラリの福音
ある機能追加を境目に、特定範囲だけの関心ごとであった指定が、広範囲に広がる事案が発生します。「リファクタリング」です。線を引き直す技術VDOM ライブラリの福音
CSS設計により引かれた線はリファクタリングを容易にしました。ただ、設計規約だけでは事故を防げず、大量の browser e2e テストによる担保が余儀なくされました。線を引き直す技術VDOM ライブラリの福音
VDOMライブラリがもたらした福音は、単体テストの優位性です。Unit Test をはじめ、Visual Regression Testing まで、必要なものを選べる時代です。線を引き直す技術VDOM ライブラリの福音
さらに、TypeScript による型安全でテストの守備範囲が大幅に削減。リファクタリングがし易い足場が整ってきました。線を引き直す技術VDOM ライブラリの福音
あらためてCSS設計が担っていたことを確認します。線を引き直す技術VDOM ライブラリの福音名前空間の担保（Scoped CSS）依存性の注入（Dependency Injection）関心の分離（Atomic Design）責務の線引き（Module System）
コンテキストの拡大・責務の委譲という「境界線」はCSS設計全盛期に見出されていました。線を引き直す技術名前空間の担保（Scoped CSS）依存性の注入（Dependency Injection）関心の分離（Atomic Design）責務の線引き（Module System）VDOM ライブラリの福音
「線を引き・引き直す」ことを繰り返すことで、そのときの最適な設計を導くことができます。線を引き直す技術名前空間の担保（Scoped CSS）依存性の注入（Dependency Injection）関心の分離（Atomic Design）責務の線引き（Module System）VDOM ライブラリの福音
現在のフロンエンド開発現場は、エコシステムの拡充により、圧倒的なリファクタリング優位性を手に入れました。線を引き直す技術VDOM ライブラリの福音名前空間の担保（Scoped CSS）依存性の注入（Dependency Injection）関心の分離（Atomic Design）責務の線引き（Module System）
線を引き直す技術設計で最も重要なのは「線を引き直す技術」です。
CSS設計全盛期に確立されなかった「線を引き直す技術」は、エコシステムの拡充により進化しました。線を引き直す技術
プロダクトと向き合う設計
結合度が低く・粒度が小さいほど、リファクタリングはしやすくなります。「技術面」で可能なことは、ここまでです。プロダクトと向き合う設計壁を壊すディレクション
「継続的リファクタリングが設計の解」としても、リファクタリングを阻む要因は「技術面」以外に。BIZ都合であったり、人員リソース都合であったり…残されたリファクタリングの障壁プロダクトと向き合う設計
リファクタリングを行いリリースに至るためには、QAが必要になることもあるでしょう。そのため、リファクタリング意義を言語化しチームで共有しなければいけません。壁を壊すコミュニケーションプロダクトと向き合う設計
技術的に良い設計であっても、言語化することで、不要なリファクタリングであることに気がつくかもしれません。外部要因も、設計の一部です。壁を壊すコミュニケーションプロダクトと向き合う設計
新しいソリューションの導入にしても、作り変えにしても、常日頃からその必要性を訴え実現可能なタイミングを狙っていきましょう。機会は与えられるものではなく作るものです。壁を壊すディレクションプロダクトと向き合う設計
まとめ
コンポーネント設計に悩んでいる方へまとめコンポーネントの粒度がまちまちなのは結構なことです。境界線を見つけた時にリファクタリングしましょう。はじめから汎用化するのは、オーバーエンジニアリングかもしれません。
まだまだ現場でCSS設計が必要な方へまとめjQuery + CSS設計でも設計の本質を見抜いていれば、きちんとした設計は可能だと思います。JavaScript Module System に頼れない分不利ですが、そのぶん設計力が試されます。頑張ってください。
CSS設計 + VDOMライブラリ折衷設計をしたい方へまとめScoped CSS と CSS設計が折衷になると厄介かもしれません。思い切って「より枯れている」CSS設計のみで実現可能か検討してみてください（Scoped CSS だけ使わない）コンポーネント指向とCSS設計はとても相性が良いです。
CSS設計を全く知らない・興味がない方へまとめCSS設計が CSS のためだけではなかったことがお分かり頂けたかと思います（そもそも呼称が悪い）。CSS設計に後戻りすることはこの先ないでしょうが、設計に悩んだ時、今日の話が役に立つかもしれません。
設計をこれから担当する皆さんへまとめ基本的に最新のソリューションを選びましょう。もしそれが叶わないのなら、CSS設計全盛期を思い出しましょう。今後訪れるフレームワーク移管は、線引きがしっかりされていれば、乗り越えられると思います。
設計をこれから担当する皆さんへまとめ設計は技術要因だけでは成り立ちません。議論を重ね・プロダクトの現状と向き合い、各々の最適解を見つけましょう。
議論に根をおろし…
Slackと共に生きよう…
CIと共にリリースを越え…
型と共にリファクタをうたおう
ご静聴ありがとうございました
takefumiyoshii
ryohatanmonolog
spinscale
.png){kind=avatar}
jisungbin
bitkey
bun913
nyankotaro
niryuu
doradora09
takmin
salaboy
caori_t
bnasslahsen
sachag
chrisshort
jonyablonski
jakevdp
iamctodd
stephaniewalter
lemiorhan
robhawkes
pauljervisheath
tenderlove
jcasabona
carmenintech