💨

# 5.2 Vite + Vue 3 で Hello World

に公開
Vue.js
tech

まずは最小のステップとして 「Vite で Vue 3 プロジェクトを立ち上げ、Hello World を表示する」 ところを解説しておく。

1. なぜ Vite なのか

Vue プロジェクトを立ち上げる方法はいくつかあるが、現在の主流は Vite（ヴィート）。

  • Vite とは？
    次世代のフロントエンドビルドツール。vite はフランス語で「速い」という意味で、その名の通り 起動・ホットリロードが圧倒的に速い。

  • 従来の Vue CLI との違い

    • Vue CLI は webpack ベースで起動が遅くなりがち
    • Vite は ES モジュールを活用し、開発サーバーが爆速
    • Vue 公式も今は Vite を推奨

業務システムでも画面数が増えるとビルド時間が重要になるので、Vite の採用がおすすめ。

2. プロジェクト作成

まずは新規で Vue 3 プロジェクトを作成する。

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

ブラウザで http://localhost:5173/ を開くと、初期画面が表示される。
これで Vite + Vue 3 の開発環境は整った。

3. Hello World を書いてみる

最初に動かすサンプルはシンプルに「入力と表示が連動する」もの。

src/App.vue を以下のように書き換える。

<template>
  <h1>{{ message }}</h1>
  <input v-model="message" placeholder="入力してみてください" />
</template>

<script setup>
import { ref } from "vue";

const message = ref("Hello Vue 3 + Vite!");
</script>

👉 入力欄に文字を打つと、<h1> のテキストがリアルタイムに更新される。
これが Vue の基本である リアクティブ（双方向データバインディング）。

4. Vue の基本構造

Vue コンポーネントは 3 つのブロックに分かれる。

  • <template> : 画面の見た目（HTML）
  • <script setup> : ロジック（状態や処理）
  • <style> : スタイル（CSS）

これらを組み合わせて「部品化（コンポーネント化）」していくのが Vue の基本思想。

💡 AI 活用のポイント

  • プロジェクト生成コマンドの違いを確認する
    npm / pnpm / yarn で微妙に違うので、AI に「私の環境での最適な初期化コマンドを教えて」と聞くと安心。

  • 構成ファイルの読み方をサポートしてもらう
    vite.config.js や package.json の役割を AI に「1行ずつ解説して」と投げると理解が速い。

  • エラー時の切り分けを支援してもらう
    npm install や npm run dev でのエラーをそのまま貼って「解決策を3つ」と聞くと、検索より効率的。

  • Hello World を少し拡張するアイデアをもらう
    例: 文字数カウント、クリアボタン追加など。AI に小さな拡張を聞くと自然に Vue の書き方が身につく。

まとめ

ここまでで、

  • Vite とは何か（速いビルドツール、Vue CLI の後継的存在）
  • Vite で Vue 3 プロジェクトを作成する手順
  • Hello World を通じて Vue のリアクティブ性を体験
  • AI を活用して学習・トラブルシューティングを効率化する方法

という流れを押さえた。

👉 次回は、実際に メニュー画面、ログイン など業務システムらしい例を取り上げる予定。

Discussion