Dance with Agents

そもそもVueとは何か

フロントエンドフレームワークの一長一短でReactと同じ「素のライブラリ」に分類したVueを見ていきます。

Reactの隣にあるもう一つの選択肢

Vueは、Evan You氏(元Google勤務、AngularJSの開発に携わった経験を持つ)が個人開発として始めたオープンソースのUIライブラリで、2014年に公開されました。画面をコンポーネント(部品)の組み合わせで作る、という基本の考え方はReactと共通しています。

テンプレート記法という違い

ReactのJSXは、JavaScriptの中にHTMLのような見た目を混ぜる書き方でした。Vueはその逆で、HTMLに近いテンプレートの中に、v-ifやv-forのような専用の書き方を混ぜます。

<template>
  <p v-if="isLoggedIn">こんにちは、{{ name }}さん</p>
</template>

地の文がHTMLに近いぶん、素のHTML/CSSの経験がある人には呼吸が合いやすい書き方だと言われます。テンプレート・処理・スタイルを1つの.vueファイルにまとめるシングルファイルコンポーネントが標準の書き方です。

「公式」が用意されている範囲がReactより広い

Reactでは各自が選ぶ部分——ルーティング(URLごとに、どの画面を表示するか決める仕組み)や状態管理(ログイン状態やカートの中身のように、複数の画面部品にまたがって共有する情報をまとめて管理する仕組み)——について、Vueには公式のライブラリが用意されています。ルーティングはVue Router、状態管理はPinia(以前はVuexが使われていましたが、現在はPiniaが推奨されています)。最初から一本化された選択肢があるぶん、決めることが少し減ります。ただし「公式のおすすめ」が常に自分のケースに最適とは限らない、という実例をこの記事の最後で紹介します。

ただし、これらはあくまで「公式に用意された選択肢」であって、Vue自体は依然として素のライブラリです。サーバー側レンダリング(SSR、ページをサーバー側で組み立ててから送る仕組み)のような仕組みは、Vue本体には含まれていません。

メタフレームワーク、Nuxt

ReactにとってのNext.jsにあたるのが、VueにとってのNuxtです。ルーティング・SSR/SSG(静的生成)・データ取得の方法をセットで提供する、メタフレームワークの位置づけです。基本的な考え方はNext.jsとはと共通しています。

実例:公式のおすすめより、実測を信じた話

管理人が開発に関わっているJyotish-ONE(インド占星術の計算・鑑定プラットフォーム)は、Vue 3・Vuex・Viteで組んだアプリです。SVGベースのチャート(ラグナチャートなど)を、日付や惑星を切り替えるたびに再計算・再描画する、常に画面が動き続けるタイプのツールです。

過去にNext/Nuxtへの移行を試したところ、動きが遅くなった経験があります。原因はSSRそのものというより、ルーティングなど周辺機能ごと読み込まれるオーバーヘッドの比重が大きいと見ていて、2026年に次期バージョンの設計を検討したときも、あらためてNuxtを採用しない判断をしました。詳しい判断の軸はフロントエンドフレームワークの一長一短にまとめています。

もう1つ、状態管理でも同じ判断がありました。かなりの時間をかけて、現在推奨されているPiniaへの載せ替えを進めたところ、かえって以前使っていたVuexより処理が遥かに遅くなる、というオチが待っていました。次期バージョンでもVuexを使い続ける判断をしています。Piniaは公式に推奨されている、いわば「いまの標準」ですが、この規模の状態を抱えるアプリでは、時間をかけた実測のほうがその推奨を上回りました。

「新しくて公式に推奨されているもの」が、必ずしも自分のアプリに合うとは限りません。 ライブラリはどれも一長一短で、名前や評判だけで乗り換えるのではなく、自分の「使い所と目的」に照らして実際に確かめることの大切さを、この2つの経験は物語っています。

まとめ

  • Vueは、HTMLに近いテンプレート記法を持つUIライブラリ。基本の考え方はReactと共通
  • ルーティング・状態管理に公式の選択肢が用意されている点がReactとの違い
  • Vue自体は素のライブラリで、SSRなどはメタフレームワークNuxtの領分
  • 常に画面が動き続けるアプリでは、Nuxtを選ばない判断もありうる——優劣ではなく、用途次第
  • 公式のおすすめ(Nuxt・Pinia)より、実測を信じた判断が実際にあった——新しい・推奨されているというだけで乗り換えず、自分のケースで確かめる大切さ

フロントエンド / JSの記事

フロントエンド / JSのページへ →