はじめてのVue3で、入口のコードを追ってみた

今日は Vue 3 の環境構築をして、最初の画面が表示されるところまで触ってみました。Vue はコンポーネントを組み合わせて画面を作る仕組みで、createApp() でアプリを作り、.mount() で実際の画面に結びつける流れになっているようです。

画像解析の結果をブラウザで見せられるようになりたい気持ちがあり、フロント側の理解も少しずつ増やしたくて触り始めました。まだかなり途中段階ですが、「何を積み上げていくのか」は思っていたより見えやすく、今のところは追いかけやすそうだと感じています。

「全部一気にわかろうとしなくていいから、“どこが入口か” だけ押さえればだいぶ楽になるよ。」

今日やったこと

今回はまず、Vue のプロジェクトを作って、開発サーバーを立ち上げるところまでを一通り試しました。createApp でアプリケーションを作り、mount で DOM に接続する流れが「とりあえずここを通る」という道筋になっているようです。

環境構築の流れとしては、次のコマンドを使いました。

# Vueプロジェクトのひな形を作成する
npm create vue@latest

# 必要なパッケージをインストールする
npm install

# 開発サーバーを起動して、ブラウザで確認する
npm run dev

今回の作成時は、TypeScript はいったん OFF にしました。最初から全部入りにすると、まだ意味を追えていない設定まで一気に増えそうだったので、今の自分には最小構成から始めるほうが合っていそうでした。

「まずは“動く最低限”でいいね。後から TypeScript も Router も足せるし、今は Vue 本体の感覚優先でいこう。」

Vueと周辺ツール

最初は Vue、.vue、Vite、Node.js が全部ひとまとまりに見えていたのですが、今は少しずつ役割を分けて考えられるようになってきました。

• Vue は、画面を部品で作る仕組み
• .vue は、その部品を書きやすくした形式で、単一ファイルコンポーネント（SFC）
• Vite は、開発サーバーや本番ビルドを担当する開発用ツール
• Node.js は、そういったツールをローカルで動かすための土台

.vue ファイルはブラウザがそのまま読めるわけではないので、「変換してあげる係」が必要になります。その担当が Vite、という見え方になってきました。

「“Vue が偉いツール全部やってくれる” じゃなくて、“Vue は画面担当、Vite は開発担当”みたいに分けるとスッキリするよ」

ここはまだ「完全に説明できる」ほどではありませんが、少なくとも「全部同じものではない」と分けて見たほうが理解しやすいと感じています。

package.json の見え方

package.json も少し見て、どんなコマンドが用意されているのかを確認しました。scripts は「よく使う処理にショートカットキーを割り当てているような場所」というイメージです。

今回見た内容はこんな感じでした。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "run-s \"lint:*\"",
    "lint:oxlint": "oxlint . --fix",
    "lint:eslint": "eslint . --fix --cache",
    "format": "prettier --write --experimental-cli src/"
  }
}

今のところの理解では、次のような役割です。

• npm run dev
  Vite の開発サーバーを起動する
• npm run build
  本番用のファイルを作る
• npm run preview
  ビルド結果をローカルで確認する
• npm run lint や npm run format
  コードの崩れや書き方を整えるための補助

「長いコマンドを毎回手打ちするのはつらいから、ここに“あだ名”付けておくイメージだね」

まだ細かいところまでは追えていませんが、「よく使う処理に名前を付けて、毎回長いコマンドを直接打たなくて済むようにしている場所」と考えると、今の自分にはかなり分かりやすいです。

VS Code の拡張機能

VS Code の推奨拡張機能も見てみました。最初はただの一覧に見えていたのですが、少しずつ「書く」「整える」「崩れを防ぐ」を分担している感じが見えてきました。

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "EditorConfig.EditorConfig",
    "oxc.oxc-vscode",
    "esbenp.prettier-vscode"
  ]
}

今のところ、それぞれこんな理解です。

• Vue.volar
  .vue ファイルの補完やエラー表示を助けてくれる Vue 3 用拡張。
• dbaeumer.vscode-eslint
  ESLint と連携して、VS Code 上でコードの問題点を教えてくれるもの。
• EditorConfig.EditorConfig
  インデントや改行コードなど、書き方のルールをそろえるためのもの。
• oxc.oxc-vscode
  JavaScript まわりの解析を助ける拡張機能。
• esbenp.prettier-vscode
  コードの見た目を自動で整えてくれるもの。

「本体を勉強してる時こそ、周辺ツールで“迷いポイント”を減らしとくと集中しやすいよ」

こういう周辺ツールは、本体より後回しでもいいのかなと思っていました。でも実際には、「変な書き方で迷う時間を減らす」ために、早めに入れておく意味がありそうです。

main.js はどこが入口なのか

今回いちばん「なるほど」となったのは、Vue アプリの入口になっているコードです。

import { createApp } from 'vue'
import App from './App.vue'

// Vueアプリを作成し、App.vue を最初の画面として使う
createApp(App).mount('#app') // index.html の #app に画面を差し込む

この 3 行は短いのに情報量が多くて、最初は逆に追いにくかったです。でも今は、次のように考えると少し整理しやすくなりました。

• import { createApp } from 'vue'
  Vue アプリを作るための機能を読み込んでいる
• import App from './App.vue'
  最初に使う大元の画面を読み込んでいる
• createApp(App).mount('#app')
App.vue をルートコンポーネントとしてアプリを作り、HTML 側の #app に表示する

「ゲームでいうと、“この画面をスタート地点にしてね”って指定して、フィールドに出ていく感じだね」

特に .mount('#app') のところで、「ここで初めて画面につながる」と見ると分かりやすかったです。createApp だけだとまだ「準備しただけ」で、.mount() まで行ってようやくブラウザ側の世界と接続される、という見え方です。

App.vue は最初の画面

App.vue の形も確認しました。.vue ファイルは SFC として、<script setup>、<template>、<style> をひとつにまとめて書ける形式です。

Qiita などでも見やすいように、ここでは vue ではなく html のコードブロックで書いておきます。

<script setup>
// テンプレートから使う値を定義する
const userName = 'Yuki'

// 開発中に値を確認したいときは、こうしてログも出せる
console.log(userName)
</script>

<template>
  <!-- script で定義した値を画面に表示する -->
  <h1>Hello, {{ userName }}!</h1>
</template>

<style>
/* このコンポーネント内の見た目を整える */
h1 {
  color: red;
}
</style>

今のところは、かなり素直に次のように理解しています。

• <script setup> に、値や処理を書く。
• <template> に、画面に出したい内容を書く。
• <style> に、見た目を書く。

「1ファイルの中に“ロジック・見た目・HTML”が揃ってるから、SFCはむしろ最初のうちは追いやすいと思うよ」

役割ごとに場所が分かれているので、最初はファイルが増えるより、むしろこのまとまり方のほうが追いやすいと感じました。コンポーネントは「キャラクターや UI パーツを部品として分けて、必要な場所に配置する感じ」と考えると、今の理解には合っています。

つまずいたところ

今回いちばん迷ったのは、環境まわりの前提知識と、ツール同士の役割の切り分けでした。Vue を触りたいだけのつもりでも、Node.js、npm、nvm、Vite といくつも名前が出てきて、「どこまでが必須で、どこからが管理の話なのか」が最初はかなり曖昧でした。

今はひとまず、次のように分けて考えると整理しやすそうです。

• Node.js
  JavaScript をローカルで動かすための実行環境
• npm
  パッケージ管理とスクリプト実行をする道具
• nvm
  Node.js のバージョン管理を助ける道具
• Vite
  Vue 開発を進めやすくしてくれる開発用ツール

「“Nodeまわり”ってひとまとめにしないで、土台・管理・開発用ツールってざっくり分けると、だいぶ視界が晴れるよ」

つまり、Vite が全部を管理しているというより、Node.js という土台の上で Vite が動いている、という見方のほうが今の自分にはしっくりきています。

もうひとつ不安だったのは、以前グローバルで入っていた Node.js や npm が残っていそうなことです。ここはまだ細かい整理手順までは断言できませんが、「今後はバージョン管理ツール側に寄せる」「グローバルに入っていたものはできるだけ整理する」という方針を持っておくのが大事そうだと感じています。

相方「“動いてるけどバージョンわからない”は、あとで絶対ハマるから、今のうちに方針だけでも決めておくのいいね」

今の理解を並べると

まだかなり暫定ですが、今のところは次の地図で考えています。

• Vue は、画面をコンポーネント単位で組み立てるための仕組み
• .vue ファイルは、そのコンポーネントを 1 ファイルにまとめて書くための形式で、SFC と呼ばれる
• ブラウザは .vue ファイルをそのまま読めない
• Vite は、その変換や開発サーバー、本番ビルドを担当する
• main.js はアプリの入口
• App.vue は最初に表示する大元の画面
• createApp(App).mount('#app') は、アプリを作って画面につなぐ流れそのもの

「地図はだいぶ描けてきたね。あとは、この道を何回か歩いてみると、自然とショートカットが見えてくるよ」

こうして並べると少し整理されて見えるのですが、実際はまだ「たぶん今はこういうことだろうな」という段階です。特に、複数のコンポーネントがどうつながっていくのか、状態が変わるとどう画面が更新されるのかは、これから手を動かしながら確かめたいところです。

次にやりたいこと

次は、文字を表示するだけで終わらず、画面が動くところまで触ってみたいです。Vue らしさは、やはり「データが変わると表示も変わる」体験をしてから、少しずつ実感できそうな気がしています。

今のところ、次に試したいのはこのあたりです。

• ボタンや入力欄を置いてみる。
  ただ表示するだけでなく、操作できる画面にしたい。
• クリックイベントを試す。
  「押したら値が変わる」が見えると、流れをつかみやすそうです。
• 状態変化を触る。
  HP やスコアが変わると画面表示も更新される、あの感覚に近いものとして理解できそうです。
• コンポーネントを分けてみる。
  App.vue だけで完結させず、部品として分ける練習をしたい。
• Node.js の管理方法を整理する。
  今後のために、環境の土台もできるだけ分かる状態にしておきたい。

「そろそろ “表示できた” から一歩進んで、“触ると変わる” を体験しようか。そこで Vue の楽しさが一気に増えるよ」

今はまだ静的に文字を出している段階ですが、ここから少しでも「触ると変わる」が見えてくると、理解の手応えも変わりそうです。