こんにちは!!もりもりです!!

今回はこれからのAI協働開発のために【モダンWebアプリ開発の第一歩、Viteのセットアップガイド】をお届けします!!

【学習】モダンWebアプリ開発のための初期段階のビルドツールと環境構築【Vite】

📚 今回は、これからモダンWebアプリ開発を始めよう！という方に向けて、フロントエンドのビルドツールである「Vite（ヴィート）」の導入から、Hello Worldアプリの起動、そして全世界へ向けたGitHub Pagesへの公開までを最短で体験できるガイドをお届けします！

これからVueやReactといったフレームワークを利用していく前の、とても大切な基礎知識となりますので、ぜひ一緒に手を動かして体験してみましょう✨

---

1. [Viteの概要と特性](#viteの概要と特性) 2. [Viteのインストール手順](#viteのインストール手順) 3. [Vue / React との関係性](#vue--react-との関係性) 4. [最短の成功体験ガイド（ローカル起動〜公開）](#最短の成功体験ガイドローカル起動公開) 5. [よくある質問とトラブルシューティング](#よくある質問とトラブルシューティング) ---

Viteの概要と特性

概要・説明

Vite（ヴィート）は、フランス語で「速い」を意味する、****次世代のフロントエンドビルドツール****です。

かつて主流だったツール（Webpackなど）は大変優秀でしたが、「開発サーバーの起動が遅い」「コードを修正してブラウザに反映されるまでコーヒーが飲めるほど待たされる」といった悩ましい課題がありました💦

そんな課題を鮮やかに解決するために作られたのがこのViteです！Vue.jsの開発者であるEvan You氏によって作成されましたが、今ではReactなど他の多くのフレームワークでも標準的に利用されている、まさに現在のWeb開発における大黒柱のような存在です🚀

主な特性・特徴

特性 / 特徴	説明
即時サーバー起動	プロジェクトのサイズに関わらず、開発サーバーがミリ秒単位で素早く起動します。もう待たされることはありません！
超高速なHMR	コードを書き換えると、ブラウザ全体をリロードせずに変更部分だけが瞬時に反映されます（Hot Module Replacement）。この魔法のような体験は一度味わうと手放せません。
豊富なテンプレート	Vue, React, Svelteなどの環境をコマンド一つですぐに構築できる公式テンプレートが最初から用意されています。
本番用ビルドの最適化	デプロイ（公開）用のデータを作成する際は、自動的に最適化（ファイルの圧縮等）を賢く行ってくれます。

公式情報・リンク

- ****公式ドキュメント****：https://ja.vitejs.dev/ - ****公式 GitHub リポジトリ****：https://github.com/vitejs/vite ---

Viteのインストール手順

事前確認事項

- ****Node.js****：Viteを動かすには、JavaScriptの実行環境である「Node.js」（18以上、または20以上推奨）がPCにインストールされている必要があります。


# Node.jsがインストールされているか（バージョン）を確認
node -v

# 出力例:
# v20.x.x

バージョンが正しく表示されれば準備完了です！次へ進みましょう😊

プロジェクトの作成手順（コマンドライン使用）

****npm create vite@latest**** という強力なコマンドを使うことで、対話形式でプロジェクトの土台を作成できます。少しハッカーになった気分を味わいながら進めましょう！

****ステップ 1：作業フォルダへ移動****


# 開発用フォルダ（例としてDocuments配下）に移動します
cd C:\Users\YourName\Documents

# Viteの作成コマンドを実行します
npm create vite@latest

****ステップ 2：対話形式での設定****

コマンドを実行すると、ターミナル上で以下のように質問されますので、キーボードの矢印キーとEnterで選択していきます。


? Project name: > my-vite-app
  （好きなプロジェクト名を入力してEnter）

? Select a framework: > - Use arrow-keys. Return to submit.
    Vanilla
    Vue      ← 今回はこれを選択してみましょう
    React
    ...

? Select a variant: > - Use arrow-keys. Return to submit.
    TypeScript
    JavaScript  ← まずは基本のこれを選択

****ステップ 3：依存関係のインストール****

プロジェクトの「箱」が作成されたら、その中に移動して必要な部品（パッケージ）をインストールします。


# 作成したフォルダへ移動
cd my-vite-app

# 必須パッケージのインストール（初回のみ必須）
npm install

これでViteのセットアップは完了です！本当にあっという間ですよね🎉

---

Vue / React との関係性

「VueとReact、どちらを学べばいいのかな？」

これはプログラミングを学ぶ初心者が必ずといっていいほど直面する大きな疑問です。Viteはどちらのフレームワークであっても、その土台としてしっかりと機能してくれます。

技術的な関係性

- ****Vite****：開発環境を爆速で提供する、いわば「作業台・高機能な工具箱」です。 - ****Vue / React****：画面のUI（ボタンや入力欄などの部品）を組み立てるための「設計図・部品集」です。どちらの設計図（Vue/React）を使うにしても、優秀な作業台（Vite）があったほうが圧倒的に作業効率が良いため、現在は****「Viteの上でVueやReactを動かす」****のが世界的な標準スタイルとなっています。

どちらに進むかの判断基準

フレームワーク	特徴	こんな人におすすめ
Vue.js	HTML/CSS/JSの知識がそのまま活かしやすいのが最大の特徴。学習曲線が比較的ゆるやかで、テンプレート構文が直感的に理解できます。	*従来のHTMLベタ書きやjQueryなどの制作経験からモダン開発へ移行したい人*
React	世界的なシェアNo.1の絶対王者。全てをJavaScript(JSX)という記法で記述します。大規模アプリや複雑な状態管理に非常に優れています。	*世界標準の技術をしっかり学びたい人、複雑なWebアプリを作りたい人*

> [!TIP]

> 迷った場合は、直感的にわかりやすいとされる ***Vue.js*** から学び始めることを個人的にはお勧めしています🌟一つの概念（コンポーネント、Stateなど）を深く理解すれば、もう一方への乗り換えも驚くほど容易になりますよ！

---

最短の成功体験ガイド（ローカル起動〜公開）

シーン 1：Hello Worldページをローカルで動かす

先ほどインストールしたアプリのひな形を、実際に自分のPC上のブラウザで表示させてみましょう！この瞬間が一番ワクワクしますね。


# 開発用サーバーを起動
npm run dev


  VITE v5.x.x  ready in 250 ms

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

ブラウザを開いて `http://localhost:5173/` にアクセスしてみてください。Vite（およびVue/React）のロゴがくるくると回る「Hello World」の初期画面が表示されれば大成功です！！

起動中は、エディタでコードを変更すると***即座に画面が更新される***魔法のような体験（HMR）ができます。この爆速のフィードバックループが、モダンWeb開発の最大の魅力です。

終了する時はターミナルで `Ctrl + C` を押します。

シーン 2：Viteでビルドする（最適化）

ローカルで動いているファイル群は、実はそのままでは一般的なWebサーバーにアップロードできません。全世界に公開するための「軽く最適化された一つのパッケージ」に変換（ビルド）する作業が必要です。


# 本番公開用のファイルを生成
npm run build


vite v5.x.x building for production...
✓ 34 modules transformed.
dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/index-D1g_xxx.css     1.20 kB │ gzip:  0.60 kB
dist/assets/index-C2a_yyy.js    143.50 kB │ gzip: 46.20 kB
✓ built in 1.20s

成功すると、プロジェクトフォルダの中に `dist` という新しいディレクトリがひょっこり作成されます。この `dist` フォルダの中身こそが、一般のWebサーバーにアップロードする最終成果物（本番ファイル）なのです！

シーン 3：GitHub Pagesに公開する

今回は作成した `dist` を無料で世界中へ公開できる「GitHub Pages」にデプロイする、最も簡単な流れをご紹介します。自分の作品がインターネットで見られるようになる感動をぜひ味わってください🌎

****1. Viteの設定ファイル（vite.config.js）を修正する****

GitHub Pagesでは `https://yourname.github.io/my-vite-app/` のように、サブディレクトリがURLになるため、パスの起点（base）を正しく設定する必要があります。


// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // (Vueの場合)

export default defineConfig({
  plugins: [vue()],
  // ▼ 以下の一行を追加します（独自のリポジトリ名に合わせてください）
  base: '/my-vite-app/', 
})

****2. もう一度ビルドする****

設定を変えたら、変更を反映させるために必ず再度ビルドをして `dist` フォルダの中身を更新します。


npm run build

****3. GitHubへプッシュし、Pagesを設定する****

1. `dist` フォルダを含めて（必要なら公開用の別のブランチへ）GitHubリポジトリにPushします（最近はGitHub Actionsでこの作業を全自動化するのも主流ですよ！）。 2. GitHubのリポジトリ画面の `Settings` > `Pages` に進みます。 3. `Source` を `Deploy from a branch` に設定し、アップロードしたブランチの `/(root)` などを選択して `Save` を押します。 4. 数分待つと、世界中からアクセスできる URL が発行されます。おめでとうございます！🎊 ---

よくある質問とトラブルシューティング

Q1. `npm run dev` で起動した画面に同じWi-Fiのスマホからアクセスできません！

***A***. おっしゃる通り、デフォルトではセキュリティの観点から、開発サーバーは「そのPC（localhost）」からしか見られないよう守られています。同じのスマホやタブレットから実機確認したい場合は、ネットワークに公開するオプションをつけて起動してみて下さい。


# ネットワーク経由でのアクセスを許可して起動する
npm run dev -- --host

Q2. 起動時に「ポート 5173 は既に使用されています」と赤いエラーが出ます。

***A***. すでに別のターミナル画面で `npm run dev` を実行したままになっている（サーバーが起動しっぱなし）可能性が高いです！起動させたままの黒い画面（ターミナル）がないか探し、そこで `Ctrl + C` を押して一旦停止させてから、再度実行してください。ちなみに最近のViteは賢いので、自動的に次の空いているポート（5174など）を開いてくれることもあります。

Q3. 「npm は内部コマンドまたは外部コマンド、操作可能なプログラム...として認識されていません」と怒られます。

***A***. Node.js がPCにインストールされていないか、インストール時の環境変数（パス）設定がうまくいっていないサインです。焦らずにNode.jsの公式サイトから再度インストーラーをダウンロードし、インストールをやり直してみてください（PCの再起動が必要な場合もあります）。一歩ずつ進めば必ず解決しますよ！

---

まとめ

本ガイドブックでは、モダン開発の爽快な第一歩として ****Viteを活用**** する方法をご説明しました。

最初の一歩：たった3分での実行


# 1. プロジェクト作成（vanilla/vue/reactを選択）
npm create vite@latest my-app

# 2. フォルダへ移動してパッケージインストール
cd my-app
npm install

# 3. 開発サーバー起動
npm run dev

このたった3つのステップで、世界最先端の開発環境があなたのお手元のPCに構築されてしまうんです。すごい時代になりましたね✨

これらの強力なツールは****完全オープンソース****かつ****無料****で提供されています。エコシステムに感謝しつつ、ぜひ本ガイドをご活用いただき、次のステップ（VueやReactの本格的な学習、そしてアプリ開発）へ自信を持って進んでみてください！

---

参考リンク一覧

リンク先	詳細な説明
[Vite 公式サイト（日本語）](https://ja.vitejs.dev/)	Viteの公式ドキュメントです。最新情報や高度な設定はこちら。
[Node.js 公式サイト](https://nodejs.org/ja/)	必須環境となるNode.jsのダウンロード先です。
[Vue.js 公式サイト](https://ja.vuejs.org/)	わかりやすいVueフレームワークの公式ドキュメント。
[React 公式サイト](https://ja.react.dev/)	世界シェアトップのReactフレームワーク公式ドキュメント。

--- ***更新日時***：2026 年 03 月 23 日

****本ガイドブックは、初心者から中級者まで幅広にご利用いただけるよう、実践的かつ技術的な内容をバランスよく盛り込んでいます。****

それではまた次の記事でお会いしましょう!!

もりもりゲームブログ

2026/03/24

(BOOK)【実践編】【AIエージェント開発のために】モダンWebアプリ開発の第一歩、Viteのセットアップガイド

【学習】モダンWebアプリ開発のための初期段階のビルドツールと環境構築【Vite】

目次

Viteの概要と特性

概要・説明

主な特性・特徴

公式情報・リンク

Viteのインストール手順

事前確認事項

プロジェクトの作成手順（コマンドライン使用）

Vue / React との関係性

技術的な関係性

どちらに進むかの判断基準

最短の成功体験ガイド（ローカル起動〜公開）

シーン 1：Hello Worldページをローカルで動かす

シーン 2：Viteでビルドする（最適化）

シーン 3：GitHub Pagesに公開する

よくある質問とトラブルシューティング

Q1. `npm run dev` で起動した画面に同じWi-Fiのスマホからアクセスできません！

Q2. 起動時に「ポート 5173 は既に使用されています」と赤いエラーが出ます。

Q3. 「npm は内部コマンドまたは外部コマンド、操作可能なプログラム...として認識されていません」と怒られます。

まとめ

最初の一歩：たった3分での実行

参考リンク一覧

■■■　記事の種類　■■■

■■■　記事のもくじ　■■■

自己紹介

2026/03/24

(BOOK)【実践編】【AIエージェント開発のために】モダンWebアプリ開発の第一歩、Viteのセットアップガイド

【学習】モダンWebアプリ開発のための初期段階のビルドツールと環境構築【Vite】

目次

Viteの概要と特性

概要・説明

主な特性・特徴

公式情報・リンク

Viteのインストール手順

事前確認事項

プロジェクトの作成手順（コマンドライン使用）

Vue / React との関係性

技術的な関係性

どちらに進むかの判断基準

最短の成功体験ガイド（ローカル起動〜公開）

シーン 1：Hello Worldページをローカルで動かす

シーン 2：Viteでビルドする（最適化）

シーン 3：GitHub Pagesに公開する

よくある質問とトラブルシューティング

Q1. `npm run dev` で起動した画面に同じWi-Fiのスマホからアクセスできません！

Q2. 起動時に「ポート 5173 は既に使用されています」と赤いエラーが出ます。

Q3. 「npm は内部コマンドまたは外部コマンド、操作可能なプログラム...として認識されていません」と怒られます。

まとめ

最初の一歩：たった3分での実行

参考リンク一覧

■■■ 記事の種類 ■■■

■■■ 記事のもくじ ■■■

自己紹介

■■■　記事の種類　■■■

■■■　記事のもくじ　■■■