はじめかた

開発環境に Vue Storybook をセットアップする

Storybook は、開発モードでアプリと一緒に実行されます。アプリのビジネスロジックやコンテキストから分離された UI コンポーネントを構築するのに役立ちます。この Storybook 入門チュートリアル は Vue 用で、他には React、React Native、Angular、Svelte、Ember 版があります。

Vue Storybook を設定する

私たちの環境でビルドプロセスを設定するためには、いくつかのステップを踏む必要があります。まず始めに、degit を使ってビルドシステムをセットアップしたいと思います。このパッケージを使うと、"テンプレート"（いくつかのデフォルト設定を含む、部分的にビルドされたアプリケーション）をダウンロードして、開発ワークフローを高速化することができます。

以下のコマンドを実行してみましょう:

# テンプレートをクローンする
npx degit chromaui/intro-storybook-vue-template taskbox

cd taskbox

# 依存関係をインストールする
yarn

これで、アプリケーションのさまざまな環境が正しく動作しているかどうか、すぐに確認することができます:

# ターミナルでテストランナーを起動する（Jest）:
yarn test:unit

# ポート 6006 でコンポーネント探索をはじめる:
yarn storybook

# ポート 8080 で適切にフロントエンドアプリを実行する:
yarn serve

当社のフロントエンドアプリの様式は、自動テスト（Jest）、コンポーネント開発（Storybook）、そしてアプリ本体の 3 つです。

アプリのどの部分に取り組んでいるかによって、これらのうちの 1 つまたは複数を同時に実行したい場合があります。今回は 1 つの UI コンポーネントを作成することにフォーカスしているので、Storybook の実行にこだわることにします。

変更をコミットする

この段階で、ローカルリポジトリにファイルを追加しても大丈夫です。以下のコマンドを実行して、ローカルリポジトリを初期化し、これまでに行った変更を追加してコミットしてください。

$ git init

続いて:

$ git add .

それから:

$ git commit -m "first commit"

そして最後に:

$ git branch -M main

それでは、最初のコンポーネントを作ってみましょう！

シンプルなコンポーネント

複合的なコンポーネント

データ

スクリーン

デプロイ

テスト

拡張機能

人気の Controls 拡張機能を統合して使用する方法を学ぶ

Storybook には、チーム全員の開発者体験を向上させるために使用できる拡張機能の強力なエコシステムがあります。ここですべてを見ることができます。

このチュートリアルに沿っている方は、すでに複数の拡張機能に出会い、テストの章で 1 つの拡張機能をセットアップしたことでしょう。

あらゆる使用例に対応する拡張機能があり、それらすべてについて書くと永遠に時間がかかるでしょう。最も人気のある拡張機能の 1 つを統合してみましょう: Controls です。

Controls とは？

Controlsを使うと、デザイナーや開発者は、引数を操作することで、コンポーネントの動作を簡単に調べることができます。コードは必要ありません。Controls は、ストーリーの横に拡張機能パネルを作成し、その引数をライブで編集できます。

Storybook を新規にインストールすると、Controls が最初から含まれています。追加の設定は必要ありません。

拡張機能で新しい Storybook のワークフローを開放

Storybook は素晴らしいコンポーネント駆動型の開発環境です。Controls アドオンは、Storybook を相互作用的なドキュメントツールに進化させます。

エッジケースを見つけるために Controls を使用する

Controls を使えば、QA エンジニア、UI エンジニア、その他の関係者は、コンポーネントを限界まで追い込むことができます！次の例では、巨大な 文字列を追加した場合、Task はどうなるでしょうか？

おかしいです！テキストが Task コンポーネントの境界を越えてオーバーフローしているように見えます。

コントロールによって、コンポーネントへのさまざまな入力（この場合は長い文字列）をすばやく確認できるようになり、UI の問題を発見するのに必要な作業が軽減されました。

では、Task.vue にスタイルを追加して、はみ出しの問題を解決しましょう:

<input
  type="text"
  :value="task.title"
  readonly
  placeholder="Input title"
+ style="text-overflow: ellipsis;"
/>

問題は解決しました！テキストがタスクエリアの境界線に達すると、立派な省略記号を使用して切り捨てられるようになりました。

リグレッションを回避するための新規ストーリーの追加

将来的には、Controls 経由で同じ文字列を入力することで、この問題を手動で再現することができます。しかし、このエッジケースを紹介するストーリーを書くほうが簡単です。そうすることで、リグレッションテストのカバー範囲が広がり、チームの他のメンバーのためにコンポーネントの限界を明確に説明することができます。

Task.stories.js に、長いテキストの場合の新しいストーリーを追加してください:

const longTitleString = `This task's name is absurdly large. In face, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`

export const LongTitle = Template.bind({})
LongTitle.args = {
  task: {
    ...Default.args.task,
    title: longTitleString,
  },
}

これで、このエッジケースを簡単に再現し、作業することができるようになりました。

もしビジュアルテストをしていれば、切り捨てのソリューションが壊れた場合にも通知されます。エッジケースは、テストカバレッジがないと忘れられがちです。

まとめ

知識を結集し、さらに Storybook のテクニックを学ぶ

おめでとうございます！あなたは Storybook で最初の UI を作成しました。その過程で、UI コンポーネントのビルド、合成、テスト、デプロイの方法を学びました。これまで通りであれば、あなたのレポとデプロイされた Storybook はこのようになっているはずです:

📕 GitHub repo: chromaui/learnstorybook-code
🌎 Deployed Storybook

詳細はこちら

もっと深く知りたいですか？ここに役立つ資料があります。

• Storybook の公式ドキュメントには、API ドキュメント、コミュニティリンク、拡張機能ギャラリーがあります。
• 楽しい Storybook ワークフローは、Squarespace、Major League Soccer、Discovery Network、Apollo GraphQL の高速チームによって使用されるワークフローのベストプラクティスを紹介しています。
• Visual Testing Handbook は、Storybook を使用してコンポーネントを視覚的にテストすることを深く掘り下げています。31 ページの無料の電子書籍です。
• Storybook Discord チャットでは、Storybook のコミュニティと連絡を取ることができます。他の Storybook ユーザーに助けを求めたり、与えたりすることができます。
• Storybook ブログでは、UI 開発のワークフローを効率化するための最新リリースと機能を紹介しています。

Storybook 入門チュートリアルを作ったのは誰ですか？

テキスト、コード、制作は Chromatic から提供されました。このチュートリアルは、Chromatic の人気チュートリアルシリーズ「GraphQL + React」にインスパイアされたものです。

このようなチュートリアルや記事をもっと読みたいですか？ Storybook メーリングリストに登録してください。

貢献する

Storybook を世界と共有するために
Storybook のチュートリアルに貢献することが奨励されています。文法や句読点のような小さなことであれば、プルリクエストを開いてください。大きな変更であれば、issue を追加して議論しましょう。

Storybook のチュートリアルは主にコミュニティによって作成され、維持されているので、最新の状態に保ち、粗い部分を時間をかけて滑らかにするためには、皆さんの協力が必要です。皆様のご協力をよろしくお願いいたします！

翻訳

私たちの目標は、Storybook をすべての人に親しみやすいものにすることです。このチュートリアルを他の言語に翻訳するのを手伝ってください。特に中国語とスペイン語の翻訳をお待ちしています。この issue についてコメントしてください。