【フロント_1日目】Tailwind CSS_1冊目

こんにちは投資ロウトです。

背景

・諸事情があり、急いでTailwind CSSを学ぶ必要性に迫られています。
※Dockerも早急に学ぶ必要があり、並行で進めていきます。
※他の優先順位でstopする可能性あり

進捗状況

少しずつ進めていっていますが、現在の進捗は以下になっています。

①要件定義：1冊
②設計：1冊
③システムビジネススキル：3冊
④インフラ：2冊 + 1冊進行中(Docker)

ユーティリティファーストCSSとは

ユーティリティファーストCSS・・・マークアップをする際に、「ユーティリティクラス」と呼ばれるクラス群のみを基本的に用いるアプローチのこと。

セマンティックなアプローチ・・・XXXといったクラスを作り、その中で色や大きさを定義すること

.text {
    font-size: 14px;
    font-weight: bold;
}

<p class="text">ここにテキストを入力してください</p>

しかしセマンティックなアプローチとは違い、ユーティリティークラスは以下のように提供するとのこと。

<p class="text-sm font-bold">ここにテキストを入力してください</p>

ユーティリティーファーストを用いるメリットとは

・クラス名の考慮が必要ない
→確かにいちいち考える手間暇は楽になるなと思いました。

・レビュー等や実装の際に、HTMLとCSSを同時に見なくて良い
→一箇所を見るだけでレイアウトのことを考えられるのは、確かにでかいなと思いました。

・影響範囲のスコープが限定的である
→確かにクラスに直接する記法であれば、外部でcssを呼ばれる影響範囲等の調査などは不要だとは思いました。

ReactやVueの歴史

初期のReactやVue.jsはスタイリングがネックだったそうで、マークアップや挙動はコンポーネントに閉じて実装できたにも関わらず、CSSがグローバルだったのが、問題だったそうです。

ただグローバルではないCSSを可能にするShadow DOMというアイデアもあったそうですが、Internet Explorerが機能開発をストップしているにも関わらず、一定のシェアを持っていたのも原因していたそうです。

そのため、ReactではCSS Modulesという仕様がよく使われるようになったとのことです。

また同時期にCSS Modulesと同じくしてCSS in JSというのが発展していったとのことです。これはスタイリングそのものもJavaScriptで定義するアプローチだそうです。

また様々な要素から、すべてのスタイリングは、衝突しないクラスによって行われるべきというのが、コンポーネント時代でも有効であるというお話でした。

Tailwind CSSが提供するもの

あくまでTailwind CSSはスタイリングはクラスを用いて行うとのこと。

またTailwind CSSは最終的に最小限の.cssファイルを出力するとのことでした。

またTailwind CSSはBootstrapに似ているというお話もありますが、その従来のCSSフレームワークは、あくまでクラスを補助する位置付けだったそうですが、Tailwind CSSにとってコンポーネントは、よく使うUIを抽象化するためのものだそうです。

またBootstrapと違い、Tailwind CSSは拡張性を念頭に置かれた設計がされているというお話もありました。

また各ユーティリティークラスを設定すると、大量のCSSが生まれそうということが想定されると思いますが、これらが起きないように、CSSをビルドする際に、対象ファイル内で利用されているクラスだけを最終的な出力にすることによって、抑えているというお話でした。

Tailwind CSSがやらないこと

・便利なUIコンポーネントはない
→Bootstrapのように、楽に開発ができるものを想定していると、がっかりくるとのお話でした。

・CSSがどういったものがあるか理解する必要がある
→CSSに存在するプロパティや、何ができるか把握していないと、うまくスタイリングすることもままならないというお話でした。

と短いですが章が変わるので、以上で学習を区切りたいと思います。ご精読ありがとうございました。焦らずコツコツ頑張っていきたいと思います。