React 開発日記。開発からデプロイまで。#3

Day#3 ~ Tailwind ~ Bootsrtapとの違い

わんばんこ。みくのすけです。

Day#2でざっくりとTailwindの概要について学習しました。独特のルールに沿ってCSSを書く感じです。

例えば

<p class="text-blue-500 text-3xl font-bold underline">Hello world!</p>

本来であればclassName=”hoge” など命名後にstyleをあてますが、何をどうするのように直感的な書いていきます。

上記コードでtext-blue-500 なら、テキストの色を青にするんだなと言うことがわかります。

どうです、ここで思い出しませんか?

そうBootstrap。Bootstrapでのコードを見てみましょう。

<button class="btn btn-dark" type="button">Dark</button>

こちらもclassの名前にbtn-darkでボタンの色はダークなのだなと言うことがイメージできます。

似てますよね。で、このあたりはその様に思っている人が多いらしく、しまぶーさんがしっかり解説しています。

詳しくは解説をご覧ください。なのですが一応ポイントだけを押さえておくと以下の違いがあります。

  1. 柔軟性
  2. file-size
  3. JSの依存性

柔軟性

Bootストラップの方が簡単に書ける。お弁当に例えると

お客「のり弁ちょうだい」

お店「はーい、のり弁ね」

お客はのり弁とオーダするだけで良い。

のり弁には『ご飯、のり、白身魚フライ、ちくわてん、ごぼうのきんぴら』がすでにパッケージになっているからだ。

これに対して、Tailwindだと注文する際に、

お客「えーとねご飯少なめ」

お店「ご飯少なめ」

お客「白身魚」

お店「はい、白身魚」

お客「てくわてん一本と」

お客「はい、ちくわてん一本」

・・・

のようにパッケージ化されていないから一つ一つオーダーすることになる。

これ一見Bootstrapの方が便利そうに見えるがこの辺は簡単さと柔軟性のトレードオフとなる。一つ一つオーダするためオリジナルのお弁当を作ることが可能になる。

file-size

purge CSSを用いるTailwindのほうがサイズが少なくなってパフォーマンスが高くなる可能性が高いそうです。purge CSSとはつかわないCSSコードを省いてくれるもの。認識合ってるかな。

JavaScriptへの依存性

ReactやVueなどを使うときに影響が出てくる様です。

Bootstrapは依存性あり、Tailwindはなし。

Bootstrapは依存している分だけ自分たちで管理できない部分が出てくる。例えばウインドウが開いているとか閉じているとかの状態管理をコントロールできないとか。あと、JSでうまくやってくれているがReactやVueなどJSフレームワークで開発する時はこれが障害となる。自分たちで管理したいんだがこれコントロールできないたためBootstrap側と競合することもある様だ。

まとめ

Tailwindの方がBootstrapにくらべ柔軟性が高い。JSフレームワークで開発することが多くなった現在、自分たちでコントロールするTailwindのほうが使い勝手が良い。

以上BootstrapとTailwindの違いでした。次回こそ実際にTailwindを動かすぞと。

Follow me!

みくのすけ

スターウォーズ日本人CGデザイナーである成田さんの「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」という言葉に心を動かされる。 独学でpythonを始めるも、そもそもhtmlが分からないと話にならないと気づく。そこからhtml、scss、javascript とコーディング、デザインを始める。 アプリ開発が目標。

React 開発日記。開発からデプロイまで。#3」への2件のフィードバック

  • 2022年6月24日 @ 2:43 PM
    パーマリンク

    短期間でものすごい的確にコツを押さえていかれてますね❗️
    自分の知っているもの(Bootstrap)と比べながら学習する方法、とても参考になります。

    返信
    • 2022年6月25日 @ 6:57 AM
      パーマリンク

      ふみさん。コメントいただけるなんてほんとありがとう。
      似ているな〜って思っている人はたくさんいると思います。
      なのでYouTubeでも取り上げられていました。お弁当のくだりはオリジナルです。
      まあ、ぼちぼちいきます。褒め上手なふみさんへ。

      返信

ふみ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

PAGE TOP