Viteとは？HTML・CSS・JavaScriptを始める方法｜初心者向け実践

Web制作の開発環境を整えるイメージ WEB制作基礎知識

HTML・CSS・JavaScriptの学習を進めると、「Vite（ヴィート）」という名前を見かけることがあります。Viteは、制作中のページをすぐブラウザで確認し、公開用ファイルをまとめるための開発ツールです。

この記事では、フレームワークを使わない「Vanilla JavaScript」の構成で、Viteの導入から表示確認、公開用ファイルの作成までを体験します。最初のHTML/CSS学習では必須ではありません。ファイルを直接開く方法に慣れてから、複数ファイルの管理やJavaScript開発を効率化したい段階で使うと理解しやすいです。

この記事でできること
Node.jsの確認、Viteプロジェクトの作成、開発サーバーの起動、HTML/CSS/JavaScriptの編集、公開用のdistフォルダー作成までを順番に試せます。

Viteは何をしてくれるツールか

Viteは、HTML・CSS・JavaScriptを書く代わりのソフトではありません。主に次の作業を助けます。

  • 保存した変更をブラウザへすばやく反映する
  • CSSやJavaScriptのファイルを扱いやすくする
  • 公開用にファイルをまとめて最適化する
  • VueやReactなどの開発環境を作る

ViteとAstroは同じものではありません。Viteは開発環境とビルドを担当する道具で、AstroはWebサイトを組み立てるフレームワークです。まずVite単体のVanilla構成を体験すると、役割を分けて理解できます。

準備するもの

  • WindowsまたはMacのパソコン
  • Visual Studio Codeなどのエディター
  • Node.js
  • ターミナル（Windows Terminal、PowerShell、macOSのターミナルなど）

2026年10月28日にVite公式ガイドを確認した時点では、ViteはNode.js 20.19以上または22.12以上を必要とします。テンプレートによっては、さらに新しいバージョンが必要です。古いNode.jsを使っている場合は、表示された警告を無視せず更新してください。

node -v
npm -v

node -vでバージョン番号が表示されれば、Node.jsを利用できます。「コマンドが見つかりません」と出る場合は、Node.jsの導入またはターミナルの再起動が必要です。

Viteプロジェクトを作る

作業用フォルダーを置きたい場所でターミナルを開き、次のコマンドを実行します。

npm create vite@latest

質問が表示されたら、練習では次のように選びます。

  • Project name：vite-practice
  • Framework：Vanilla
  • Variant：JavaScript

作成後、表示された案内に沿ってフォルダーへ移動し、必要なパッケージをインストールします。

cd vite-practice
npm install
npm run dev

ターミナルに表示されたLocalのURLを、CtrlキーまたはCommandキーを押しながらクリックします。Viteの初期画面が表示されれば準備完了です。

HTML・CSS・JavaScriptを編集する

プロジェクトをVisual Studio Codeで開き、まずindex.htmlを確認します。通常のHTMLと同じように、見出しや本文を書けます。

<main class="card">
  <p class="label">Vite練習</p>
  <h1>保存すると表示が変わります</h1>
  <button id="changeButton">文字を変える</button>
  <p id="message">ボタンを押してください。</p>
</main>
<script type="module" src="/src/main.js"></script>

src/style.cssには、カードの見た目を指定します。

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: sans-serif;
  background: #f3f6fa;
}

.card {
  width: min(90%, 640px);
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(0 0 0 / 10%);
}

src/main.jsでは、CSSの読み込みとボタン操作を書きます。

import './style.css'

const button = document.querySelector('#changeButton')
const message = document.querySelector('#message')

button.addEventListener('click', () => {
  message.textContent = 'JavaScriptが動きました。'
})

保存後、ブラウザへ戻って表示とボタン操作を確認します。開発サーバーを終了するときは、ターミナルでCtrl + Cを押します。

公開用ファイルを作る

制作中のsrcフォルダーを、そのまま一般的な静的サーバーへアップロードするのではありません。次のコマンドで公開用ファイルを作ります。

npm run build

Viteの標準設定では、プロジェクト内にdistフォルダーが作られます。公開対象は、このdistフォルダーの中身です。公開前に次のコマンドで完成版を確認できます。

npm run preview

Vite公式は、vite previewを完成版のローカル確認用として案内しており、本番サーバーとして使うものではないと説明しています。

よくある間違い

index.htmlをダブルクリックして確認する

Viteプロジェクトは、基本的にnpm run devで開発サーバーを起動して確認します。ファイルを直接開くと、JavaScriptモジュールやパスが正しく動かない場合があります。

ターミナルの現在位置が違う

package.jsonがあるプロジェクトフォルダーでコマンドを実行します。見つからないエラーが出たら、cdで移動できているか確認してください。

node_modulesをサーバーへアップロードする

node_modulesは開発に必要なパッケージです。静的公開では通常アップロードせず、npm run buildで作ったdistの中身を使います。

distを編集して修正する

distはコマンドで作り直される出力先です。修正はindex.htmlやsrc内で行い、再度npm run buildします。

15分の実践課題

  1. 見出しを自分のポートフォリオ名へ変更します。
  2. カードの背景色と余白を変更します。
  3. ボタンを押したときの文章を、自分の学習目標へ変更します。
  4. npm run buildを実行します。
  5. npm run previewで、見た目とボタン操作を確認します。

確認できれば完了：再読み込み後もレイアウトが表示され、ボタンを押すと文章が変わり、ターミナルに赤いエラーが出ていなければ成功です。

Viteが必要か判断する

やりたいこと 選び方
HTMLとCSSの基礎だけを学ぶ まずは通常のファイル構成で十分です。
JavaScriptを分割して学ぶ Viteを使うとモジュールと開発サーバーを体験できます。
VueやReactを学ぶ Viteのテンプレートを使う方法が候補になります。
ブログや記事を管理する WordPressやAstroなど、目的に合う仕組みを別に検討します。

パソコンやエディターの準備はWeb制作の環境を整える、通常のHTML/CSS作品を公開する手順はHTML・CSSで作ったページを公開する方法で確認できます。無料公開・PHP・WordPressの違いは用途別サーバー選びにまとめています。

公式資料

公式資料確認日：2026年10月28日

タイトルとURLをコピーしました