前回：Vue.jsってなに？TypeScriptで始める、Vue 3の基本と画面表示までの流れ① 〜概要編〜
ViteでVueプロジェクトを作ってみよう
Viteってなに？
Viteのサイト（https://ja.vite.dev/）から引用すると、Viteとは「次世代のWebアプリケーションを支える超高速フロントエンドビルドツール」である。これだけ聞いてなるほどそうですかとなるなら苦労しないので、補足する。
Viteは、Vueの開発者であるEvan You氏が開発したフロントエンド開発のためのビルドツール。「ヴィート」と発音する。簡単に言えば、開発が超高速になるVue公式推奨のツール、とでも言おう。Viteそのものは、ブラウザに直接置いて使うものではなくて、Node.jsという「土台」の上にインストールして使うアプリのような存在。つまりNode.jsがないと始まらないので、まだNode.jsをパソコンにインストールしていない人はインストールしてほしい→【TypeScript入門】MacのVSCodeで環境構築＆簡単なサンプルを作ってみよう。Viteによって、ファイル保存と同時に更新内容をプレビューできるモダンな開発環境が実現される。
ここであらためて、Node.jsという不思議な入口
ここで一度、たびたび登場している「Node.js（ノード・ジェイエス）」という存在について、簡単におさらいしておきたい。TypeScriptでもViteでも、なにかを始めようとするとまず「Node.jsをインストールしてね」と言われる。けれど、これが初心者にとっては少し不思議で、正体がつかみにくい存在なのではないだろうか。
Node.jsとは、JavaScriptをサーバーやローカル環境でも動かせるようにしたプラットフォームである。「ブラウザに閉じ込められていたJavaScriptを、開発やサーバーの世界に広げた存在」とも言える。ただそう言われても、何かがすぐに分かるわけではない。実際、Node.jsはブラウザのように“画面に何かを出す”わけでもなければ、IDEのように“目に見えるソフト”でもない。なのに、現代のWeb開発のあらゆる入口に存在している。TypeScriptを動かすのにも、Viteでプロジェクトを立ち上げるのにも、npmでライブラリを入れるのにも――裏ではNode.jsが黙々と働いている。まるで混沌としたWeb世界の根底にある見えない水脈のようだ。TypeScriptのコンパイル、Viteの起動、パッケージ管理……いずれもNode.jsを通じて動いている。最初は「とりあえず必要らしいから入れる」だけの存在だったものが、理解を深めるにつれて、Webという広大な仕組みを裏からつなぎ、動かしていることが見えてくる。Node.jsを理解するということは、Web開発の構造を俯瞰する視点を手に入れることでもあるのだ…………盛り上げすぎ？（自分でツッコんでおく）
ちなみに、じゃあそんなNode.jsを動かしているのはなんだ？と問うなら、それはOS（オペレーティングシステム）である。
Viteの使い方。Viteを利用して簡単なVueアプリを作ってみよう
では作っていこう。別でターミナルアプリを立ち上げなくてもVSCode内でターミナルを利用できるため、こちらを利用する。
メニューバーにある「ターミナル」から「新しいターミナル」を押下し、ターミナルを立ち上げてほしい。
まずは自分がサンプルを作成したいフォルダへ移動する。
その後Viteを使ってVueアプリを作成する。
|
1 2 |
$ cd ~/Documents $ npm create vite@latest carnival-vue-app -- --template vue-ts |
cdはフォルダ移動のUNIXコマンドだが、もしUNIXコマンドってなんぞやという人がいたら、下記などを参照してほしい。
→ゼロから始めるUNIX基本のコマンド集
・npm create vite@latest：Viteの最新バージョンでプロジェクトを作成
・carnival-vue-app：作成されるプロジェクトの名前（好きな名前でOK）
・--template vue-ts：Vue + TypeScript構成で作る(テンプレートで用意する）
次に、carnival-vue-appに移動し、npm installを実行する。
|
1 2 |
$ cd carnival-vue-app $ npm install |
もしnpm ERR! EACCES: permission denied, mkdir '/Users/user/.npm/_cacache/content-v2/sha512/a7/c6'のようなエラーが出たときは、下記を実行する。
|
1 |
$ sudo chown -R $(whoami) ~/.npm |
この EACCES（エーアクセス）は「権限がない（Permission Denied）」という意味。つまり、あなたが npm install したときに、npmは内部的に .npm/_cacache/... にアクセスしてキャッシュファイルを書き込もうとしたけど、そのフォルダが“別のユーザー”の所有になっていたため、書き込みできなかったというのが原因。権限の関係だということ。「.npmフォルダとその中身すべてを、自分のユーザーのものとして扱えるようにしてください」という命令を出す必要がある。
ちなみにコマンドの意味を説明すると、
・sudo 「管理者権限で実行してください」の意味
・chown 「所有者（オーナー）を変更する」というコマンド
・-R 「再帰的に（＝中のフォルダも全部）」
・$(whoami) 「今ログインしているユーザー名」を自動で取得（たとえば user）
・~/.npm npmのキャッシュや設定が入っている、ホームディレクトリ内の .npm フォルダ
では、さっそく開発サーバーを立ち上げてみよう。
|
1 |
$ npm run dev |
http://localhost:5173/にアクセスすれば、Vite + Vue + TypeScriptで動くアプリが立ち上がっている。
npm run devってなに？ なんでローカルサーバーを立ち上げないと動かないの？
VueやTypeScriptのコードは“そのままではブラウザが理解できない”
Vueの開発では .vue ファイルや .ts（TypeScript）ファイルを使うが、これらのファイルはブラウザが直接理解できる形式ではない。
ブラウザが理解できるのは、下記のとおり。
.html（HTML）
.js（JavaScript）
.css（スタイル）
たとえば、これから私たちが編集していこうとしている.vueファイルというのは、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <p>{{ message }}</p> </template> <script setup lang="ts"> import { ref } from 'vue' const message = ref('パイソンカーニバル') </script> <style scoped> p { color: red; } </style> |
のようなコードが書かれている。
HTML・JavaScript（しかもTypeScript）・CSSがひとつにまとまっているわけだが、ブラウザはこう思っているだろう。
え？ template？ script setup？ ref()って何？
つまり、Vueの書き方（構文）自体が、html,css,javascriptしか解さないブラウザにとっては“未知の言語”である。
TypeScriptにも同じことが言える。
|
1 |
let message: string = 'Hello' |
突然上記のコードが書かれたファイルをブラウザに読み込めといったところで、ブラウザは「: string」の部分を見てエラーを出す。TypeScriptの構文で使用する型情報（Type）は開発中だけに使うもので、ブラウザでは不要・未対応なのである。
人間にとっては開発しやすいしわかりやすくなっているが、
Vueの構文もTypeScriptの構文もブラウザにはわからない。
↓
じゃあどうする？
↓
ブラウザがわかるかたちに「変換」してあげる
↓
Vite（ヴィート）の登場
npm run dev をすると、Viteが下記のことをしてくれる。
・.vue ファイルを分解 → HTML, JavaScript, CSS に変換
・TypeScript（.ts）をJavaScriptに変換（トランスパイル） など
（この一連の処理を 「ビルド」 または 「トランスパイル」 と呼ぶ）
つまり.vue や .ts で書いたコードは、そのままではただの設計図や素材にすぎない。
npm run dev を実行すると、Viteがその設計図を読み取り、必要なパーツを組み立て、ブラウザが正しく表示・実行できるように変換して届けてくれる。これがViteのもっとも重要な裏方としての役割であり、VueやTypeScriptといった“モダンな開発技術”がスムーズに使える理由でもあるのだ。