【Vite】Vite + React + TypeScript + vanilla-extract で開発環境を整える

はじめに

みなさんは、最近話題の「Vite」というビルドツールを使って、サイトを作りたいと思ったことはありますか？

私は、先日ゼロから開発環境を整える機会があり、その時に「Vite」に「vanilla-extract」を使って開発環境を作ってみました。

この記事では、その時にどのような開発環境を作ったのか、開発してみての感想などをまとめようと思います。

Vite とは？

Vite（ヴィート）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

（引用：Vite - はじめに）

vanilla-extract とは？

vanilla-extract は、TypeScriptをプリプロセッサとして使用しているゼロランタイムCSSinJSです。

開発環境を整える

Vite + React + TypeScript + vanilla-extract の環境を整える方法をまとめます。

1. Node.js をインストールする

以下のリンクから、Node.jsをインストールしてください。

【インストールされているか確認する】
ターミナルで、以下のコマンドを入力して、インストールしているバージョンが表示されたら、インストールが完了しています！

terminal.

node -v

2. プロジェクトをつくる

① プロジェクトを作る

以下のコマンドを入力し、画面にしたがって、入力してください。

terminal.

npm create vite@latest

上記のコマンドを入力すると以下のようなことが聞かれます。

• Project name：プロジェクトの名前
  • プロジェクトの名前を決め、入力してください
• Select a framework：フレームワークを決めます
  • Vanilla・Vue・React・Preact・Lit・Svelte・Solid・Qwik・Othersからフレームワークを決めます
  • この記事では、 React を選択して進めています
• Select a variant：使う言語を決めます
  • TypeScript・TypeScript + SWC・JavaScript・JavaScript + SWC・Remixから言語を決めます
  • この記事では、TypeScript + SWC を選択します

② @vitejs/plugin-react-swc のプラグインをインストール

以下のコマンドを入力し、@vitejs/plugin-react-swc のプラグインをインストールします。

terminal.

npm i -D @vitejs/plugin-react-swc

3. vanilla-extract を使えるようにする

① vanilla-extractをインストール

以下のコマンドを入力し、vanilla-extractをインストールします。

terminal.

npm install @vanilla-extract/css

② Viteとvanilla-extractを統合するプラグインをインストール

以下のコマンドを入力し、Viteとvanilla-extractを統合するプラグインをインストールします。

terminal.

npm install --save-dev @vanilla-extract/vite-plugin

③ 設定ファイルを変更する

vite.config.ts というファイルを以下のように書き換えます。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// ↓追加
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'

export default defineConfig({
  plugins: [
    react(),
    // ↓追加
    vanillaExtractPlugin()
  ],
})

4. 開発環境を立ち上げ、スタイルを変更する

① 開発環境を立ち上げる

以下のコマンドを入力し、開発環境を立ち上げる

terminal.

npm run dev

② vanilla-extractのファイルを作り、スタイルを作成する

style.css.tsのようなファイルを作り以下のようなスタイルを記述します。

import { style } from "@vanilla-extract/css";

export const Styles = {
  button: style({
    fontWeight: "bold",
  })
}

③ スタイルを反映させる

反映したいファイルに、インポートし、className にスタイルを反映させる

import { Styles } from './App.css.ts'

function App() {
  return {
    <button className={Styles.button}>
  }
}

まとめ

viteは、日本語のドキュメントも充実していて、すごく使いやすかったと感じました。

vanilla-extract は、今回はじめて使ったのですが、selector周りやメディアクエリ周りが少し直感的ではなく、ややこしく感じました。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。