by Tadashi, on 2021/08/23 18:00:00
フロントエンド・エンジニアにとってのある・ある―それは「UIコンポーネントの設計とそのテストは、退屈でめちゃくちゃ時間のかかる作業である」ということ。
これを覆す、作業を大幅にスピードアップさせることができるツールがあるのを、エンジニアの皆さん、ご存知ですか？
Storybookのここがスゴイ
1. アイソレーション機能
2. 素早く概観チェックができる
今回ご紹介したいのは
Storybook
…聞いたこと、ありますか？
これは、ユーザーインターフェース（UI）開発ツールであり、UIコンポーネントとページを分離して構築するための、オープンソースのツールです。
Storybook公式サイトより引用
私がこのStorybookを選ぶ理由について、以下でお伝えしていきましょう。
1. アイソレーション機能
なんといってもこの機能が、エンジニアの間でStorybookが人気を博している最もポピュラーな理由であり、私たちが選ぶ最大の理由でもあります。
アイソレーション（分離/単独）機能を使って作業ができるということは、メインのアプリケーションの外で実行、作成、作業ができるということです。つまり、異なるデバイス、OS、アプリケーションに対応したUIコンポーネントを、アプリケーション固有の問題に対処することなく、簡単に作成することができるのです。
さらに、特に大きなプロジェクトでは、すべてを同時進行することは難しいですよね。これまでのUI開発環境では、特定のWebページやアプリケーションなどが完成するまでは、UIの開発を行うなんて贅沢は私たちエンジニアには到底できませんでした。
そういったことを解決してくれるのが、アイソレーション機能です。この機能によって、エンジニアはもう待つ必要もなく、プロジェクトのどの段階においても、いつでもコンポーネントを作成することができるわけです。
2. 手軽なチェック機能
私たちがStorybookを選ぶもうひとつの魅力ーそれは、すべてのコンポーネントを一か所でサクッと閲覧できる機能を持っていることです。
UIに複数の要素がある場合、全てが組み合わさったときにどのように見えるのか、どのように動作するのかといったことは、これまでは把握しづらいことでした。
その点Storybookは、自分が行った変更を確認するために多くのステップをふんだり、わずかな変更であってもテストするために小さなステップを繰り返す必要がなく、はるかに迅速に作業を進めることができます。
「すべてのコンポーネントの概要を一か所で把握できる」ということは、作業を効率化してくれるのです。
3. コンポーネントの認識を共通のものに
「ストーリー機能」は特に、大きなチームで仕事する場合において特に有用です。これは様々なコンポーネントのコード、機能、目的を文書化することができます。
チームで作業する場合、複数の開発者が同じ機能を持つコンポーネントを作成すると、ドキュメント自体が不足していたり、認識が異なっていたり、コミュニケーションのミスなどによって、時間が無駄になってしまうことがあります。
Storybookでは、他のチームメンバーが開発したコンポーネントをチームメイトに使用させてコンポーネントのプロップを文書化したり、コンポーネントの使用方法を紹介したり、ビジュアルガイドを備えることで、この問題に効果的に取り組んでいます。
簡単に言うと、特定のコンポーネントについてあるエンジニアが過去に実施した内容を確認することができ、時間と労力を大幅に節約することができるのです。
最後に
他にも様々なメリットがありますが、今回はその中でも特に利点と感じた３つのポイントを挙げてみました。
私たちが取り組んでいるプロジェクトを効率的にすすめていく上でも大活躍していますし、簡単・迅速・効率的なUI環境を求めるフロントエンド・エンジニアにとって、Storybook は大変お勧めです。
私たちFlow Solutionsのプロダクトも小売業界の効率化をお手伝いをするためのツールとして、「すべての小売データ概要を一か所で把握できる」プラットフォームを開発しています。
今後、続々と登場する新機能を楽しみにしていてください！
私たちFlow Solutionsが提供する各デバイス対応のデータ活用プラットフォーム
この記事を書いた人
Flow Solutionsフロントエンド・エンジニア。
最近ハマってるもの「ペットのジョジョ！」「チーズお好み焼き！！」
■ Flow Solutions 会社概要
株式会社Flow Solutionsは、2016年にデータ活用プラットフォームの提供を開始、アパレル、雑貨店をはじめ、家電量販店など、すでに800を超える店舗の売上改善のためのデータ活用を提供。店舗可視化IoTシステムを通じて取得する顧客行動データの提供、データ活用のためのアフターサポート、さらにデータからすぐに行動につながる、通知サービスの提供を開始、小売課題解決のためのあらゆるソリューションを提供しています。
店舗分析に関することなら何でも、お気軽にお問い合わせ下さい！
＃ユーザーインターフェース ＃Flow Solutions ＃フローソリューションズ ＃開発ツール
