> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# フロントエンドコンポーネントの管理

> Devin はフロントエンドライブラリを扱い、セッション中に画面イメージを共有できます。

<div id="creating-a-storybook-story">
  # Storybook ストーリーの作成
</div>

Devin には組み込みブラウザがあり、自身のプロジェクトやアプリケーションのスクリーンショットを撮影できます。このチュートリアルでは、シンプルな Next.js ベースのオープンソース [ダッシュボード](https://github.com/powerhouse-inc/fusion) を使います。Devin は、アプリケーション内の既存コンポーネントの一部を Storybook のワークショップに追加する作業を支援します。もしまだ聞いたことがなければ、[Storybook](https://storybook.js.org/) はオープンソースのフロントエンド向け「ワークショップ」で、フロントエンドの UI コンポーネントを 1 か所で可視化・分類・テストするのに役立ちます。

<div id="initial-prompt">
  #### 初期プロンプト
</div>

この[セッション](https://app.devin.ai/sessions/8426d6656a7a4b0c8cb4dccc2d83b138?ts=1729958134257)でのプロンプトは比較的シンプルです。Storybook やアプリケーション自体に関する関連コンテキストについては、Devin が自らある程度の下調べを行うことを想定しているためです。

<Frame>
  ![Devin](https://cdn.sanity.io/images/2mc9cv2v/production/a6ef7c2ed22d0ad98cf3cb1ab9adfcdfced7fd63-1336x758.png)
</Frame>

<div id="installing-and-running-storybook">
  #### Storybook のインストールと実行
</div>

Devin はまず、コンテキストを把握するためにアプリケーションの Card コンポーネントを確認し、その後、自身のワークスペースに storybook パッケージをインストールして実行します。Devin の強力な機能の 1 つは、アプリケーションを自律的にインストール、設定、実行し、組み込みの Shell でその出力に応答できることです。Devin は Storybook の設定ファイルを作成し、その後アプリケーションを実行します。このケースで storybook を実行すると、いくつかのビルドエラーが発生しました。

<Frame>
  ![Devin](https://cdn.sanity.io/images/2mc9cv2v/production/1f4bebe1d2bd43ffa91adab72b221a4a1fd165ee-1310x1260.png)
</Frame>

<div id="debugging">
  #### デバッグ
</div>

また、Devin のブラウザ上で、Storybook を実行した際に発生したビルドエラーが、Devin が Card コンポーネントを読み込もうとしたときのフロントエンドエラーの原因にもなっていることが確認できます。Devin のセッションでフロントエンド関連のタスクを扱う場合、開発プロセスの各段階で Devin がブラウザで何を「見ていた」のかをさかのぼって確認できると非常に便利です。

<Frame>
  ![Devin](https://cdn.sanity.io/images/2mc9cv2v/production/c02dca24d5388844d7c1e35eae74741fccebdb10-1314x950.png)
</Frame>

<div id="implementing-the-card-story">
  #### Cardストーリーの実装
</div>

Devinは次に、CardストーリーコンポーネントがStorybookで正しくレンダリングされるように、エラーの修正に進みます。何度かの試行を行った後、Devinはアプリを正しくビルドできるようにし、セッション内で正しいStorybook出力のスクリーンショットを送ってくれました。Devinに、作業中に特定のスクリーンショットを送るよう依頼しておくことで、アプリケーションのUIで何が起きていて、何がレンダリングされているのかを確認しやすくなります。

<Frame>
  ![Devin](https://cdn.sanity.io/images/2mc9cv2v/production/5b74e284d20e93190cd0e7a99142603ea7ab6239-1252x876.png)
</Frame>

Devinが実装したStorybook、とくにCardストーリーをコアアプリケーション側の実装と比較してみると、オープンソース実装に対してDevinがいくつか改善を行っていることが分かります。とくに、DevinはCardコンポーネントの追加サンプルを、より詳細なドキュメントとデモ付きでストーリー内に追加しています。また、Storybookにライト／ダークテーマを切り替えるための設定も追加しました。

Devinを使って、フロントエンド寄りのタスクをいくつか試してみることをおすすめします。たとえば、Storybookのようなツールでチームのコンポーネントの一覧をよりよく管理したり、組み込みブラウザでUI/UXフローをテストしたりできます。[Teamsプランへのアクセスをリクエスト](https://cognition.com/get-started#company)して、ぜひご自身でお試しください。