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としても知られています。

SSG にはシングルページとマルチページの 2 種類があります。どちらも静的な HTML にプリレンダリングするものですが、違いは次のとおりです:

• 最初のページロードの後、シングルページの SSG はページを SPA に「ハイドレート」します。これは、より多くの先行する JS ペイロードとハイドレーションのコストを必要としますが、ページ全体をリロードする代わりに、ページのコンテンツを部分的に更新する必要があるだけなので、その後のナビゲーションはより高速になります。

• マルチページ SSG はナビゲーションごとに新しいページをロードします。その利点は、最小限の JS で動作することです - あるいは、ページがインタラクションを必要としない場合は JS がまったく不要になります！ Astro のような一部のマルチページ SSG フレームワークは、「部分的なハイドレーション」もサポートしています。これは、Vue コンポーネントを使用して、静的な HTML 内にインタラクティブな「アイランド」を作成できます。

シングルページの SSG は、簡易でないインタラクティビティ、深いセッションの長さ、あるいはナビゲーションをまたぐ要素や状態の持続を期待する場合に適しています。そうでなければ、マルチページ SSG がより適しています。

Vue チームは、VitePress と呼ばれる静的サイトジェネレータもメンテナンスしており、今あなたが読んでいるこの Web サイトを動かしています！　VitePress は SSG の両方の種類をサポートしています。Nuxt もまた SSG をサポートしています。同じ Nuxt アプリの異なるルートで SSR と SSG を混在させることもできます。

Web 以外 ​

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

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