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

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

IIHARA
November 28, 2023

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

IIHARA

November 28, 2023
Tweet

More Decks by IIHARA

Other Decks in Technology

Transcript

  1. Nuxt3
    にStorybook
    を正しく入れてみた
    ~
    約3
    ヶ月の奮闘記~
    IIHARA
    議長 /
    エンジニア達の「完全に理解した」Talk
     #47

    View full-size slide

  2. 目次
    01
    自己紹介
    02
    前提状況
    03
    調査 &
    トライアンドエラー
    04
    結果
    エンジニア達の「完全に理解した」Talk
     #47
    2

    View full-size slide

  3. 自己紹介

    View full-size slide

  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

    View full-size slide

  5. 前提状況

    View full-size slide

  6. フロントエンドがVue3
    で出来ているreshine
    でもNuxt3
    移行を検
    討し始めた
    その中でStorybook
    入れたいという話もあった

    そこで個人で管理しているNuxt3
    用開発テンプレート「Nuxt3-
    template
    」リポジトリで導入可能か検証することに
    エンジニア達の「完全に理解した」Talk
     #47
    8

    View full-size slide

  7. しかし、Nuxt3
    は唯一主要フレームワークの中でStorybook
    公式
    ライブラリが提供されていない

    自力で環境をセットアップする必要がある
    エンジニア達の「完全に理解した」Talk
     #47
    9

    View full-size slide

  8. どれも基本的にはStorybook
    公式の
    Vue
    ライブラリをベースにしており、
    vue
    やvue-router
    由来の関数群は使え
    ても、useNuxtApp
    やuseFetch

    どのNuxt
    由来の関数群が使えな
    い。。。

    困った (´-ω-`)
    エンジニア達の「完全に理解した」Talk
     #47
    10

    View full-size slide

  9. さらに調べてみると...

    View full-size slide

  10. Storybook-nuxt
    というNuxt

    storybook
    のmodule
    ライブラリを発
    見!
    README
    にはDemo
    も用意されてい
    て早速使ってみることに。
    エンジニア達の「完全に理解した」Talk
     #47
    12

    View full-size slide

  11. ここからが地獄の始まり
    調査 &
    トライアンドエラー編

    View full-size slide

  12. → error
    の嵐
    覚えている主要なエラーとしては
    #build

    #component
    といった特殊なalias
    が解決できない
    なぜがvue
    ファイルが二重でビルドされ、ビルド後ファイルを見ると同
    じ関数が2度import
    されて名前重複のためエラーになる
    Nuxt3.7
    以降ではNuxt
    自体のビルド方法が内部的に変わったためかいく
    つかの内部import
    が解決できなくなる
    エンジニア達の「完全に理解した」Talk
     #47
    15

    View full-size slide

  13. ここで大幅に時間を食ってしまう
    最初はライブラリのみを入れて動かそうとした。エラーは状況が違う故の
    設定不足だと思っていた。
    しかし、2ヶ月くらいトライしても一向にエラーが全て解消できそうにな
    い状況にとにかく動く環境を一つ再現することにシフト
    Demo
    上では確かに動いている。しかし、でもを下ろして立ち上げるとエ
    ラーが発生してしまう...
    エンジニア達の「完全に理解した」Talk
     #47
    16

    View full-size slide

  14. 残る違いといえば、、、
    自分はパッケージマネージャーとしてyarn
    の1
    系を使用していたが、Demo
    はpnpm
    の8
    系だった。

    そこか!気付けた時は嬉しかった
    エンジニア達の「完全に理解した」Talk
     #47
    17

    View full-size slide

  15. リポジトリを分けた
    エンジニア達の「完全に理解した」Talk
     #47
    19

    View full-size slide

  16. Thank you for listening!!

    View full-size slide