Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook を追加 #477

Merged
merged 3 commits into from
Mar 21, 2022
Merged

Storybook を追加 #477

merged 3 commits into from
Mar 21, 2022

Conversation

HosokawaR
Copy link
Member

目的

  1. コンポーネントを開発時にプレビューする場所がほしい

  2. コンポーネントの振る舞いを共有しやすくしたい

変更の要点

@types/react との競合について

@HikaruEgashira 先輩がコメントしてくださったように@types/reactと競合する問題があります。

現状これに対する根本的な解決策はなくとりあえずの回避策は以下の2つの方向性に絞られます。(参考)

  1. tsconfig の exlude に *.stories.ts を指定する
    素直なやり方ですが *.stories.ts に tsconfig が割り当てられず path alias や未使用変数の検知などが行えなくなり不便ですので今回は却下しました。

  2. @types/react を削除する
    根本的な解決策ではなく node_modules 以下を操作するのでnode_modules の変更により通用しなくなる可能性もあります。
    しかし単純ですし tsconfig を*.stories.tsに効かせることができるメリットが大きいのでこちらを採用しました。
    応急的な処置ではありますが、検索機能強化やタグ機能の開発・レビュー時にいち早く活用したいとも考えているので一旦はこれでいきたいと考えています。
    一方で落ち着いたら本格的な解決を模索する必要がありそうです。この Pull Request が Approve されたら、この問題を根本的に解決するための Issue を発行します。

stories.ts の配置

ファイル名でソートしたときに、どのコンポーネントがまだ stories が書かれていないのかがわかりやすいよう、/componets 直下に stories を配置しました。
src 以下に成果物に関係ないものがあることに違和感はあるものの、usecase/test など成果物に関係ないテストなどがが存在することを考えると stories.ts を src 以下に置くことについては一貫性はあるのかなと考えています。

その他

各種変更の方針については人によって意見が違いそうなのでご意見下さい。

fix: #470

# @types/react との競合について
storybookjs/storybook#12505vuejs/language-tools#592 に言及されている通り
@types/react と競合し型エラーが発生する。
対策として @types/react の削除、tsconfig からの stories.ts の除外が考えられるが今回は前者を選択した
理由は @types/react を使用しないことが明確であり、stories.ts にはしっかり tsconfig を適応していからである。
ファイル名でソートしたときに、どのコンポーネントがまだ stories が書かれていないのかがわかりやすいよう、/componets 直下に stories を配置した。
src 以下に成果物に関係ないものがあることに違和感はあるものの、usecase/__test__ など成果物に関係ないテストなどがが存在することを考えると stories.ts を src 以下に置くことについては
一貫性はある。
Copy link
Member

@HikaruEgashira HikaruEgashira left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

viteで統一できてていい感じ!
packageあたりだけ確認よろ!

(babel使う必要あるっけ?なくて動くなら消したいけど、、)

package.json Outdated Show resolved Hide resolved
@babel/core babel-loader vue-loader は webpack で vue をコンパイルするときのものなので削除
storybook の初期設定は webpack を利用するので sb init 時に今回削除した設定が紛れ込んでしまった

@storybook/addon-actions は @storybook/addon-essentials に含まれるので削除
@HosokawaR
Copy link
Member Author

(babel使う必要あるっけ?なくて動くなら消したいけど、、)

ありがとうございます!使う必要ありませんでした。
初期設定時に追記されたものを放置してしまっていただけです…
コミットメッセージに詳細があります。

@HosokawaR HosokawaR merged commit e2f90e4 into main Mar 21, 2022
@HosokawaR HosokawaR deleted the add-storybook branch March 21, 2022 22:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Storybook 導入
2 participants