ITエンジニア/デザイナ向けにオープンソースを毎日紹介

フロントエンドで利用できる技術が多様化しており、それらの使い方を効率的に学ぶ手段が欲しくなっているはずです。大事なのはその場で実行したりして確認できることで、それによって敷居が大幅に下がるはずです。

今回紹介する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!

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2