Nuxt3にStorybookを正しく入れてみた

Transcript

1. Nuxt3 にStorybook を正しく入れてみた ~ 約3 ヶ月の奮闘記~ IIHARA 議長 / エンジニア達の「完全に理解した」Talk 　#47
2. 目次 01 自己紹介 02 前提状況 03 調査 & トライアンドエラー 04 結果 エンジニア達の「完全に理解した」Talk 　#47 2
3. 自己紹介
4. IIHARA 議長 株式会社メタップスホールディングス エンジニア 23 新卒で入社後、re:shine 開発を担当 Vue/Nuxt Rails Lit を主に書きます Github: https://github.com/Gityosan Qiita: https://qiita.com/Gityosan Zenn: https://zenn.dev/iihara メタップスホールディングス 「UNLEASH THE WORLD( 世界を解き放つ) 」 をビ ジョンにre:shine とSRE:shine の二つのサービスを展 開 エンジニア達の「完全に理解した」Talk 　#47 4
7. 前提状況
8. フロントエンドがVue3 で出来ているreshine でもNuxt3 移行を検 討し始めた その中でStorybook 入れたいという話もあった → そこで個人で管理しているNuxt3 用開発テンプレート「Nuxt3- template 」リポジトリで導入可能か検証することに エンジニア達の「完全に理解した」Talk 　#47 8
9. しかし、Nuxt3 は唯一主要フレームワークの中でStorybook 公式 ライブラリが提供されていない → 自力で環境をセットアップする必要がある エンジニア達の「完全に理解した」Talk 　#47 9
10. どれも基本的にはStorybook 公式の Vue ライブラリをベースにしており、 vue やvue-router 由来の関数群は使え ても、useNuxtApp やuseFetch な どのNuxt 由来の関数群が使えな い。。。 → 困った (´-ω-`) エンジニア達の「完全に理解した」Talk 　#47 10
11. さらに調べてみると...
12. Storybook-nuxt というNuxt 用 storybook のmodule ライブラリを発 見！ README にはDemo も用意されてい て早速使ってみることに。 エンジニア達の「完全に理解した」Talk 　#47 12
13. ここからが地獄の始まり 調査 & トライアンドエラー編
15. → error の嵐 覚えている主要なエラーとしては #build や #component といった特殊なalias が解決できない なぜがvue ファイルが二重でビルドされ、ビルド後ファイルを見ると同 じ関数が２度import されて名前重複のためエラーになる Nuxt3.7 以降ではNuxt 自体のビルド方法が内部的に変わったためかいく つかの内部import が解決できなくなる エンジニア達の「完全に理解した」Talk 　#47 15
16. ここで大幅に時間を食ってしまう 最初はライブラリのみを入れて動かそうとした。エラーは状況が違う故の 設定不足だと思っていた。 しかし、２ヶ月くらいトライしても一向にエラーが全て解消できそうにな い状況にとにかく動く環境を一つ再現することにシフト Demo 上では確かに動いている。しかし、でもを下ろして立ち上げるとエ ラーが発生してしまう... エンジニア達の「完全に理解した」Talk 　#47 16
17. 残る違いといえば、、、 自分はパッケージマネージャーとしてyarn の1 系を使用していたが、Demo はpnpm の8 系だった。 → そこか！気付けた時は嬉しかった エンジニア達の「完全に理解した」Talk 　#47 17
18. 結果
19. リポジトリを分けた エンジニア達の「完全に理解した」Talk 　#47 19
20. Thank you for listening!!