パフォーマンスとセキュリティ / Learch

パフォーマンスとセキュリティ

パフォーマンスのベストプラクティス

Vue.jsにおけるパフォーマンス最適化には、以下のようなアプローチがあります。

コンポーネントの遅延ロード: 大きなアプリケーションでは、ルートレベルのコンポーネントを遅延ロードすることで、初期ロード時のJavaScriptのサイズを削減できます。
```
const About = () => import('./views/About.vue');

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
```
v-ifとv-showの適切な使用: v-ifは条件に基づいてDOM要素を完全に削除または再作成しますが、v-showはCSSで表示を切り替えるだけです。使用状況に応じて選択します。
リストレンダリングでのキーの使用: v-forを使う際、各要素に一意のkeyを割り当てることで、Vueがリストをより効率的に更新できるようにします。
```
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
```

セキュリティのベストプラクティス

XSS攻撃の防止: ユーザー入力をそのままHTMLに埋め込む場合は、v-htmlの使用を避け、常にエスケープ処理を行ってください。
APIアクセスにおけるセキュリティ: APIを叩く際には、HTTPSを使用し、CORSポリシーを適切に設定してください。
環境変数の管理: 機密情報（APIキーなど）は、クライアントサイドのコードに直接含めず、環境変数を通じて管理します。

静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)

Nuxt.jsを使わずにVue.jsで静的サイト生成(SSG)やサーバーサイドレンダリング(SSR)を実現する方法は、Vue.jsのエコシステム内の他のツールやライブラリを利用することになります。ここでは、Vue.jsのSSRとSSGを手動で設定する方法について説明します。

サーバーサイドレンダリング(SSR)

Vue.jsのSSRを手動で実装するには、vue-server-rendererパッケージを使用します。これはVue.jsの公式SSRライブラリで、Node.jsサーバー上でVueコンポーネントをレンダリングする機能を提供します。

パッケージのインストール
必要なパッケージをインストールします。
```
npm install vue vue-server-renderer express
```

サーバーの作成
Expressを使用してSSRサーバーを設定します。

// server.js
const express = require('express');
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

const app = express();

app.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>訪問されたURLは： {{ url }} です</div>`
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

const port = 8080;
app.listen(port, () => {
  console.log(`サーバーが http://localhost:${port} で起動しました`);
});

Vue.jsでSSGを実現するには、ビルド時に静的なHTMLファイルを生成することになります。これは、プリレンダリングとも呼ばれ、特定のパスに対してあらかじめHTMLファイルを生成しておく方法です。vite-ssgは、ViteをベースにしたVue 3アプリケーションで静的サイト生成(SSG)を実現するためのツールです。このツールを使用すると、ビルド時に静的なHTMLファイルを生成し、高速なローディングパフォーマンスとSEOの利点を享受できます。ここでは、vite-ssgを使用した基本的なSSGの設定方法を説明します。

ステップ 1: `vite-ssg`のインストール

まずは、新しいVue 3プロジェクトを作成し（既にプロジェクトがある場合はこのステップをスキップ）、vite-ssgをプロジェクトに追加します。

npm init vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm install vite-ssg

ステップ 2: `main.js`を`vite-ssg`に対応させる

プロジェクトのエントリーポイントをvite-ssgに対応させます。main.js（またはmain.tsがTypeScriptを使用している場合）を以下のように編集します。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import { ViteSSG } from 'vite-ssg'
import routes from './routes' // あなたのルート定義

// ルーターのインスタンスを作成
const router = createRouter({
  history: createWebHistory(),
  routes,
})

// `ViteSSG`関数を使用してアプリをエクスポート
export const createApp = ViteSSG(
  App,
  { router },
  (ctx) => {
    // アプリケーションのカスタマイズ（プラグインの使用、状態の復元など）
  }
)

ステップ 3: 静的サイトのビルド

vite-ssgを使用して、静的なサイトをビルドします。package.jsonにビルドスクリプトを追加し、ビルドを実行します。

{
  "scripts": {
    "build": "vite-ssg build",
    "serve": "vite-ssg serve"
  }
}

コマンドラインで以下を実行します。

npm run build

ビルドが完了すると、distディレクトリに静的ファイルが生成されます。これらのファイルを任意の静的ファイルホスティングサービスにデプロイすることで、SSGサイトを公開できます。

ステップ 4: ローカルでのプレビュー

ビルドしたサイトをローカルでプレビューするには、以下のコマンドを実行します。

npm run serve

これにより、ビルドされた静的ファイルをローカルサーバーで確認できます。

Vueテスト

Vue実践練習