Carouselの最新バージョンへの移行

この記事では、Vega Carouselに移行する方法を説明します。好みに応じて、AI活用開発に向けたAmazon Devices Builder Toolsとその互換AIエージェントを使用して移行することもできます。

VUIC CarouselからVega Carouselへの移行

以下のセクションでは、Vega UIコンポーネントライブラリに含まれているCarouselから、個別のパッケージとして提供されているVega Carouselに移行する方法について説明します。

プロパティの移行

新しいバージョンのCarouselを使用するには、以下に示すプロパティに変更を加える必要があります。

Vega Carouselとサポートされるプロパティの詳細については、こちらを参照してください。

Vega Carouselパッケージのインポート

import { Carousel } from '@amazon-devices/vega-carousel';

例

次の例は、Vega Carouselとそのプロパティの使用方法を示しています。

export function ItemView({ item, index }: CarouselRenderInfo<any>): JSX.Element {
    const [state, setState] = useState(false);
    return (
        <Pressable
            onFocus={() => {
                setState(true)
            }}
            onBlur={() => {
                setState(false)
            }}
            style={[styles.card, state && styles.focus]}
        >
            <View style={[{ flexDirection: 'column' }]}>
                <Image style={styles.image} source= />
            </View>
        </Pressable>
    );
}

export const renderItem =
    useCallback(({ item, index }: CarouselRenderInfo<any>) => {
        return (
            <ItemView index={index} item={item} />
        );
    }, []);

const getItem = useCallback((index: number) => {
    if (index >= 0 && index < data.length) {
        return data[index];
    }
    return undefined;
}, [data]);

const getItemCount = useCallback(() => {
    return data.length;
}, [data]);

const getItemKey = (info: CarouselRenderInfo) =>
   `${info.url} ${info.item.index}`

const notifyDataError = (error: any) => {
    return false; // 再試行しない
};

<Carousel
   orientation={'horizontal'}
   dataAdapter=
   renderItem={renderItem}
   selectionStrategy='anchored'
   testID='Carousel'
   `itemStyle=`
 />

Amazon Devices Builder Tools MCPサーバーとAIエージェントを使用してVega Carouselに移行する方法

Amazon Devices Builder Tools MCPサーバーは、Vega UIコンポーネントライブラリに含まれているCarouselから、個別のパッケージとして提供されているVega Carouselへの移行を支援することができます。Amazon Devices Builder Tools MCPサーバーのパッケージは@amazon-devices/amazon-devices-buildertools-mcpです。詳細については、AI活用開発に向けたAmazon Devices Builder Toolsのセットアップを参照してください。

前提条件

• MCPをサポートするAIエージェント。
  • Kiro CLI
  • Cursor
  • VSCode Copilot
  • Claude Code CLI
  • Amazon Q IDE
  • Amazon Q CLI
  • Cline
• VUIC Carouselが実装されているVegaアプリプロジェクト。

手順1： Install Amazon Devices Builder Tools MCPサーバーをインストールする

プロジェクトディレクトリで次のコマンドを実行します。

npx @amazon-devices/amazon-devices-buildertools-mcp@latest --init-context

対話プロンプトに従って次の操作を行います。

1. AIエージェントを選択します（たとえば、Clineの場合は7と入力します）。
2. エージェントのMCP設定を自動更新するかどうかを選択するプロンプトで、Yと入力します。
3. コンテキストドキュメントのインストールパスとして、デフォルトのパスを選択します。
4. インストールされたコンテキストドキュメントを確認し、マージ／更新します。

手順2： MCPのインストールを検証する

AIエージェントのチャットインターフェイスで、エージェントに次のように指示します。

List the tools provided by Amazon Devices Builder Tools MCP Server

次のメッセージが表示されます。

 - read_document - Read Vega documentation - list_documents - List available documents - analyze_perfetto_traces - Analyze performance traces

手順3： Carouselの移行を実行する（自然言語）

AIエージェントのチャットインターフェイスで、次のように指示します。

Upgrade my MovieCarousel.tsx from Carousel V1 to V2

または、より具体的に次のように指示します。

Help me migrate /Volumes/workplace/vega-video-sample/src/components/MovieCarousel.tsx from Carousel V1 to V2

AIエージェントが自動的に実行する手順の概要

1. MCPドキュメントからカルーセルの移行ワークフローを読み取ります。
2. ステップバイステップの移行手順に従います。
3. 手順ごとに開発者に承認を求めます。

AIガイドによる移行プロセスの詳細

AIエージェントにより、次の手順が案内されます。

1. バックアップの作成： YourCarousel_ORIGINAL.tsx
2. インポートの更新：@amazon-devices/kepler-ui-components → @amazon-devices/vega-carousel
3. package.jsonの更新： @amazon-devices/vega-carousel: ~0.1.0の追加
4. データアクセスの移行：データプロパティ → dataAdapterと関数
5. すべてのプロパティの移行： VUICL Vegaのプロパティ → Vega Carouselの同等のプロパティ
6. ロジックの更新：onFocus → onSelectionChanged（該当する場合）
7. クリーンアップ： 使用されないVUIC Carouselコードの削除

手順4： 依存関係をインストールする

移行が完了したら、次のコマンドを実行して@amazon-devices/vega-carouselパッケージをダウンロードします。

npm install

手順5： ビルドとテストを実行する

1. ビルドするには、次のコマンドを使用します。

   コードをコピー クリップボードにコピーしました。

   npm run build
   

2. 実行するには、次のコマンドを使用します。

   コードをコピー クリップボードにコピーしました。

   npm test
   

期待される結果

• ビルドが成功する。
• テストに合格する（npm test -- -uによるスナップショットの更新が必要な場合があります）。
• リンティングエラーがない。

例： Clineでの移行セッション

エージェントに次のように指示します。

Upgrade my MovieCarousel.tsx from Carousel V1 to V2

Clineは次の動作で応答します。

• MCPからcarousel.mdワークフローを読み取ります。
• バックアップファイルを作成します。
• 変更を1つずつ提案します。
• 変更を行う前に、毎回承認を求めます。
• 移行を自動的に完了します。

各手順を承認したら、次のコマンドを実行します。

npm install

npm run build

結果： VUIC Carouselが正常にVega Carouselに移行されます。

よくある問題と解決策

使用されない変数を削除する

原因： VUIC Carouselの変数（viewInfos、getViewForIndex）は不要になりました。

解決策： AIに 「Remove unused variables from the migration」と指示します。

インラインスタイルの警告が発生する

原因：itemStyleオブジェクトがインラインで渡されています。

解決策： AIに 「Extract itemStyle to constants」と指示します。

スナップショットテストが失敗する

原因： コンポーネント構造が変更されています。解決策： npm test -- -uを実行して、スナップショットを更新します。

移行の検証

移行が完了したら、次の点を確認してください。

1. インポートが更新されていること。 インポートに@amazon-devices/vega-carouselが含まれていることを確認します。
2. package.jsonが更新されていること。 両方のパッケージ（vega-carousel＋ほかのコンポーネント用のkepler-ui-components）が存在することを確認します。
3. バックアップが作成されていること。*_ORIGINAL.tsxファイルが存在することを確認します。
4. ビルドが成功すること。npm run buildが正常に完了することを確認します。
5. テストに合格すること。npm testが成功することを確認します。

移行による主な変更点

MCPを使用してサポートされているAIエージェントをセットアップする方法

以下に、サポートされている各AIエージェントをMCPでセットアップする手順へのリンクを示します。

• Cursor
• Github Copilot
• Claude Code CLI（英語のみ）
• Amazon Q IDE拡張機能
• Amazon Q CLI（Kiro）
• Cline（英語のみ）

成功基準

• Carouselのすべてのファイルが移行される。
• ビルドがエラーなしで完了する。
• テストに合格する（必要に応じてスナップショットが更新される）。
• リンティングエラーが新たに発生しない。
• ロールバック用にバックアップファイルが作成される。

サポート

• AI活用開発に向けたAmazon Devices Builder Toolsのセットアップ
• NPMパッケージ（英語のみ）
• MCPプロトコル（英語のみ）

Last updated: 2026年5月6日