UIの開発とドキュメント化をスピードアップする6つのツール

公開: 2021-07-04

コンポーネント駆動開発は、フロントエンドとユーザーインターフェイスの開発を加速するための優れた戦略です。コンポーネントを使用すると、再利用が可能になり、アプリケーションの構築、テスト、およびモジュール化が簡素化されます。

小さなアプリケーションでは、使用中のコンポーネントのリストを簡単に管理できます。自分のメモリ以外に、これらのリストを維持するための特定のツールは必要ありません。しかし、アプリケーションと開発チームの数と複雑さが増すと、コンポーネントの数と複雑さも増し、コンポーネントを追跡してUIの一貫性を維持するための何らかの支援が必要になります。

中規模から大規模のプロジェクトにコンポーネント駆動開発を採用するには、コンポーネントライブラリを管理し、ドキュメント化し、紹介し、それらを使用するアプリケーションとは無関係に開発を可能にするツールが必要です。

コンポーネントの管理とカタログ化のこの必要性は、幸いなことに、ユーザーインターフェイスとフロントエンドの開発と文書化を直接加速することを目的とした新しいクラスのツールによって解決されます。これらのツールは、さまざまなライブラリ、さまざまなJavaScriptダイアレクト、およびAngular、React、VueなどのUI開発用のさまざまなJavaScriptフレームワークをサポートします。

さらに、一部のコンポーネント管理ツールは、フロントエンドスタイルガイドを生成する機能も果たします。

フロントエンド開発の分野におけるスタイルガイドとは何ですか？

これらは、開発中のアプリのユーザーインターフェースにあるすべての要素のライブコレクションです。これらのガイドには、コンポーネントのリストが示されているだけでなく、機能的でテスト可能な例も含まれています。また、各コンポーネントのコードスニペットも提供されており、開発者はこれをコピーして独自のコードに貼り付けることができます。通常、スタイルガイドには、ボタン、アイコン、ナビゲーションメニュー、フォーム入力要素、モーダルオーバーレイなどの一般的なUIコンポーネントが含まれています。

以下に、UIコンポーネント開発およびドキュメントツールセグメントのリーダーとして浮上しているツールのレビューを示します。

ストーリーブック

Storybookは、アプリケーション固有の依存関係を気にせずに作業できるフロントエンドおよびUIコンポーネントを開発するための人気のあるツールです。開発中のアプリの外部で、UIを分離して構築するためのサンドボックスを提供します。これにより、到達が困難な状態やエッジケースの開発が可能になり、コンポーネントの再利用性、テスト可能性、および開発速度が大幅に向上します。

また、UXデザイナーとのやり取りを容易にし、既存のコンポーネントを表示して作成する必要のあるコンポーネントを特定するタスクを簡素化します。

Storybookは、React、Angular、Vue、Svelte、Web Components、その他12以上のJavaScriptフレームワークをサポートしています。 Storybookで作成されたユースケースは、開発、テスト、およびQAで確認できるように、プレーンなJavaScriptでストーリーとして保存できます。

このツールには、開発ツールとの統合を可能にし、ワークフローのカスタマイズを容易にし、テストとドキュメント化を自動化するアドオンの広範なエコシステムがあります。たとえば、Docs Addonを使用すると、Markdown / MDXを記述して、コンポーネントライブラリと設計システム用にカスタマイズ可能なサイトを生成できます。

スタイルガイド

Styleguidistは、生きたスタイルガイドジェネレーターとして分類できますが、その機能はUIコンポーネントの開発環境サーバーの機能に近いものです。 Styleguidistで作成されたスタイルガイドは、コンポーネントのプロパティを表示し、マークダウン（.md）ファイルに基づいて編集可能な使用例を表示します。このツールは、ES6、Flow、TypeScriptなどのJavaScriptダイアレクトと互換性があります。

自動生成されたドキュメントにより、Styleguidistは、開発チーム全体が利用できるすべてのコンポーネントのドキュメントポータルとして機能できます。また、UIコンポーネントカタログを含むUIドキュメントサイトの作成と保守も簡素化されます。また、マークダウンページの作成とUIコンポーネントのインポートも可能です。

Styleguidistの集中化されたドキュメントは、大規模なプロジェクトで大幅な時間と労力の節約を実現しますが、ドキュメントを最新の状態に保つためにリソースを割り当てる必要があります。そうしないと、スタイルガイドの死亡率と呼ばれる問題に陥る可能性があります。これは、ドキュメントが古くなり、開発者がそれを使用しなくなり、スタイルガイドの有用性が失われるときに発生します。

Styleguidistは、ストーリーブックと一緒に使用するのが一般的です。ストーリーブックの長所は補完的です。ストーリーブックはコンポーネントの構築とストーリーの作成に使用でき、Styleguidistは、Markdownを使用してコンポーネントのドキュメント化に使用できます。

少し

ビットは、UIコンポーネントの分散型で拡張可能なフレームワーク/リポジトリ（別名モノリポジトリまたはマルチパッケージリポジトリ）であり、コンポーネント駆動開発（CDD）方法論の下でアプリケーションを構築するためのインフラストラクチャとして使用できます。この方法論により、Bitはビルド、テスト、およびメンテナンスプロセスを加速し、アプリケーション開発サイクルを大幅に短縮し、アプリケーションの品質を向上させることを目指しています。

コンポーネントをアプリケーションの一部として構築する代わりに、Bitを使用すると、コンポーネントをアプリの外部で開発し、アプリケーションをボトムアップで構成するために使用できます。次に、コンポーネントをさまざまなアプリケーションで再利用して、開発チーム全体が利用できる一種のコンポーネントマーケットプレイスを作成できます。その結果、コンポーネントを追加または削除するだけで機能を変更できる拡張可能なアプリケーションを入手できます。

Bitは、React、Vue、およびAngularライブラリと互換性があります。これは、ワークスペースの哲学に基づいており、ワークスペースを使用してコンポーネントを開発および構成します。この作業方法により、アプリケーションを分散して構築できますが、モノリシックのようなエクスペリエンスが得られます。 BitのワークスペースのUIを使用すると、コンポーネントを視覚的に簡単に開発および管理できます。

React Cosmos

React Cosmosは、スケーラブルで高品質のユーザーインターフェイスを作成するために設計された開発環境です。これにより、Reactコンポーネントを個別に開発し、UIコンポーネントのライブラリを作成できます。瞬時の視覚的な回帰テスト、またはニーズに応じてカスタマイズできる統合を通じて、開発時間を大幅に短縮するために使用できます。

React Cosmosは、コンポーネントフィクスチャに基づく哲学を使用しており、入力例を定義することで状態をブックマークできます。コンポーネントフィクスチャをグループ化すると、それらのライブラリを作成できます。これは、React Cosmosが、時間をより生産的にするために特別に設計されたエレガントなユーザーインターフェイスの下で公開します。

その仕事をするために、React Cosmosはそれ自体をビルドパイプラインに挿入して、ソースコードを理解できるようにします。これは、コードの記述に使用するJS方言（Flow、TypeScriptなど）に関係なく、ツールを使用できることを意味します。また、統合を機能させるために、いくつかの構成にいくつかのオプションを追加しなければならない場合があることも意味します。

その名前が示すように、React CosmosはReactでのみ動作し、UI開発のいくつかの側面に焦点を当てていますが、それは最高レベルの詳細で行われます。

React開発者ツール

Facebookが提供するこのツールはChromeプラグインとして機能し、Chromeの開発ツール内のReactコンポーネント階層を検査できます。 Firefoxブラウザのアドオンとしても利用できます。

React Developer Toolsを使用すると、アプリのコンポーネント階層ツリーをナビゲートするときに、コンポーネントの状態とプロパティを検査および編集できます。このインタラクティブな開発形式により、1つのコンポーネントへの変更が他のコンポーネントにどのように影響するかを確認できるため、UIコンポーネント構造を正しくアセンブルし、それらを適切に分離できます。

ブラウザにReactDeveloper Toolsをインストールすると、2つの新しいタブが表示されます。1つはコンポーネントと呼ばれ、もう1つはプロファイラーと呼ばれます。 1つ目は、ページにレンダリングされたルートReactコンポーネントと、それらによってレンダリングされたサブコンポーネントを示しています。ツリー内のコンポーネントの1つを選択することにより、右側のペインでそのプロパティとステータスを検査および編集できます。ブレッドクラムを使用して、選択したコンポーネントの祖先を検査できます。 [プロファイラー]タブは、パフォーマンス情報を記録するために使用されます。

Docz

コードを文書化するプロセスは、おそらくコーダーが最も嫌うプロセスです。おそらく、テスターから受け取ったバグレポートを読むだけではありません。ただし、常に更新されるドキュメントサイトは、同じコンポーネントが何度も何度も書き直されたり、毎回異なる機能が使用されたりするのを防ぐため、開発時間を短縮するために不可欠です。

Doczは、開発者がアプリケーションをより早く完成させるために使用できる時間を無駄にしないように、ドキュメントサイトのドキュメント化と更新のプロセスを可能な限り簡素化することを目指しています。 Doczを使用すると、コードのインタラクティブなドキュメントを簡単に作成して公開し、その長所を示すMDXファイルを作成できます。その結果、ファイルが変更されるたびに全体が更新されるライブリロードを備えた本番環境に対応したサイトが得られます。

APIに興味がある場合は、これらのツールを調べて、美しいAPIドキュメントを作成できます。

これはまだ始まったばかりです

ここで確認したツールに加えて、Carte Blanche、Atellier、Bluekitなど、コンポーネントをカタログ化、管理、および文書化するためのツールに関する他の多くのプロジェクトがあります。それらの多くはまだベータ版であり、その他はメンテナンスされていないプロジェクトですが、ソフトウェア開発時間を大幅に短縮できる品質を提供できるため、それらについて知っておく価値があります。

Shopify、Atlassian、IBM、Spotify、AirBNBなど、多くの大規模な現代企業は、UIコンポーネントの開発と文書化を高速化するツールベースの設計システムを採用しています。ただし、これらのツールを採用するのは大企業になるまで待つ必要はありません。維持するコンポーネントの最小限のカタログがある場合は、それらの使用を開始することをお勧めします。あなたはそれらに精通することができるので、あなたのコンポーネントリストが大きくなり、それを整理し始めるのに費用がかかりすぎるときに不意を突かれることがありません。