Storybook ストーリーの作成
初期プロンプト
Storybook のインストールと実行
デバッグ
Cardストーリーの実装
チュートリアル
フロントエンドコンポーネントの管理
Devin はフロントエンドライブラリを扱い、セッション中に画面イメージを共有できます。
Devin には組み込みブラウザがあり、自身のプロジェクトやアプリケーションのスクリーンショットを撮影できます。このチュートリアルでは、シンプルな Next.js ベースのオープンソース ダッシュボード を使います。Devin は、アプリケーション内の既存コンポーネントの一部を Storybook のワークショップに追加する作業を支援します。もしまだ聞いたことがなければ、Storybook はオープンソースのフロントエンド向け「ワークショップ」で、フロントエンドの UI コンポーネントを 1 か所で可視化・分類・テストするのに役立ちます。
このセッションでのプロンプトは比較的シンプルです。Storybook やアプリケーション自体に関する関連コンテキストについては、Devin が自らある程度の下調べを行うことを想定しているためです。
Devin はまず、コンテキストを把握するためにアプリケーションの Card コンポーネントを確認し、その後、自身のワークスペースに storybook パッケージをインストールして実行します。Devin の強力な機能の 1 つは、アプリケーションを自律的にインストール、設定、実行し、組み込みの Shell でその出力に応答できることです。Devin は Storybook の設定ファイルを作成し、その後アプリケーションを実行します。このケースで storybook を実行すると、いくつかのビルドエラーが発生しました。
また、Devin のブラウザ上で、Storybook を実行した際に発生したビルドエラーが、Devin が Card コンポーネントを読み込もうとしたときのフロントエンドエラーの原因にもなっていることが確認できます。Devin のセッションでフロントエンド関連のタスクを扱う場合、開発プロセスの各段階で Devin がブラウザで何を「見ていた」のかをさかのぼって確認できると非常に便利です。
Devinは次に、CardストーリーコンポーネントがStorybookで正しくレンダリングされるように、エラーの修正に進みます。何度かの試行を行った後、Devinはアプリを正しくビルドできるようにし、セッション内で正しいStorybook出力のスクリーンショットを送ってくれました。Devinに、作業中に特定のスクリーンショットを送るよう依頼しておくことで、アプリケーションのUIで何が起きていて、何がレンダリングされているのかを確認しやすくなります。