【WebDev】初心者でも簡単！Viteを使ったモダンなWeb開発スタートガイド

SHARE

Viteは、フロントエンドの開発環境を簡単で高速にするために設計されたビルドツールです。

従来の開発ツールと比較して、その大きな特徴は、その軽さ。スピードですね。

特に開発用のサーバーがすばやく起動し、リアルタイムでの変更が即座に反映されるという点です。

これにより、開発者はよりスムーズに作業を進めることができます。

この記事では、Viteを使ってHTML、CSS、JavaScriptを活用したシンプルなWebページの開発をどう行うかを詳しく解説します。

Viteを導入することで、モダンな開発環境に触れるだけでなく、ビルド時間を大幅に短縮し、開発の快適さが格段に向上します。​

R
R

一般的にはReactやVueを使う方がビルドツールのメリットを享受できますが、今回は入門編ということで普通のHTML、CSS、Javascriptで構成させるWebページやサイトをメインで解説します。

目次

Viteってなに？

Viteは、Web開発のために設計された超高速のビルドツールです。

「Vite」という名前はフランス語で「速い」を意味し、その名の通り、特に開発中のビルド速度や起動速度が圧倒的に速いことが特徴です。

Viteは、従来の開発ツール（たとえば、WebpackやParcel）に比べて、初回のビルドが高速で、変更内容をリアルタイムで即座にブラウザに反映する「ホットリロード」機能が優れています。

また、ViteはモジュールのバンドルをESモジュールベースで行っており、必要な部分だけを動的にロードします。

この動作により、開発時のパフォーマンスが向上し、特に大規模なアプリケーションでも効率的に作業を進めることができます。

ViteはReactやVueなどのモダンなフレームワークに対応しているだけでなく、普通のHTML、CSS、JavaScriptを使ったプロジェクトでも活用できるため、初心者から経験豊富な開発者まで幅広く使用されています。

Viteのインストール方法

Viteを使ってWeb開発を始めるためには、まずNode.jsをインストールしてからViteをセットアップする必要があります。

以下は、Viteをインストールするための基本的なステップです。

1. Node.jsのインストール

Viteを使用するためには、まずNode.jsがインストールされている必要があります。

公式サイト（Node.js公式サイト）から最新の安定バージョンをダウンロードし、インストールを行ってください。

2. 新しいプロジェクトの作成

Node.jsがインストールされたら、次にコマンドライン（ターミナル）を開き、プロジェクトを作成します。以下のコマンドで、Viteプロジェクトを作成できます。

bash
npm create vite@latest

これを実行すると、プロジェクト名や使用したいフレームワーク（React、Vue、Svelte、普通のHTMLなど）を選択するプロンプトが表示されます。

もし、ReactやVueなどを使わず、HTML、CSS、JavaScriptでシンプルなWebページを作りたい場合は、Vanillaを選択します。

3. ディレクトリに移動して依存関係をインストール

プロジェクトが作成されたら、作成したディレクトリに移動し、依存関係をインストールします。

bash
cd プロジェクト名
npm install

これにより、必要な依存関係がすべて自動的にインストールされます。

4. 開発サーバーの起動

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

bash
npm run dev

これにより、ローカル開発サーバーが立ち上がり、リアルタイムで変更が反映される状態で開発が可能です。

ブラウザで表示されるURL（通常は http://localhost:3000）にアクセスすると、プロジェクトの内容が確認できます。

これでViteのインストールと初期セットアップが完了です。

HTMLとCSS、JSを使ったViteの使い方

Viteは、ReactやVueなどのフレームワークだけでなく、普通のHTML、CSS、JavaScriptプロジェクトでも非常に便利です。

これにより、ビルドや開発サーバーのスピードが向上し、効率的に開発が進められます。以下は、Viteを使用してHTMLとCSS、JavaScriptを使ったWebページを作成する方法です。

1. プロジェクト構成の基本

Viteを使用したHTMLプロジェクトのディレクトリ構造は非常にシンプルです。

index.htmlファイルをルートディレクトリに置き、CSSやJavaScriptのファイルをsrcフォルダに配置して管理します。

以下は、基本的なディレクトリ構造の例です。

ディレクトリ構成
my-vite-project/
├── index.html
├── src/
│   ├── main.js
│   └── styles.css
├── package.json
└── vite.config.js

2. HTMLファイルの設定

index.htmlはViteプロジェクトの入り口となるファイルです。

普通のHTMLファイルを作成し、CSSやJavaScriptを読み込みます。Viteでは、変更がリアルタイムで反映されるため、効率よく開発が進められます。

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vite Project</title>
    <link rel="stylesheet" href="/src/styles.css" />
  </head>
  <body>
    <h1>Hello, Vite!</h1>
    <button id="clickMe">Click Me</button>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

3. CSSファイルの使用

CSSファイルを作成して、HTMLにスタイルを適用します。Viteを使うと、CSSファイルの変更もすぐにブラウザに反映されます。

src/styles.css:

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

4. JavaScriptファイルの設定

JavaScriptファイルは、Viteの「ES Modules」のサポートを使ってモジュール化して記述できます。

以下のように、ボタンのクリックイベントを追加するシンプルなスクリプトを書いてみましょう。

src/main.js:

JS
document.getElementById("clickMe").addEventListener("click", () => {
  alert("Button clicked!");
});

Viteでは、JavaScriptファイルもリアルタイムで変更が反映されるので、素早く確認しながら開発が進められます。

5. Vite開発サーバーの起動

Viteプロジェクトのセットアップが完了したら、以下のコマンドで開発サーバーを起動し、ブラウザで確認します。

bash
npm run dev


これで、Viteの開発サーバーが起動し、変更が即座にブラウザに反映されるリアルタイムな開発環境が整います。

Viteの基本的なプロジェクトの構成


Viteを使ったWebプロジェクトは、シンプルでわかりやすい構造になっています。

これは特に初心者にとって、プロジェクトの整理や管理がしやすく、スムーズな開発体験を提供します。

以下に、Viteを使った基本的なプロジェクトのディレクトリ構成と、それぞれのファイルの役割を説明します

<strong>プロジェクト構造の例</strong>
my-vite-project/
├── index.html
├── src/
│   ├── main.js
│   └── styles.css
├── package.json
└── vite.config.js

1. index.html

index.htmlは、プロジェクトのメインとなるHTMLファイルです。

このファイルがWebページの基本構造を定義し、CSSやJavaScriptファイルをリンクしてプロジェクト全体をまとめます。

index.htmlはルートディレクトリに配置され、Viteはこのファイルを自動的にロードして、開発サーバーで表示します。

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vite Project</title>
    <link rel="stylesheet" href="/src/styles.css">
  </head>
  <body>
    <h1>Hello, Vite!</h1>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

2. src/ フォルダ

src/ フォルダには、CSSやJavaScriptなど、実際にプロジェクトで使用するリソースがまとめられます。

このディレクトリ内で、スタイルシートやスクリプトファイルを整理して、プロジェクトの規模が大きくなっても管理しやすい状態にします。

main.js: JavaScriptのメインファイル。index.htmlで読み込まれ、ページの機能を実装します。

このファイルで他のJSモジュールをimportして、コードの分割や再利用がしやすくなります。

JS
// main.js
console.log('Hello, Vite!');


styles.css: プロジェクトのメインスタイルシート。

HTMLのデザインを整えるためのスタイルを定義します。Viteを使うことで、CSSの変更がリアルタイムでブラウザに反映されます。

CSS
/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}

3. package.json

package.jsonは、Node.jsプロジェクトの情報を定義するファイルで、依存関係やスクリプトコマンドを管理します。

Viteを使うためには、このファイルで依存関係としてViteを指定し、プロジェクトをセットアップします。

json
{
  "name": "my-vite-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vite": "^2.0.0"
  }
}

4. vite.config.js

vite.config.jsは、Viteの動作をカスタマイズするための設定ファイルです。

このファイルで、例えば開発サーバーのポートを変更したり、ビルド設定を変更することが可能です。

シンプルなプロジェクトでは、このファイルが不要な場合もありますが、プロジェクトの規模が大きくなるにつれ、設定をカスタマイズする機会が増えます。

JS
// vite.config.js
export default {
  root: 'src',
  build: {
    outDir: '../dist'
  }
};

Viteの基本的なプロジェクトの構成まとめ

この基本的な構成で、Viteを使ったシンプルなHTML、CSS、JavaScriptプロジェクトを構築できます。

Viteを使用することで、開発サーバーの起動やビルドが高速化され、開発がより効率的になります。

また、Viteはプロジェクトの規模が大きくなっても柔軟に対応できる設計となっており、将来的にReactやVueなどのフレームワークを使用する際もそのまま移行が可能です。

開発サーバーとビルド機能

Viteの強力な機能の一つが、開発サーバーとビルド機能です。Viteはその設計上、非常に高速で軽量な開発サーバーを提供しており、開発者がコードを変更するたびにブラウザにリアルタイムで反映される「ホットリロード」機能を備えています。

これにより、Web開発のスピードが飛躍的に向上します。

開発サーバー

Viteの開発サーバーは、コマンド一つで簡単に起動できます。

npm run devを実行すると、瞬時にローカル開発サーバーが立ち上がり、リアルタイムで変更が反映されるホットリロード機能が有効になります。

これは、従来のビルドツールで感じることの多かった遅延を大幅に解消します。

コマンドの例:

bash
npm run dev

このコマンドで開発サーバーが起動し、ブラウザでのプレビューが自動的に更新されます。

HTMLやCSS、JavaScriptの変更がリアルタイムで反映されるので、ブラウザをリロードする手間が省けます。

ビルド機能

Viteでは、本番環境用にコードを最適化するビルド機能も非常に強力です。

npm run buildを実行すると、必要なファイルがすべて最適化され、軽量で読み込みが速いコードが生成されます。

このビルド時には、CSSやJavaScriptがミニファイされ、HTMLも最適化されます。

コマンドの例:

bash
npm run build

このコマンドを実行すると、デフォルトではdist/というフォルダに最適化されたファイルが生成されます。

Viteは、モダンブラウザに対応したコードにトランスパイルし、バンドルサイズを最小限に抑えるための最適化も自動で行います。

開発サーバーとビルドの違い

開発サーバーは主にローカル開発時に使用し、リアルタイムでの変更確認を行います。一方、ビルド機能は、本番環境で使うための軽量化・最適化されたコードを生成するのに使用します。

どちらもViteの強力な機能であり、効率的な開発プロセスを実現するために欠かせないツールです。

これらの機能を使いこなすことで、開発スピードが向上し、よりスムーズにプロジェクトを進めることができます。

Viteの良いところまとめ

1. 超高速なビルドと開発サーバー

Viteの最大の魅力は、その驚異的な速さです。従来の開発ツールでは、プロジェクトの規模が大きくなるとビルドやサーバーの立ち上げに時間がかかっていましたが、Viteは「オンデマンドビルド」という仕組みにより、必要な部分だけを即座にコンパイルし、ブラウザに反映します。

これにより、開発中の待ち時間が劇的に短縮されます。

2. ホットリロード機能

Viteでは、npm run devを実行することで開発サーバーが起動し、リアルタイムで変更が反映されるホットリロード機能が利用できます。

これにより、ブラウザをリロードせずにコード変更を即座に確認でき、作業効率が向上します。

3. 簡単なセットアップ

Viteは初期設定がシンプルで、すぐに使い始めることができます。

React、Vueなどのフレームワークを使った開発に限らず、HTML、CSS、JavaScriptの普通のWebプロジェクトでもViteは問題なく使えるため、広範囲なプロジェクトで利用可能です。

4. 軽量で効率的なビルド

Viteのビルド機能は、必要なファイルのみを最適化し、不要なコードを排除するため、最終的な出力ファイルが非常に軽く、パフォーマンスも優れています。これにより、本番環境でも素早い読み込みが期待できます。

5. 拡張性の高さ

Viteはプラグインを通じて機能を拡張することができ、プロジェクトの要件に応じて柔軟に対応できます。

例えば、ViteにはTypeScriptサポートや、PostCSS、ESLintの統合などのプラグインがあり、モダンな開発ツールとの相性も抜群です。

これらの特徴により、Viteは特にモダンなWeb開発に最適であり、開発者が快適に作業を進めるための強力なツールとして位置付けられています。​

まとめと次の学習ステップ

Viteは、非常に高速でシンプルなツールであり、初心者でもすぐにモダンなWeb開発を始めることができるのが魅力です。

特に、従来の開発ツールに比べてビルド速度が速く、開発環境のセットアップが容易で、HTML、CSS、JavaScriptなどの基本的な技術にも対応している点が優れています。

これにより、より効率的に開発を進めることができ、開発者の作業を大幅に改善することが期待できます。

次のステップとしては、Viteの基本的な使い方に慣れたら、プラグインを活用してさらに機能を拡張してみましょう。

また、ReactやVueなどのフレームワークとの連携も試してみると、より高度なWebアプリケーションの開発にも挑戦できるようになります。

Viteを使いこなして、モダンなWeb開発の世界をさらに広げていきましょう！​

前の記事

【CSS】@layer を使ったCSSの設計手法：初心者でもで…

次の記事

超初心者でもわかる！Dockerの基礎と最初のステップ