react18でstorybookをinitしたのでその時のメモとnpmrcについて

react18でstorybookをinitしたのでその時のメモとnpmrcについて

storybookのinstall

[公式より] (https://storybook.js.org/docs/react/get-started/install)

npx storybook init

npm8で実行すると、下記のコメントが出てくる

We've detected you are running npm 8.11.0
which has peer dependency semantics which Storybook is incompatible with.
In order to work with Storybook's package structure, you'll need to run npm with the --legacy-peer-deps=true flag. We can generate an .npmrc which will do that automatically.
More info: https://github.com/storybookjs/storybook/issues/18298
? Do you want to run the 'npm7' migration on your project? › (y/N)

翻訳

npm 8.11.0が動作しているようですが、ピア依存のセマンティクスがあり、Storybookと互換性がありません。
Storybookのパッケージ構造で動作させるには、--legacy-peer-deps=trueフラグを付けてnpmを実行する必要があります。これを自動的に行う .npmrc を生成することができます。
詳細はこちら: https://github.com/storybookjs/storybook/issues/18298

とりあえず、yを押して実行すると .npmrc ってファイルができて、これがあるとnpm8でも動きますよってことらしい。

.npmrc の中身

legacy-peer-deps=true

create-react-appのストーリーブックもあった

• 正しくインストールされてるか確認

npm run storybook

アクセス http://localhost:6006/
画面が映ればOK

ストーリーブックでできること

• 作成したコンポーネントの描画
• 表示する画面幅の変更しコンポーネントが正しく表示されるか確認
• コンポーネントのpropsを変更し、その変更をリアルタイムで描画
• 描画したタイミングでUIを操作させる（入力やボタン押下など）

npmrcってそもそも何？

公式によると下記ということらしい

npmは、コマンドライン、環境変数、npmrcファイルからconfigの設定を取得します。
npm configコマンドは、ユーザーファイルおよびグローバルnpmrcファイルの内容を更新および編集するために使用されます。
利用可能な設定オプションの一覧は、config を参照してください。

ふむ、いろんな設定ができるんだな。