NuxtでStorybookを運用するために工夫したこと / What I did to build Storybook with Nuxt

Vue.js LT会
https://uniquevision.connpass.com/event/343955/

Transcript

1. ©ADWAYS DEEE Inc. NuxtでStorybookを運用するために工 夫したこと Vue.js LT会 1 yubaken 2025.02.18 ©ADWAYS DEEE Inc. ハッシュタグ: #UV_study
2. ©ADWAYS DEEE Inc. 自己紹介 名前： yubaken 所属： 株式会社ADWAYS DEEE アドテクノロジーディビジョン 第２ユニット アプリケーションエンジニア 主な業務：　フロントエンド全般の設計や開発 　　　　　　最近は生成AIを活用した新しいプロダクト開発に取り組み中 2
3. ©ADWAYS DEEE Inc. Delight Mission 喜び つくろう。 「よかった」が めぐる世界を。 Value Exciting わくわく こなすより、 夢中になろう。 Value Eager 熱心 傍観者より、 冒険者になろう。 Value Exceed 超える 前例にならうより、 前例になろう。 Mission & Value めぐる世界を。 小さな変化の積み重ねが革新に繋がる ADWAYS DEEEが世界を変える つくろう。 「よかった」が
4. ©ADWAYS DEEE Inc. 会社紹介 広告システムを作っております 4 Adways IR資料（2023年12月期 決算説明会）
5. ©ADWAYS DEEE Inc. 会社紹介 認知メインの広告（ディスプレイ広告）ではなく 体験メインの広告（アフィリエイト、リワード）を扱っています 5
6. ©ADWAYS DEEE Inc. 本題に入る前に 各種パッケージのおさらい 6
7. ©ADWAYS DEEE Inc. Nuxtとは？ 7 • Vue.jsベースのフレームワーク ◦ Vue.jsのコンポーネント指向の開発をより効率的に行うための機能を提供 ◦ Vue.jsの基本的な知識があれば、比較的簡単に習得可能 • 主な特徴 ◦ サーバーサイドレンダリング(SSR) / 静的サイト生成(SSG): ▪ SEO対策やパフォーマンス向上に効果的 ▪ 柔軟なレンダリングモードの選択が可能 (ユニバーサル、クライアントサイド、静的) ◦ モジュールシステム: ▪ Nuxt Modules を利用することで、様々な機能を簡単に追加可能(認証、PWA, etc.) ▪ 公式モジュールだけでなく、コミュニティ製のモジュールも豊富
8. ©ADWAYS DEEE Inc. Storybookとは？ 8 • UIコンポーネント開発ツール: ◦ コンポーネントを独立した環境で開発、テスト、ドキュメント化できる。 ◦ コンポーネントのカタログを作成し、チーム内で共有・再利用を促進。 • 主な特徴: ◦ コンポーネントの分離: ▪ アプリケーションのロジックから切り離して、コンポーネント単体の動作確認が可能。 ▪ コンポーネントの再利用性と保守性の向上。 ◦ インタラクティブな開発: ▪ コンポーネントのpropsをGUIで変更し、リアルタイムに表示を確認できる。 ▪ 開発効率の向上と、意図しない挙動の早期発見。 ◦ アドオン: ▪ 様々なアドオンを利用して機能を拡張可能 (アクセシビリティチェック、デザインツール連 携、etc.)。 ▪ コミュニティによって開発された多くのアドオンが存在。 ◦ 多様なフレームワークに対応: ▪ Vue.js, React, Angular など
9. ©ADWAYS DEEE Inc. NuxtにStorybookを導入するときに 直面した課題 9
10. ©ADWAYS DEEE Inc. • 問題点: ◦ 動作の不安定さ: ▪ 当時、導入したらエラーが多発して素直に導入できなかった • 再度今月に試したところ、`dev` モードでコンポーネントが表示されな い問題が残っていた。 ▪ 最新のNuxtバージョンに追従できていない可能性がある ◦ 初期設定が困難: ▪ 以前は npx storybook-nuxt init コマンドが動作せず、導入方法が不明確 だった ▪ npx storybook init で改善されたが、インストール中にフリーズする問題が ある 既存のNuxt Modules（@nuxtjs/storybook）の問題点 10
11. ©ADWAYS DEEE Inc. • 使ってみた際のログ: 既存のNuxt Modules（@nuxtjs/storybook）の問題点 11 % npx storybook init ... ✔ Do you want to manually choose a Storybook project type to install? … yes ? Please choose a project type from the following list: › - Use arrow-keys. Return to submit. ❯ nuxt ✔ Please choose a project type from the following list: › nuxt • Adding Storybook support to your "Nuxt" app ✔ Getting the correct version of 0 packages ... これ以降の処理が行われない ...
12. ©ADWAYS DEEE Inc. パッケージの動作が不安定、メンテナンスも あまり活発でないことから自前で動かすため に必要な環境を構築することを決意 12
13. ©ADWAYS DEEE Inc. 目指したNuxtとStorybookのプロジェクト構 成 13
14. ©ADWAYS DEEE Inc. • 基本的な構成: Storybook + Vue 3 の構成をベースにする。 ◦ Nuxtの組み込みStorybookに依存しないため、Storybookのバー ジョンアップに追従しやすい。 ▪ 比較的メンテナンスされているライブラリ @storybook/vue3 を使用 NuxtとStorybookのプロジェクト構成 14
15. ©ADWAYS DEEE Inc. 導入する上での課題 15 1. Vue関数（refやdefineProps 等）の自動import機能 2. コンポーネントの自動import機能 a. Element Plusを使用しているのでElement Plusコンポーネントの 自動登録 3. 3. Nuxt関連のコンポーネントが使えない
16. ©ADWAYS DEEE Inc. • NuxtにはVueで提供されているrefやdefinePropsなどの関数を importしなくても使える機能が提供されている ◦ nuxt:importsという名前のモジュールで定義されてい る:https://github.com/nuxt/nuxt/blob/main/packages/nuxt /src/imports/module.ts • Vueにも自動importのライブラリは存在している 「unplugin-auto-import」 ◦ https://github.com/unplugin/unplugin-auto-import Vue関数の自動import機能 16
17. ©ADWAYS DEEE Inc. • 「unplugin-auto-import」とは ◦ Vueのコンポーネントや関数を自動でimportしてくれるプラグイ ン Vue関数の自動import機能 // without import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) // with const count = ref(0) const doubled = computed(() => count.value * 2) 17
18. ©ADWAYS DEEE Inc. 設定例 Vue関数の自動import // .storybook/main.js import AutoImport from 'unplugin-auto-import/vite' const config = { async viteFinal(config) { config.plugins.push( AutoImport({ include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/,], imports: ["vue", "vue-router"], dts: false, }) ) 18
19. ©ADWAYS DEEE Inc. • Nuxtにはコンポーネントの自動読み込み機能が提供されています。 ◦ https://nuxt.com/docs/guide/directory-structure/compone nts ◦ 「./components」ディレクトリに格納されたvueファイルを自動 的に読み込む仕組み • storybookでは１つ１つimport文と書かないと認識しない コンポーネントの自動import機能 19
20. ©ADWAYS DEEE Inc. • Nuxtは自前で実装しているが、同様の機能として 「unplugin-vue-components」が提供されているのでこれを使用 ◦ https://github.com/unplugin/unplugin-vue-components コンポーネントの自動import機能 import Components from "unplugin-vue-components/vite" ... async viteFinal(config) { config.plugins.push( Components({ /* options */ }), ) } 20
21. ©ADWAYS DEEE Inc. • Readmeを読んでみると動かない理由がいくつかあった • 読み込み先の違い ◦ 標準では「./src/components」の自動読み込みを行っている ◦ 今回は「./components」を読み込まなければならない • prefixを付与しなければならない ◦ nuxtではディレクトリ階層に応じてコンポーネント名をきめてお り、「./components/parts/button.vue」であれば 「PartsButton」というコンポーネント名にしなければならない configにpushするだけでは動かなかった 21
22. ©ADWAYS DEEE Inc. • 今回のケースに対応したResolverが用意されていなかったので自前で 実装した ◦ ./components の .vue のファイルパス一覧を取得 ◦ import PartsButton from '~/components/parts/Button.vue' といった形になるようにjsonの形を生成する ▪ 例: { name: "default", alias: PartsButton, from: '~/components/parts/Button.vue' } ▪ この辺 READMEに書いてなかったのでちょっと苦戦した コンポーネントの自動import機能 22
23. ©ADWAYS DEEE Inc. Element Plusコンポーネントの自動import機能 • Element Plusを使用しているがこれはResolveが用意されているので それを利用する import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' ... Components({ resolvers: [ ElementPlusResolver(), ], }), 23
24. ©ADWAYS DEEE Inc. • NuxtLinkにはSSRのことも考慮された様々な機能が搭載されていてそのまま使うには難し かった • 現状リンクのような機能でしか使っていないのでStorybook上ではAタグのような扱いに 変換した NuxtLinkが使えない 24 // .storybook/preview.ts import { setup } from "@storybook/vue3" setup((app) => { app.component("NuxtLink", { props: { to: {...}, }, template: '<a @click="log"><slot></slot></a>'})})
25. ©ADWAYS DEEE Inc. • 他のNuxt独自のコンポーネント、関数を自動import出来ていない ◦ 現状Storybook化しているコンポーネントでは使用していないの で問題が起きていないが、今後の課題として残っている ◦ Nuxtでよく使われるuseFetch関数などはstorybookで管理する コンポーネントに含めずにemitを使って振る舞いを注入できるよ うにしていたので問題にならなかった ▪ 具体的に言うとPagesコンポーネントから渡している 残っている課題 25
26. ©ADWAYS DEEE Inc. 目指したい未来 26
27. ©ADWAYS DEEE Inc. 終わり Vue.js LT会 27 yubaken 2025.02.18 ©ADWAYS DEEE Inc. ハッシュタグ: #UV_study