![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-03-28T07:35:25+00:00","default:admin","admin") #author("2023-06-08T11:29:59+00:00","default:admin","admin") -[[設計原則:https://ja.reactjs.org/docs/design-principles.html]] -[[React の流儀:https://ja.reactjs.org/docs/thinking-in-react.html]] -[[React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】:https://www.i3design.jp/in-pocket/8854]] -[[デザイナーがデザインツールを使わずに、Reactを使ってデザインした話:https://developer.medley.jp/entry/2020/06/19/194558]] -[[Reactを使ったフロントエンドのアーキテクチャ事例:https://fintan.jp/?p=1385]] -[[綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する:https://qiita.com/teradonburi/items/6828635d2e70dba6637d]] -[[フロントのコンポーネント設計ベストプラクティスを探してみた話:https://zenn.dev/thim/articles/4ad383e73bf2523146a6]] -[[フロントエンドのコンポーネント設計に立ち向かう:https://qiita.com/seya/items/8814e905693f00cdade2]] -[[デザイナーとエンジニアで考えるReactコンポーネント設計:https://tech.kitchhike.com/entry/2018/09/30/230000]] -[[React でデザインシステムを正しく実装する - コンポーネントカタログを超えて:https://www.wantedly.com/companies/wantedly/post_articles/302873]] -[[Fat ComponentにしないためのWebフロントエンド設計:https://speakerdeck.com/tooppoo/web-front-end-design-to-avoid-being-a-fat-component]] -[[【LINE証券 FrontEnd】LINE証券フロントエンドの全体像:https://engineering.linecorp.com/ja/blog/line-securities-frontend-1/]] -[[TwitterやSlackのRedux Storeを覗く:https://engineer.recruit-lifestyle.co.jp/techblog/2019-12-20-dissecting-redux-store/]] -[[ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話:https://techblog.zozo.com/entry/itcss-to-zozotown]] -[[デザインエンジニアしか知らない世界 後編:https://www.estie.jp/blog/entry/2023/06/08/192812]] *デザイン [#jccb274f] **[[Atomic Design:https://atomicdesign.bradfrost.com/]] [#pd846145] -[[React の Component 設計と Atomic Design:https://info.drobe.co.jp/blog/engineering/react-component-atomic-design]] -[[Atomic Designに向き合ってみてわかったことをまとめてみた:https://findy-code.io/engineer-lab/knowledge-from-atomic-design]] -[[Atomic Designを使ってReactコンポーネントを再設計した話:https://blog.spacemarket.com/code/atomic-design%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6react%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%86%8D%E8%A8%AD%E8%A8%88%E3%81%97%E3%81%9F%E8%A9%B1/]] -[[【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン:https://zenn.dev/mutex_inc/articles/beca85dd7fdcae]] -[[Reactを使ったコンポーネント指向設計で、Atomic Designをやめようとしている話:https://tech.ga-tech.co.jp/entry/react-give-up-atomic-design]] *ツール [#ye20ee78] **Storybook [#q6220a25] -[[Storybookを使ってみた①環境構築編:https://liginc.co.jp/532474]] -[[Next13 × Storybook7を試す:https://zenn.dev/ikenohi/scraps/30a88fa717cde1]] ***導入 [#r7cf2a95] -通常は以下でOK $ npm sb@latest init $ npm run storybook -[[[Bug]: Unable to start Storybook 6.5.x for react after upgrade Typescript to 5.+ #21642:https://github.com/storybookjs/storybook/issues/21642]] --[[Storybook 7 migration guide:https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937]] $ npx storybook@next upgrade --prerelease $ npx sb@next init $ npm run storybook --これで起動したが、起動エラー発生 --以下を追加で実行 $ npm install style-loader --save $ npm install css-loader --save $ npm install util --save $ npm run storybook --起動した！ *Web Component [#o8f326ee] **[[Lit:https://lit.dev/]] [#lec029f7] -メルカリが使用 --[[新しいメルカリDesign System Web:https://engineering.mercari.com/blog/entry/20210823-8128e0d987/]]
