はじめに

この記事では、Viteを使ったフロントエンド開発の流れについて説明します。Viteは、次世代のフロントエンドツールで、超高速な開発サーバーと最適化されたビルド機能を提供します。以下に、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

Viteの開発サーバーを起動するには、以下のコマンドを実行します。

npm run dev

または、yarnを使用する場合:

yarn dev

ブラウザで http://localhost:3000 にアクセスすると、Viteの開発サーバーが起動していることを確認できます。Viteの開発サーバーはホットリロードをサポートしており、コードを変更すると即座にブラウザに反映されます。

Viteのプロジェクトはシンプルな構成になっています。以下に主要なファイルとディレクトリを説明します。

my-vite-app/
├── index.html
├── package.json
├── vite.config.js
├── node_modules/
├── public/
└── src/
    ├── main.js
    └── style.css

index.html はプロジェクトのエントリーポイントです。

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>
`;

ここにプロジェクトのスタイルを定義します。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #f0f0f0;
}

基本デフォルトで問題ありません。カスタム設定が必要な場合、このファイルで設定を追加します。

import { defineConfig } from 'vite';

export default defineConfig({
  // カスタム設定を追加する場所
});

開発が完了したら、プロジェクトをビルドして本番環境にデプロイできます。以下のコマンドを実行してビルドします。

npm run build

または、yarnを使用する場合:

yarn build

ビルドが完了すると、distディレクトリに静的ファイルが生成されます。これらのファイルをWebサーバーにデプロイすることで、アプリケーションを本番環境で動かすことができます。

Viteを使用すると、フロントエンド開発の速度と効率が大幅に向上します。この記事では、Viteのセットアップから開発サーバーの起動、プロジェクト構成、そしてビルドまでの基本的な流れを紹介しました。Viteの公式ドキュメントも参考にして、さらに高度な機能やカスタマイズ方法を学んでみてください。