はじめに
この記事では、Viteを使ったフロントエンド開発の流れについて説明します。Viteは、次世代のフロントエンドツールで、超高速な開発サーバーと最適化されたビルド機能を提供します。以下に、Viteのセットアップから基本的な使い方、そしてプロジェクトのビルドまでの流れを紹介します。
前提条件
- Node.jsがインストールされていること
1. Viteプロジェクトのセットアップ
プロジェクトの作成
まず、Viteのプロジェクトテンプレートを使って新しいプロジェクトを作成します。以下のコマンドを実行します。
npm create vite@latest my-vite-app
または、yarnを使用する場合:
yarn create vite my-vite-app
コマンドを実行すると、プロジェクトのテンプレートを選択するように求められます。例えば、vanilla（プレーンJavaScript）、vue、react、preact、lit、svelteなどが選択できます。ここでは、vanillaを選択します。
プロジェクトディレクトリに移動
cd my-vite-app
依存関係のインストール
npm install
または、yarnを使用する場合:
yarn
2. 開発サーバーの起動
Viteの開発サーバーを起動するには、以下のコマンドを実行します。
npm run dev
または、yarnを使用する場合:
yarn dev
ブラウザで http://localhost:3000 にアクセスすると、Viteの開発サーバーが起動していることを確認できます。Viteの開発サーバーはホットリロードをサポートしており、コードを変更すると即座にブラウザに反映されます。
3. プロジェクト構成
Viteのプロジェクトはシンプルな構成になっています。以下に主要なファイルとディレクトリを説明します。
my-vite-app/
├── index.html
├── package.json
├── vite.config.js
├── node_modules/
├── public/
└── src/
├── main.js
└── style.css
index.html
index.html はプロジェクトのエントリーポイントです。
main.js
src/main.js はJavaScriptのエントリーポイントです。このファイルで、アプリケーションの初期化を行います。
import './style.css';
document.querySelector('#app').innerHTML = `
<h1>Hello Vite!</h1>
<p>Vite is a fast and modern build tool.</p>
`;
style.css
ここにプロジェクトのスタイルを定義します。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background-color: #f0f0f0;
}
vite.config.js
基本デフォルトで問題ありません。カスタム設定が必要な場合、このファイルで設定を追加します。
import { defineConfig } from 'vite';
export default defineConfig({
// カスタム設定を追加する場所
});
4. ビルド
開発が完了したら、プロジェクトをビルドして本番環境にデプロイできます。以下のコマンドを実行してビルドします。
npm run build
または、yarnを使用する場合:
yarn build
ビルドが完了すると、distディレクトリに静的ファイルが生成されます。これらのファイルをWebサーバーにデプロイすることで、アプリケーションを本番環境で動かすことができます。
まとめ
Viteを使用すると、フロントエンド開発の速度と効率が大幅に向上します。この記事では、Viteのセットアップから開発サーバーの起動、プロジェクト構成、そしてビルドまでの基本的な流れを紹介しました。Viteの公式ドキュメントも参考にして、さらに高度な機能やカスタマイズ方法を学んでみてください。