Vue.js の環境構築方法について、目的別におすすめの方法をいくつか紹介します。
前回の記事でも説明した通り、Vue.js のプロジェクトを作成する方法はいくつかあります。
公式ドキュメントを参照してみるといくつか載っています。
今回はこのここに載っているものも、載っていないものも含めて、いくつかの方法を紹介します。
分類
具体的な方向を見ていく前に、ざっくりと分類してみます。
ほかにもいろんな分類ができるかもしれませんが、今回は「Node.js の有無」「フレームワークの有無」という 2 つの軸で分類してみました。
イメージ的には、下に行けば行くほど「素の Vue」に近いです。
おそらくこの中だと、最も生の HTML/CSS/JS に近いものは CDN を利用する方法で、
ここを基準に Node.js を導入することで開発体験の向上が期待できると思います。
さらに、それらを合わせたフレームワークを利用することでより効率的な開発ができると思います。(いろんな機能や枠組みが用意されていている)
これらの方法は優劣をつけるものではなく、適材適所であることに注意してください。
必ずしも高機能な方がいいというわけでもないですし、逆もしかりです。
どういう時に使えるかなども例を出しながら、これからいくつか説明していきます。
🏔 Nuxt
Nuxt です。Vue.js のフレームワークの中で最も有名で人気の高いものです。
「Web アプリケーションを実装するための機能は一通り用意されている」と言っても過言ではないでしょう。
npx nuxi@latest init <project-name>
# 起動まで
cd project-name
npm install
npm run dev
のように簡単に Vue (Nuxt) のプロジェクトを始めることができます。
そもそもフレームワークってなんなんだ？
Vue.js 自体も「プログレッシブフレームワーク」と言っており、フレームワークではあるのですが、Nuxt は Vue.js をベースにしている「メタフレームワーク」と呼ばれるものの一種です。
元々の Vue.js の機能はもちろん全て使えますし、それに加えいろんな機能が用意されています。
ここで理解し切る必要はありませんが、いくつかの機能を紹介します。
(たくさんありすぎるので一部だけです)
✅ ファイルシステムベースのルーティング
ページ遷移の実装をいい感じに行うためのものです。
✅ さまざまなレンダリングモード
SSR, CSR はもちろん、それぞれをページごとに組み合わせたり、アイランドアーキテクチャなどもサポートしていたりもます。(experimental)
レンダリングモードではデータフェッチングが重要になってきますが、その辺りの抽象化も行われていて、便利に開発することができます。
✅ ミドルウェアシステム
さまざまなミドルウェアを実装することができるような枠組みが用意されています。
✅ 状態管理
SSR を念頭においた状態管理を行うための仕組みが用意されています。
特にライブラリ等を別途用意する必要なく、すぐに始めることができます。
✅ SEO
SEO にまつわる実装も簡単に行えるように色々整っています
👍 どんな時にお勧めできるか
- Vue.js でゼロから Web アプリケーションを作る時
何かしらのアプリケーションを作りたい場合は Nuxt が最もお勧めできるでしょう。
👎 どんな時はお勧めできないか
- Vue.js についての勉強をしたいとき
Nuxt は Nuxt で慣れるまで時間が必要です。 Vue.js に慣れていないうちに Nuxt を使い始めてしまうと逆に混乱することがあるかもしれません。
ある程度 Vue.js に慣れてきて「よし、Vue.js で何か作ってみるか」「Nuxt の勉強もしてみるか」というようなシチュエーションで使うといいでしょう。
※ もちろん、Vue.js を使いこなすまで使うなと言いたいわけではありません。もちろん Nuxt を使いながら Vue.js の勉強を進めることもできます。
ただ、Vue.js を全く知らない状態で手を出す前に少し先に Vue について知っておいた方がやりやすいかと思います。
✌️ create vue
こちらは公式ドキュメントの方でも紹介されています。
npm create vue@latest
# 起動まで
cd project-name
npm install
npm run dev
で簡単に Vue.js のプロジェクトを始めることができます。
使い方は是非 公式ドキュメント を参照してください。
所々 Vite という単語が出てきますが、これはいい感じの開発ツールだと思ってれば OK です。
実は、先ほど紹介した Nuxt もデフォルトだと Vite が使われます。
こちらの create vue は Nuxt に比べてシンプルです。
複雑で高機能なものは用意されておらず、Web アプリケーションを作る際には色々と自分で用意してくる必要がありますが、手軽に Vue.js のプロジェクトを始める際にはとてもお勧めです。
一応、最初に選択肢として状態管理やルーティングを行うためのライブラリを利用するかどうかは選べるようになっています。
👍 どんな時にお勧めできるか
- Vue.js についての勉強をしたい時
シンプルなので Vue.js に集中することができます。 - Nuxt のようなフレームワークは使わずに自分で色々と用意したいとき
これはそこそこ上級者向けです。初学者のうちはあえて用意された道を外す理由は特にないので Nuxt を使っておくのが安牌です。 - Nuxt ほど大きなものではなく、ちょっとしたシンプルなものを作りたい時
正直なところ、小さい開発でも Nuxt を利用した方がサクッと作れることが多いので、特別な理由がなければ Nuxt を使った方がいいかもしれません。
場合によって本当にテキトーな Playground を作りたい場合などでは小さいので便利です。
分別が付かなければとりあえず Nuxt を使っておくのが安牌です。
👎 どんな時はお勧めできないか
- Nuxt と同じような機能を求めている時
- 大きめの開発
⚡️ Vite CLI
こちらは先ほどからちらほら名前が出てきる、Vite が用意してくれている Vue のスターターです。
Vite が何かについてはまた別の記事にでもしようかと思います。
こちらは先ほどの create vue とほとんど同じですが、より簡素な物になっています。
個人的にはサクッと Vue の動作を手元で確認したいときは一番よく使います。
# npm 7+ は追加で 2 つのダッシュが必要:
npm create vite@latest my-vue-app -- --template vue
で簡単に Vue.js のプロジェクトを始めることができます。
👍 どんな時にお勧めできるか
create vue と同じ
👎 どんな時はお勧めできないか
create vue と同じ
☁️ CDN
こちらは公式ドキュメントでも説明されています。
この方法では Node.js を必要としません。
HTML に Vue を CDN 経由で読み込むための記述を記載し、使うだけです。
CDN というのはインターネット上でコンテンツを配信しているシステムだと思ってもらえれば OK です。
HTML にそれ(CDN で配信されている Vue)を読み込むための記述を記載し、使うだけです。
<!-- これを書くと CDN から Vue を読み込むことができる -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const message = ref("Hello vue!");
return {
message,
};
},
}).mount("#app");
</script>
この方法は最も「素の Vue.js」 に近いです。
開発を便利にするためのツール (Vite など) は利用していません。
単純に純粋な Vue.js のソースコードを JavaScript としてブラウザに読み込んでそれを利用しているだけです。
👍 どんな時にお勧めできるか
- Node.js を使えない環境で Vue.js を使いたいとき
すでに構築された Web サイトの一部でちょろっと Vue.js を使いたい時などにとても便利です。
👎 どんな時はお勧めできないか
- Vue.js の学習をしたい時
はっきり言って、Vue.js の学習をするためにはあまり向いていません。
学習を効率的にやるにしては不便すぎます。
特に理由がない限り、他の方法を使うことをお勧めします。 - アプリケーションを作りたい時
アプリケーションを作るための方法としては向いていません。
上記と理由は重複しますが、他の方法に比べるとかなり不便です。
❗️ 番外編
ここまでで Vue.js のプロジェクトを始めるための方法をいくつか紹介しました。
ここからは番外編です。
Vue 初学者が最初に選択する物ではありませんが、便利なものがいくつかあるので紹介しておきます。
Vitepress
SSG (Static Site Generator) のフレームワークとして知られています。
SSG ってなんだよ！って感じだとは思いますが、ざっくり言うと、ビルド時にあらかた静的ファイルにしてしまうようなものです。(分からなくていいです)
これの面白いところは、用意されているテーマが使いやすいという点とマークダウンでページを書けるという点です。
ドキュメンテーションのサイトを作成する時などに非常に役に立ちます。
Vue.js や Vite の公式ドキュメントも Vitepress で作られています。
VitePress の公式ドキュメントの見た目のサイトをいくつかみたことある方もいるのではないでしょうか。それらは大体 Vitepress で作られています。
Docus
Vitepress の Nuxt 版みたいなやつです。
マークダウンでページをかけたりするのに加え、ファイルシステムベースのルーティングなどが行えます。
Vike
こちらは Vue や React などを選択して構築することができるフレームワークです。
元々は Vite で SSR をやるためのプラグインとして始まったものがフレームワークとして発達しました。(SSR についてはとりあえず理解しなくて良いです。)
Vue SFC Playground
こちらは環境構築ではないんですが、手軽に Vue.js を試すことができるサイトとして紹介します。
環境構築なしでブラウザ上で Vue のコードを書いて実際に色々試すことができます。
ひょっとすると Vue.js を学習する上でも使えるかもしれません。
(個人的にはぜひ環境構築を頑張る方向をメインにしてほしいです)
手軽に動かしたり、誰かに共有したりする時にとても便利です。
まとめ
今回は Vue.js でプロジェクトを始めるいくつかの方法とそれぞれの分類について説明してみました。
「自分はこんなの使ってる！」とか、「向いてないって書かれてるけど意外と行けるぞ！」みたいな意見があればぜひコメントください。
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
Discussion