Vue のさまざまな活用方法 #

私たちは、Web に「どんな場合にも通用する」ストーリーはないと考えています。このため、Vue は柔軟で段階的に採用できるよう設計されています。ユースケースに応じて、Vue はスタックの複雑さ、開発者体験、およびエンドパフォーマンスの最適なバランスを取るために、さまざまな方法で使用できます。

スタンドアロンスクリプト #

Vue は、ビルド不要でスタンドアロンのスクリプトファイルとして使用できます。バックエンドフレームワークがすでに HTML の大部分をレンダリングしている場合、またはフロントエンドのロジックがビルドを必要とするほど複雑でない場合、これは Vue をスタックに統合するもっとも簡単な方法です。このような場合、Vue は jQuery をより宣言的に置き換えたものと考えることができます。

Vue は、既存の HTML を徐々に強化するために特に最適化されたpetite-vueと呼ばれる代替ディストリビューションも提供しています。これは、機能セットは小さいですが、非常に軽量で、ビルドステップなしのシナリオでより効率的な実装が使用されています。

組み込み用 Web コンポーネント #

Vue を使用して、レンダリング方法に関係なく、任意の HTML ページに埋め込むことができる標準の Web コンポーネントを構築することができます。このオプションを使用すると、完全に利用者に依存しない方法で Vue を活用できます。結果として得られる Web コンポーネントは、レガシーなアプリケーションや静的な HTML、あるいは他のフレームワークで構築されたアプリケーションに埋め込むことができます。

シングルページアプリケーション (SPA) #

アプリケーションによっては、フロントエンドにリッチなインタラクティビティと簡易ではないステートフルなロジックを必要とするものがあります。このようなアプリケーションを構築する最良の方法は、Vue がページ全体を制御するだけでなく、ページを再読み込みすることなくデータの更新やナビゲーションを処理するアーキテクチャを使用することです。このようなアプリケーションは、一般にシングルページアプリケーション (SPA) と呼ばれます。

Vue は、モダンな SPA を素晴らしい開発者体験で構築するために、以下のようなコアライブラリと包括的なツールのサポートを提供します。

• クライアントサイドルーター
• 高速なビルドツールチェーン
• IDE のサポート
• ブラウザーの開発ツール
• TypeScript との統合
• テストユーティリティ

SPA では通常、バックエンドが API エンドポイントを公開する必要があります。しかし、Vue とInertia.jsなどのソリューションを組み合わせれば、サーバー中心の開発モデルを維持しながら SPA の利点を得ることもできます。

フルスタック / サーバーサイドレンダリング (SSR) #

SEO や表示速度が重要なアプリの場合、純粋なクライアントサイド SPA は問題があります。これは、ブラウザーがほとんど空の HTML ページを受け取り、何かをレンダリングする前に JavaScript が読み込まれるまで待機しなければならないためです。

Vue は、Vue アプリをサーバー上の HTML 文字列に「レンダリング」するための一流の API を提供します。これにより、サーバーはすでにレンダリングされた HTML を送り返し、エンドユーザーは JavaScript をダウンロードしている間、コンテンツをすぐに見ることができるようになります。そして Vue は、クライアント側でアプリケーションを「ハイドレート」して、インタラクティブなものにします。これは サーバーサイドレンダリング (SSR) と呼ばれ、 Largest Contentful Paint (LCP) などの Core Web Vital のメトリクスを大きく向上させます。

このパラダイムの上に構築された Vue ベースの上位フレームワークとしてNuxtなどがあり、Vue と JavaScript を使ってフルスタックアプリケーションを開発することが可能です。

JAMStack / 静的サイトジェネレーション (SSG) #

サーバーサイドレンダリングは、必要なデータが静的なものであれば事前に行うことができます。つまり、アプリケーション全体をあらかじめ HTML にレンダリングし、静的ファイルとして提供することができるのです。これにより、サイトのパフォーマンスが向上し、リクエストごとにページを動的にレンダリングする必要がなくなるため、デプロイが非常に簡単になります。Vue は、このようなアプリケーションをハイドレートして、クライアント上でリッチなインタラクティビティを提供できます。この手法は、一般に静的サイトジェネレーション (SSG)と呼ばれ、JAMStackとしても知られています。

Vue チームは、VitePressと呼ばれる静的サイトジェネレーターを保守しており、あなたが今読んでいるこの Web サイトを動かしています！さらに、Nuxtも SSG をサポートしています。同じ Nuxt アプリの中で、異なる経路の SSR と SSG を混在させることも可能です。

Web 以外 #

Vue は主に Web アプリケーションを構築するために設計されていますが、決してブラウザーだけに限定されるものではありません。以下のことが可能です。

• Electron や Tauri を使ってデスクトップアプリケーションを構築する
• Ionic Vue でモバイルアプリを構築する
• Quasar で、同じコードベースからデスクトップとモバイルのアプリをビルドする
• Vue の Custom Renderer API を使って WebGL や the terminal を対象としたカスタムレンダラーをビルドできます！