フロントエンドで利用できる技術が多様化しており、それらの使い方を効率的に学ぶ手段が欲しくなっているはずです。大事なのはその場で実行したりして確認できることで、それによって敷居が大幅に下がるはずです。 今回紹介するStorybookは各種フロントエンドフレームワークに対応した、UIコンポーネントエクスプローラーです。

Storybookの使い方

例えばボタンです。Vueでの記載例が出ています。

ログを確認することもできます。

クリックする度に表示が更新される例。

アクセシビリティに関する情報を学ぶこともできます。

StorybookではReact/Vue/Angular/React Native/Ember/Webコンポーネントなど、様々なフロントエンドについて学ぶことができます。コードを変更して動作の違いを知ることも可能です。ぜひ新しいフレームワークを試す際に使ってみてください。

StorybookはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

Storybook: UI component explorer for frontend developers storybookjs/storybook: ? UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!