⚡
vite使ってみた

2025/10/21に公開
202510月某日

 はじめに前回は、サークルのイベントでハッカソンをしたのだが、その際にReact,Node.jsを使った。しかし私はもともとReactのプレーンしか知らず、NextもVueも知らなずに全部AIに書かせていたが、やはりコードがぐちゃぐちゃになったり、何をやっているのかわからず、学習には向いていないなと感じた。その時、viteというビルドを楽にしてくれるものを使い、意外と便利だったのでこれを機に学習してみようということで今回この記事を書く。
ということでまずはViteについてから

 Viteとは何かまぁざっくりいうと、ビルドするためのアプリである。今は、next.jsとか多くの便利機能が揃ったライブラリもあるにはあるが、逆にいうと自由度が低いため多くのライブラリをキメラ化して使いたい場合はこういう単品のviteとかもおすすめである。それはともかく、viteというものはビルド高速化のためのものであり、Reactの環境を素早く、便利にしてくれるものである。
https://zenn.dev/comm_vue_nuxt/articles/what-is-vite
https://qiita.com/tomada/items/91c489e41a20a2fd11ea
いい感じにまとまっていた記事があったので貼ってみた。

 Vite使い方
 Viteインストールviteオンリーをインストール
npm install --save-dev vite 
vite テンプレートと共にインストール
npm create vite
npm create vite@latest [ファイル名]
 npm create vite       

> npx
> create-vite

│
◆  Project name:
│  vite-turtorial-blog
│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others

◆  Select a variant:
│  ● TypeScript
│  ○ TypeScript + React Compiler
│  ○ TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + React Compiler
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
│  ○ RedwoodSDK ↗
│  ○ RSC ↗
└
◆  Use rolldown-vite (Experimental)?:
│  ○ Yes
│  ● No
└
◆  Install with npm and start now?
│  ● Yes / ○ No
└

 Select a framework:Vanilla（＝素のJavaScript）
余計なフレームワークなし、ただのJS + HTML + CSS。
Vue
Reactと並んで超人気のフロントエンドフレームワーク
React
世界で最も人気なフロントエンドライブラリ。
Preact
React互換の「軽量版」。
Lit
Web Components ベースのモダンUIライブラリ。
Svelte
コンポーネントをビルド時に最適化して、実行時は最小限のコードになる。
Solid
Reactライクだけど、実行時が超軽量なフレームワーク。
Qwik
超高速・超省メモリを目指す最新フレームワーク。
Angular
Google製のフレームワーク。フルスタックで、ルーター・DI・フォーム・ビルド・テストまで全部入り。
Marko
eBayが開発した SSR 特化フレームワーク。

 Select a variant:TypeScript（デフォルト）
そのまま TS を使う最小セット。
TypeScript + React Compiler
TSに加えて React Compiler（React公式の新最適化コンパイラ）前提の設定。
TypeScript + SWC
TSを SWC（Rust製トランスパイラ） で超高速にビルドする構成。
JavaScript
素の JS。型は使わない。
JavaScript + React Compiler
JSで React Compiler を使う構成。
JavaScript + SWC
JS を SWC で高速ビルド。
React Router v7
React の定番ルーターの最新版系。
TanStack Router
型推論が強力で TypeScriptのDXが非常に良いモダンルーター。
RedwoodSDK ↗
RedwoodJS（フルスタックFW）のルーティング/SDK。
RSC ↗（React Server Components）

サーバでコンポーネントを実行して、クライアントに最小限だけ送る方式。

 Use rolldown-vite (Experimental)?:新しいビルドエンジンであるrolldownを使うかと言う確認
本来、Rollupを使って本番ビルドをしているが、その代わりの開発しているRolldownにするかの確認

 Install with npm and start now?これはnpm installをしてさらにすでにもうlocalhostで開発サーバーを立ち上げるかの確認

 開発サーバーの立ち上げ上のコマンドを打った場合まだ、ローカルサーバーのモジュールがインストールされていないのでこれをする（Install with npm and stat nowを選んだ方は飛ばしていい）
$npm install
ローカルサーバーのrun
$npm run dev
runのコマンドの変更とポート番号の変更

package.jsonをいじる

以下の場所を変える
"scripts": {
    "start": "vite --port 8080" , //ここが元々{"dev": "vite"}だった
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

 デプロイ周りについてデプロイするには静的ファイル配信をしなければなりません。それの準備を行うのが以下のコマンドです。
#build
npm run build
そして、buildする前に静的ファイルを確認するのが以下のpreviewコマンドです
npm run preview
package.jsonの以下を変えるとport番号を変更することができる
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 8080"//ここの--portはもともとない
  },
はじめに

Viteとは何か

Vite使い方

Viteインストール

Select a framework:

Select a variant:

Use rolldown-vite (Experimental)?:

Install with npm and start now?

開発サーバーの立ち上げ

デプロイ周りについて

Discussion
