Upgrade to Pro — share decks privately, control downloads, hide ads and more …

(Vue Fes Japan 2022) デザインシステムを後から導入する前提で作った 変更に強いNuxt3 プロジェクト

(Vue Fes Japan 2022) デザインシステムを後から導入する前提で作った 変更に強いNuxt3 プロジェクト

弊社では将来的に弊社独自のデザインシステムの設計の後、既存のプロジェクトをすべて置き換えていく予定となっています。
私は、直近立ち上がった新規プロジェクトにて、将来的にデザインシステムに置き換わることが確実であることを前提として、変化に強く、テストコードによる品質を担保できるNuxt3プロジェクト開発基盤を作りましたので、本セッションにて共有できればと思います。

hacomono Inc.

January 30, 2023
Tweet

More Decks by hacomono Inc.

Other Decks in Programming

Transcript

  1. CV CV やりがちな失敗 • organism ? molecule ? 区別がつかない •

    molecule が fetch してるのを “コードレビューで” 防ぐの辛い • 結局 src/components/* 以下が汎用 / 非汎用 が混在してカオスになる
  2. CV CV 実装向けの Atomic Design の拡張 Atoms, Molecules (Vue3 components)

    Atoms, Molecules を区別しない Nuxt3 とは違うプロジェクトで Vue3 Component として実装 将来的に Design System に置き換えていく Organisms (Nuxt3 src/components/*) Domain, Nuxt Contextに 紐付くなら粒度に限らず Organisms 粒度に限らず fetch 等して良い Nuxt3の src/components に配置
  3. CV CV 構成のメリット Atoms, Molecules (Vue3 components) composable が auto-import

    されない Domain データの interface が Nuxt 側にあり 参照できない 汎用的な作りがほぼ強制される Organisms (Nuxt3 src/components/*) composable を利用できる 汎用コンポーネントがほぼ作られない DesignSystem を import して使う体制に近い
  4. CV CV おさらい Atoms, Molecules (Vue3 components) Atoms, Molecules を区別しない

    Nuxt3 とは違うプロジェクトで Vue3 Component として実装 将来的に Design System に置き換えていく Organisms (Nuxt3 src/components/*) Domain, Nuxt Context (vue-routerなど)に 紐付くなら粒度に限らず Organisms 粒度に限らず fetch 等して良い Nuxt3の src/components に配置
  5. CV CV • Storybook に表示されるものを正とする • (Storybook 6.4以上) play function

    もなるべく実装 • 必要ならドキュメントも作る • Chromatic を利用して Visual Regression Test を実施 vue3 component 実装ルール
  6. CV CV • すべての API コールは server/api の処理を経由すること (※) •

    server/api では、取得データを ViewModel に変換して返す fetch 処理実装時のルール ※ Sentry, DataDog などは除く
  7. CV CV • 取得データ → ViewModel 変換処理が client の js

    に含まれない • useFetch が型安全 • useFetch, useAsyncData によるキャッシュフローが実装しやすくなる • ViewModel だけを考慮する mock サーバが作れる server/api を必ず実装する メリット
  8. CV CV server/api の モックサーバの作り方 2 import type { Health

    } from '~/lib/models/health' declare const url: string export default defineEventHandler<Health>( async (event) => { // 外部から値を取ってきて const result = await $fetch(url) // ゴニョゴニョいじって返す return toHealth(result) } ) function toHealth(response: unknown): Health { // … } src/server/api/health.get.ts test/server/api/health.get.ts import type { Health } from '~/lib/models/health' import mock from './health.json' export default defineEventHandler<Health>(() => { // モックデータの JSON を返すだけ return mock })
  9. CV CV nuxt.config.ts に以下を追記 .. server/api の モックサーバの作り方 3 //

    おまじない hooks: { 'nitro:config': (config: NitroConfig) => { if (isTest()) { const testServer = resolve(__dirname, './test/server') config.srcDir = testServer config.scanDirs = [testServer] } } }
  10. CV CV 実装するテストコード import { test, expect } from '@playwright/test'

    test.describe('/login', () => { test('画面表示', async ({ page }) => { // ページを表示 await page.goto('./login') // 描画完了を待つ await page.waitForLoadState('domcontentloaded') // 描画結果をスナップショットテスト await expect(page).toHaveScreenshot() // おわり }) }) test.afterEach(async ({ page }) => { await page.close() })
  11. CV CV 1. Atomic Design の構成を機械的に維持できる Atoms, Molecules は Nuxt3

    の src/components/* に実装しない Vue3 プロジェクトに切り出して作る まとめ
  12. CV CV 2. 影響範囲がわかる状態 Atoms/Molecules を Storybook, Chromatic で VRT

    Pages を Playwright で VRT Playwright でのテストの実装を容易にするには server/api の実装とモックサーバ化があると楽 まとめ
  13. CV CV この構成にした他のメリット • テスト実装工数が少なめ • OpenAPI → GraphQL に変更する予定としても変更に強い

    • フロントエンド初心者には比較的易しめ ◦ Vue, Nuxt の難易度の低さも相まって ◦ Storybook のお作法を覚えてね という辛さはある まとめ