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

モックアップのコーディングを依頼する際の注意点

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

• Nuxtでのコーディング
• ソースコードのバージョン管理
• 外部ツールの利用
• jQueryについて
• パフォーマンスへの対応
• レスポンシブへの対応

Nuxtでのコーディング

可能であればNuxtを利用したモックアップのマークアップをお願いします。特にコンポーネント化に重点を置いていただきたいです。

※コンポーネント化の例

• ページャ
• 記事の一覧
• 一覧に表示するカードUI

ソースコードのバージョン管理

• ソースコードのバージョン管理にはGitを利用してください。Gitを利用する環境としてはGitHubやBacklogのGit機能などが推奨されます。
• モックアップがプロジェクトのフェーズごとにアップデートされる場合は、各フェーズでタグ付けやブランチを分けていただきたいです。
• 最新のモックアップのCSSを本番環境に取り込んだ場合、意図しないスタイルが適用される可能性があります。

外部ツールの利用

JSやCSS（Sass/Scss）をwebpackやgulpなどのツールを使用して機能単位でモジュール化し、最終的にはこれらを1つのファイルにまとめてください。

jQueryについて

jQueryの利用は避けてください。NuxtにjQueryを取り込むことは可能ですが、モックアップのjQueryにNuxt側の実装が影響を受けてしまうため、サイトのパフォーマンス低下やリソースの増大を招く可能性があります。基本的にはJavaScriptでの実装をお願いします。

パフォーマンスへの対応

Webフォントを使用する場合は、ネットワーク環境が遅い場合でも対応できるようにしてください。例えば、display: swapの対応や、可能であればWebフォントを当てているテキストをSVGに置き換えるなどの対応をお願いします。

ローカル環境やモックアップの環境でGoogleフォントを利用した場合は特に問題はありませんが、実際にファイルがデプロイされた環境で閲覧すると、フォントファイルの読み込みが遅いなどの理由でページの読み込みが遅くなったり、テキストの表示がカクついたりする可能性があります。

レスポンシブへの対応

• PC/SPでデザインが異なる要素のHTMLは、できるだけ1つのソースで対応してください。
• レスポンシブの対応でPC/SPを切り替える場合、PC用のCSSファイルとSP用のCSSファイルを個別に用意して読み込むのではなく、CSSファイル内で mediaquery を利用してPC/SPの切り替えを行ってください。

モックアップを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/スタイルの操作は避けるべきです。