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

StorybookでWeb UI部品開発のススメ

Avatar for Masataka Yoshida Masataka Yoshida
April 17, 2020
Technology
0
200

StorybookでWeb UI部品開発のススメ

Storybookってよく聞くけどフロントエンドフレームワークを導入していなくても使えるの？簡単な使い方を解説。

Storybookの設定ファイルがmain.jsにまとめられた5.3対応版。
Avatar for Masataka Yoshida

Masataka Yoshida

April 17, 2020
Tweet

More Decks by Masataka Yoshida

See All by Masataka Yoshida
あなたのOrganizationどうなの？Qiita API と スクレイピング
Avatar for Masataka Yoshida ysd_marrrr
0
650
AWSのコンテナウォークスルー
Avatar for Masataka Yoshida ysd_marrrr
0
420
「使いどころ」 からはじめるVuex
Avatar for Masataka Yoshida ysd_marrrr
1
1.8k
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
Avatar for Masataka Yoshida ysd_marrrr
0
570
Web技術(AR.js)でARを実現する夢を見た
Avatar for Masataka Yoshida ysd_marrrr
0
510
CodePipelineでLambdaのデプロイをしようとして躓いた話
Avatar for Masataka Yoshida ysd_marrrr
0
1.2k

Other Decks in Technology

See All in Technology
ClaudeCodeにキレない技術
Avatar for gtnao gtnao
1
870
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
Avatar for Hiroka Zaitsu zaimy
1
400
ロールが細分化された組織でSREは何をするか？
Avatar for norimichi.osanai tgidgd
1
420
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
260
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
190
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
Avatar for tomoki10 tomoki10
1
670
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
Avatar for Yusuke WADA fillznoh
0
130
【あのMCPって、どんな処理してるの？】 AWS CDKでの開発で便利なAWS MCP Servers特集
Avatar for yoshimi0227 yoshimi0227
6
950
Amazon SNSサブスクリプションの誤解除を防ぐ
Avatar for y_sakata y_sakata
3
190
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
Avatar for HASEGAWA Tomoki tomzoh
2
130
ポストコロナ時代の SaaS におけるコスト削減の意義
Avatar for izzii izzii
1
470
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
Avatar for t-kikuchi tkikuchi
1
1.3k

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
700
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
700
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k

Transcript

  1. 2020/04/17ɹ4݄LTձ㱬(▀¯▀⊂) StorybookͰWeb UI෦඼։ൃͷεεϝ Masataka Yoshida

  2. Masataka Yoshida https://www.y-mix.dev/ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ͜ͷαΠτ΋Nuxt.jsͱStorybookΛ࢖ͬͯ ։ൃ͍ͯ͠·͢ʂ

    ࠷ۙ͸ • Nuxt.js • Laravel • Python(όον) • MySQL Λdocker-composeͰಈ͔ͯ͠
 ෼ੳπʔϧΛ࡞͍ͬͯ·͢

  3. Storybook WebͷUI෦඼Χλϩάπʔϧ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ https://storybook.js.org/

  4. None

  5. StorybookಋೖͷϝϦοτ (Α͘ݴΘΕ͍ͯΔ)ͳͥಋೖ͢΂͖͔ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ύʔπʹूதͰ͖Δ ΤϯδχΞͰͳͯ͘΋ύʔπͷ֬ೝ͕Ͱ͖Δ ϖʔδɾػೳͷ։ൃΛ଴ͨͣʹύʔπ͕࡞ΕΔ

  6. ݸਓతʹ͸ ϖʔδ಺ͷΰνϟΰνϟ͔Βղ์͞Ε͍ͨ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ϓϩδΣΫτʹ్தͰࢀըͯ͠ ϞοΫΞοϓΛड͚औͬͯ ͦͷதͰҰͭͷύʔπɹ

    Λ௥Ճ͍͕ͨ͠… ←͜ͷ΁Μʹ௥Ճ͠ͱ͍ͯʙ ͗Ό่͋͋Εͨ͊͊ Ͳ͜ฤू͢Ε͹͍͍Μͩ͊͊

  7. Πέ͍ͯΔϑϩϯτΤϯυϑϨʔϜϫʔΫ ͷ࿩Ͱ͠ΐʁ

  8. Πέ͍ͯΔϑϩϯτΤϯυϑϨʔϜϫʔΫ ͷ࿩Ͱ͠ΐʁ

  9. HTMLͰ΋ಋೖ͠Α͏ গͳ͍ͳ͕Β΋࠾༻ྫΞϦ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ Raksul ENGINEERING
 CSSελΠϧΨΠυΛ


    Storybook for HTMLʹҠߦͨ͠࿩ https://tech.raksul.com/2020/03/12/migrate-styleguide-to-storybook/ ࢲ

  10. StorybookͷॳظԽ Node.jsʹ෇ଐ͍ͯ͠ΔnpxΛ࣮ߦ͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔

  11. Storybookͷઃఆ ϑΝΠϧ͕ੜ੒͞Ε͍ͯΔͷͰઃఆΛมߋ͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ͳΜͱ
 Node.jsͷϓϩδΣΫτͷ༗ແ΋
 ࣗಈͰ൑ผͯ͠


    Α͠ͳʹ΍ͬͯ͘ΕΔκ!! ./.storybook/main.js main.js͔ΒΈͨ
 UI෦඼ͷ৔ॴΛઃఆ

  12. ෦඼ɾετʔϦʔͷ४උ HTMLͱindex.stories.jsΛ༻ҙ͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ./components/sample/index.stories.js ./components/sample/default.html

  13. ࢼͯ͠ΈΔ Npm run storybook ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔

  14. ຊ೔͸͓͠·͍

  15. CSS/SCSSͷಡΈࠐΈ ύοέʔδͷಋೖͱStorybookͷઃఆมߋ͕ඞཁ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ./components/sample/index.stories.js ./.storybook/main.js 2020/04/17ݱࡏͷ࠷৽൛(Storybook

    5.3ܥ)͸./storybook/main.jsʹઃఆΛॻ͘
 ./.storybook/webpack.config.jsʹॻ͘ݹ͍ํ๏΋͋ΔͨΊ஫ҙ

  16. ศརͳAddon StorybookΛ“୯ͳΔΧλϩά”Ͱ͸ͳ͘͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ @storybook/addon-docs StorybookΛυΩϡϝϯτͱͯ͠
 ࢖͑ΔΑ͏ʹ͢Δ

    @storybook/addon-knobs Storybook্Ͱ෦඼ͷઃఆ஋Λ
 ม͑Δ͜ͱ͕Ͱ͖Δ

  17. ·ͱΊ StorybookΛಋೖͯ͠ Ͱɺ
 ෦඼Λ૊Έ߹ΘͤΔʹ͸ʁ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ Storybookͷ؅׋֎


    ख࡞ۀͰషΓ෇͚Δ͔
 ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ
 ෦඼୯ҐͰ։ൃͰ͖ΔମݧΛ