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

Day#5 ~ Jsut-in-Time Mode ~

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

今回はJust-in-Time Modeについてです。

TailwindCSSを語るにあたってJust-in-Time Mode（以下JIT）は避けては通れない様です。それほど重要な機能なんです。

key word

ビルドタイムが早い、色んなバリアントが使える、cssに数値入力できる、パフォーマンスが良くなる、watch

Goal

今回のゴールはwatchモードを導入してhtmlを保存して変化があれば自動でビルドしてくれる機能をつけるです。

今回も教材に使用したのはしまぶーさんのYouTubeです。ほんといい教材ですよね。ありがとうございます。

なお、2022/6月の時点でTailwindはv3です。v2ではpreviewであったJITがv3では標準になっていますのでここではJITを使うことのメリットとwatchの仕方について書くこととします。

JITのメリット

v3で標準搭載されたということはそれだけ多く支持されていたからということです。

JITのメリットを紹介します。

ブラウザのパフォーマンスが良い

v2ではデプロイされたcssの記述が非常に大きく行数にして約18万行ありました。実際に必要なものがたった2つだけであったとしても、いちいちこれを読み込んでいたわけです。・・・非効率的。

これを解決したのがJITです。

動画内ではJITを用いることでその行数は500程度となっていました。

自分のイメージですがhtmlからひつようなcssプロパティだけを読み取ってデプロイする様なことだと思います。

ビルドタイムが早くなる

これは、上記のメリットから来るものです。18万行読み込んでいたものが少なくなったことによるためです。

色んなバリアントがつかえる

これは組み合わせができる様になったということです。

例えば、ホバーとメディアスクリーンを一緒に書くみたいな。

/* ホバーしたら色が変わる */
class="hover:bg-purole-200"

/* mdサイズ以上の時だけホバーしたら色が変わる */
class="md:hover:bg-purole-200"

こんなことができる様になったのはJITのおかげです。

widthやpaddingに数値入力ができる

これは意外だったのですがJITを使わないと数値入力できなかったのです。

JITを導入することで任意の数字を入力できる様になりました。これにより自由度が高くなりました。

class="p-[113px]"

class="bg-[#1da1f1]">

watch機能の追加

JITを用いることでデプロイ後には必要なCSSプロパティのみが記述されるようになりました。

このためhtml中のスタイルを変更してもすぐには表示に反映されなくなりました。詳しくはしまぶーさんの動画参照。このためwatchモードを追加すると非常に便利に開発を進めることができます。

変更するのはpackage.json中のスクリプト部分です。

  "scripts": {
    "dev": "TAILWIND_MODE=watch postcss styles.css -o dist.css -w"

まあ、名前はなんでも良いのですが前回のbuildからdevに変更しています。

付け加えたのは冒頭のTAILWIND_MODE=watchと末部にある -w になります。

これで変更があった場合自動でデプロイしてくれます。

まとめ

JITは高速化と自由度を高めるための重要なものであるということがわかりました。

watchを導入することで開発が楽になりました。

しまぶーさんの声を借りるならJITはサイコーということです。

github

ここまでのコードをgithubに載せておくとする。

https://github.com/iwkt/react-tailwindcss

参考記事

https://zenn.dev/unreact/articles/tailwindcss-customization-just-in-time