KAISO KAISO BLOG

カテゴリー: 未分類

  • Vite7を試してみた

    久しく開発環境についての情報をキャッチアップしていなかったので、試しに Vite 7 を触ってみました。

    はじめに | Vite

    1. GitHubリポジトリを用意する

    まずはGitHubリポジトリを用意します。

    ふだんは Sourcetree（GitリポジトリのGUIツール） を使って GitHub リポジトリと接続していましたが、今回は Git コマンドを使って GitHub リポジトリと接続します。

    GitHubへアクセスして新しいリポジトリを用意し、リポジトリ名を決めます。

    practice-vite

    GitHubリポジトリをローカルにクローンするためのURLを取得することができるようになるので、URLをコピーしておきましょう。

    クローン用のURLはSSHタイプとHTTPSタイプがあるので、自分の環境に合ったURLをコピーしてください。私の場合はSSHタイプのURLをコピーしました。

    git@github.com:（GitHubのユーザー名）/practice-vite.git

    2. ローカルを Git で初期化する

    ※ 以下の作業は Cursor のターミナルで実行しています。

    自分の端末で作業するための作業用ディレクトリ（ローカル）に移動する。

    cd /Users/（Macのユーザー名）/Development/practice-vite

    用意したローカルの中にウェブ開発用の環境を構築していきましょう。

    まずはローカルをGit で初期化します。

    git init

Initialized empty Git repository in /Users/（Macのユーザー名）/Development/practice-vite/.git/

    → この作業用ディレクトリは Git の管理下に置かれ、ファイルの変更が監視できるようになりました。

    ローカルにGitHubリモートリポジトリを追加する。

    git remote add origin git@github.com:（GitHubのユーザー名）/practice-vite.git

    → ローカルのGitリポジトリとGitHubのリモートリポジトリを接続することができるようになりました。

    GitHub リモートリポジトリからローカルへ初回のプルを実行

    git pull origin main
From github.com:exork-kaiso/2026-02-07_01_practice-vite
 * branch            main       -> FETCH_HEAD

    → GitHub リモートリポジトリをつくった際に、READMEファイルや .nodeignore ファイルをつくっていた場合、リモートリポジトリに存在するファイルをローカルに持ってくることができるようになったはずです。

    3. ローカル環境を確認する

    Node.js のバージョン管理を行う Volta のバージョンを確認する。

    volta -v

2.0.2

    Node.js のバージョンを確認する。

    node -v

v24.12.0

    npm のバージョンを確認する。

    npm -v

11.7.0

    互換性について

    Vite は Node.js 20.19+, 22.12+ のバージョンが必要です。ただし、一部のテンプレートではそれ以上のバージョンの Node.js を必要としますので、パッケージマネージャーが警告を出した場合はアップグレードしてください。https://ja.vite.dev/guide/

    Vite をインストールする

    Vite を手動インストールするために、以下のコマンドを実行してください。

    npm install -D vite

added 13 packages in 8s

5 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 11.7.0 -> 11.9.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.9.0
npm notice To update run: npm install -g npm@11.9.0
npm notice

    → 下記のような必要なファイルやディレクトリが生成されるはずです。

    - node_modules/
- package-lock.json
- package.json

    以下のような index.html を新規作成しましょう。

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>Hello Vite!!!</h1>
</body>
</html>

    以下のコマンドを実行すると、Vite の開発環境が起動します。

    npx vite

  VITE v7.3.1  ready in 280 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

    → Vite コマンドを実行すると、Vite はサーバーとして起動し、 index.html はアプリケーションのエントリーポイントとなって http://localhost:5173/ で配信されるようになります。

    開発環境として Vite が起動している間、index.html ファイルの変更はリアルタイムで http://localhost:5173/ に反映されるようになりました。

    css や JavaScript の読み込みまではいきませんでしたが、リアルタイムでファイルの変更を検知するホットリロードの機能をデフォルトで使えるのはとても便利ですよね。