新しいReactではcreate-react-appによる新規プロジェクト作成は非推奨になり、他のフロントエンド開発フレームワークの利用を推しています。今回久々にReactの触る機会があったのでViteを使ってみました。Viteはフロントエンドビルドツールで「ヴィート」と呼称します。

• Vite | 次世代フロントエンドツール

Viteの導入

Node.jsが導入されている前提で以下の環境にて構築。

• Node.js v22.x.x

まずターミナルで構築するディレクトリに移動し、以下のコマンドをタイプ。

$ npm init vite@latest

プロジェクトの名前を聞かれるので、適切な名前を入力。

? Project name: › omikuji

利用するフレームワーク（Vanilla,Vue,React…）を聞かれるので上下カーソルで選択しReactを選択。さらにJavaScriptかTypeScriptかを聞かれるので同様に選択。

? Select a framework: › - Use arrow-keys. Return to submit.

Need to install the following packages:
create-vite@6.0.1
Ok to proceed? (y) y
✔ Project name: … omikuji
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

最後に構築手順が表示されるので、その案内通りにコマンドを実行します。

Done. Now run:

 cd omikuji
 npm install
 npm run dev

まずプロジェクトのディレクトリをカレントに。

$ cd omikuji

デフォルトの状態だとパッケージモジュールがインストールされないのでパッケージをインストール。

$ npm install

終わったら開発環境を立ち上げます。

$ npm run dev
> omikuji@0.0.0 dev
> vite

 VITE v6.0.2  ready in 148 ms
 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

表示されたURLにブラウザでアクセスします。

これで終わりです。簡単ですね。

スクリプトコードを触ってみる

./src/App.jsx を適当に編集します。ディレクトリ構成やファイルの構成や中身はほぼ普通のCreateReactAppで作った時と同じっぽいです。適当におみくじを作成しました。

import { useState } from 'react'
import './App.css'
function App() {
 const [flg, setFlg] = useState(false);
 const [omikuji, setOmikuji] = useState();
 const Omikuji = () => {
  const result = ['大吉','吉','中吉','小吉','末吉','凶','大凶'];
  setOmikuji(result[Math.floor( Math.random() * result.length)]);
  setFlg(true);
 }
 return (
  <div>
   <h1>おみくじにゃ🐱</h1>
   <p><button disabled={flg} onClick={Omikuji}>引くにゃ</button></p>
   <p>{omikuji}</p>
  </div>
 )
}
export default App

npm run buildのコマンドでビルドできます。distというディレクトリが生成されます。

$ npm run build
> omikuji@0.0.0 build
> vite build
vite v6.0.2 building for production...
✓ 32 modules transformed.
dist/index.html                   0.48 kB │ gzip:  0.34 kB
dist/assets/index-****.css    0.75 kB │ gzip:  0.39 kB
dist/assets/index-****.js   145.24 kB │ gzip: 47.18 kB
✓ built in 209ms

Viteは開発環境を即時起ち上げることができ、尚且つビルドや実行速度も速く、パフォーマンスも向上しており、開発効率が飛躍的に向上します。複雑だった設定もシンプルになっているので、次回からはViteを勉強しつつこれで開発をしていこうかなと考えたりしています。

おしまい♥

タグ：npm(Node.js)React