Vue/Nuxt実装時の注意点について

モックアップをNuxtに取り込む際の注意点

このセクションでは、以下の要点を取り上げます。

• Nuxtルーターの使用例
• 動的コンポーネントの移行（ギャラリー、スライダー、モーダルなど）
• コードの再利用
• コンポーネントデータのやり取り方法

Nuxtルーターの使用例

Nuxtのデフォルトのルーティングシステムは基本的なケースをサポートします。 例えば、

• 静的なページ（/about）
• IDによる詳細ページ（/item/:id）
• 子ページ（/parent/child）

などです。しかしながら、より複雑なケースに適応するためには、手動で作成したルーターの使用が求められます。

例えば、アプリケーションが次の構造を必要とする場合

/
/rent
/rent/appartment/
/rent/appartment/:city
/rent/house/
/rent/house/:city
/rent/investment/
/rent/investment/:city
/buy
/buy/:type/:city
/buy/:type/help

こういったケースでは、Nuxtのデフォルトのルーターをそのまま使うと、同じページを14回作成しなければならない問題があります。これを避けるためには、以下の手順を踏むと良いです。

1. /pages/rentbuy/index.vue のようなページコンポーネントを作成する。
2. nuxt.config.js に extendRoutes ルールを追加する。

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          name: 'rent-buy-page',
          path: '/:operation(rent|buy)/:type?/:city?',
          component: resolve(__dirname, '/pages/rentbuy/index.vue'),
        },
      )
    }
  }
}

ページコンポーネントでは、router/component propsからoperation, type, cityパラメータを処理します。

ただし、このケースの注意点として、パスを動的にする場合、SSGで生成されるページが増えてしまい、ビルド時間やデプロイファイルサイズが増えてしまう可能性があります。そのため、場合によってはリクエストパラメータを利用して、CSR（クライアントサイドレンダリング）でコンテンツの内容を動的に変更する方法も考慮してください。

備考

• Nuxtルーターの拡張 ファイルシステムルーティング
• Vue Router Vue Router

モックアップから動的なコンポーネントの移行（ギャラリー、スライダー、モーダルなど）

動的なコンポーネント（ギャラリー、スライダー、モーダルなど）の移行時には、以下の原則に従いましょう。

• カプセル化すること。
• グローバルスクリプトの使用を避けること。
• 全てのロジックをコンポーネント内に配置すること。
• JS/JQueryスタイルのDOM操作を避けること。Vueはclass/style管理ツールを持っているので、それを使いましょう。

コードの再利用

Vueアプリケーションでは、ミックスイン、プラグイン、フィルターなどを使ってロジックを再利用することができます。同じロジックを使用する複数のコンポーネントがある場合は、それをミックスインに移動させ、コードの重複を避けましょう。

備考

Mixins — Vue.js

コンポーネントデータのやり取り

コンポーネント間のデータのやり取りには、親から子へのプロップスの渡し方、イベントエミッターを使った子から親へのデータの送り方、Vuexの利用など、Vueが提供するさまざまな方法があります。コンポーネントの外部での直接的なDOM/スタイルの操作は避けるべきです。