(Vue3 / React) + Vite + WindiCSSで爆速Web開発

Vite って？

Vite は Vue.js の作者、Evan You さんが開発している Web プロジェクトに高速でスリムな開発体験を提供することを目的としたビルドツール です。
Vite（発音 /vit/ : ヴィート）フランス語で「高速」を意味する言葉に由来します。

初期起動や HMR がとても高速で一度体験すると離れられないかもしれません。
僕は Vue Cli や Nuxt に戻りたくなくなりました。

対応するプラグインを入れることで Vue, React, Preact 等を動作させることが可能です。
こちらは公式ページを見てもらうのが最も分かりやすいと思います。
https://vitejs.dev/

Windi CSS って？

Windi CSS は Tailwind CSS 2.0 互換のコンパイラです。
Vite のもつスピード感にマッチし、Vite コミュニティで推されています。

https://windicss.netlify.app/guide/introduction.html

リンク先に詳しく乗っていますが、この記事で紹介する主な特徴は次の３点です。

1. 初期ロード、HMR の速さ
2. Tailwind CSS との互換性
3. Utility Groups 等の便利な独自機能

なんといっても一番の特徴である速さについて見てほしいです。
下のツイート、Tailwind を使用したプロジェクトのロードに比べてどうでしょう？
とても速くないですか...。

https://twitter.com/antfu7/status/1361398324587163648

UtilityGroups とは下のコードように記述できる機能です。

<div class="bg-white font-light sm:hover:bg-gray-100 sm:hover:font-medium" />
↓
<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)" />

ブレイクポイント等に応じて変更するスタイルが増えた際にもコンパクトにまとめることができ、コードの見通しが良くなります。
これも便利なんですよ。

ぜひ使ってほしい。

追記: WindiCSS の日本語記事！
WindiCSS についてまとまっております。詳しく知りたい方はご参照ください。
https://zenn.dev/hannoeru/articles/ce1a88a08b8dc4

実践

今回のサンプルプロジェクトの Git リポジトリです。
https://github.com/suzukey/vite_windi_sample

1. プロジェクト作成

まずは Vite のプロジェクトを作成します。
次のコマンドを入力し、vue, react どちらかお好きな方を選択してください。

npm init @vitejs/app  # yarn create @vitejs/app

2. Windi CSS インストール

npm i vite-plugin-windicss -D  # yarn add vite-plugin-windicss -D

// vite.config.js
// ...
import WindiCSS from "vite-plugin-windicss"

export default {
  plugins: [
    // ...
    WindiCSS(),
  ],
}

• Vue

// main.js
+ import "windi.css"

• React

// main.jsx
- import './index.css'
+ import "windi.css"

3. Vite の起動

npm run dev  # yarn dev

4. View の作成

• Vue

<!-- App.vue -->
<template>
  <div class="text-center my-8 flex justify-center">
    <div class="px-8 py-6 rounded-2xl bg-gray-600 text-gray-100">
      <p>
        <a
          rel="noreferrer"
          href="https://github.com/suzukey/vite_windi_sample"
          target="_blank"
        >
          Vite + Vue3 + WindiCSS
        </a>
      </p>
      <p>
        <em class="text-sm opacity-75">Soooo fast!</em>
      </p>
    </div>
  </div>
</template>

• React

// App.jsx
import React from "react"

function App() {
  return (
    <div className="text-center my-8 flex justify-center">
      <div className="px-8 py-6 rounded-2xl bg-gray-600 text-gray-100">
        <p>
          <a
            rel="noreferrer"
            href="https://github.com/suzukey/vite_windi_sample"
            target="_blank"
          >
            Vite + React + WindiCSS
          </a>
        </p>
        <p>
          <em className="text-sm opacity-75">Soooo fast!</em>
        </p>
      </div>
    </div>
  )
}

export default App

これだけ！導入も簡単ですね！
爆速ロードの開発環境を手に入れることができました。

さいごに

いかがでしたか？
Vite はこの先とっても楽しみなプロジェクトの１つです。

現在 Nuxt でも活発に対応が進んでいるみたいですよ。
https://github.com/nuxt/vite

今回紹介したように Vue だけでなく React 等のプロジェクトでも使用できますので、国内のいろいろなところで導入事例が増えて行くといいなと思っています！

間違い等ありましたら、コメントでご指摘いただけますと幸いです。

衝撃を受けるスピード感ぜひ体験してみてください。