Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

手順5： Carouselを移行する

→

→

→

→

→

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

この手順は、Carouselコンポーネントを使用しているアプリにのみ必要です。アプリでCarouselを使用していない場合は、手順6：更新をテストするに進んでください。

RN 0.83では、Carouselコンポーネントがkepler-ui-componentsパッケージから@amazon-devices内の独立したパッケージに移動されました。Carouselを使用している場合は、コンポーネントを新しいパッケージに移行する必要があります。

5.1 Carouselの使用箇所を検出する

grep -rn "import.*Carousel.*from.*kepler-ui-components" src/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"

何も見つからない場合は、手順6：更新をテストするに進んでください。

5.2 依存関係を更新する

{
  "dependencies": {
    "@amazon-devices/vega-carousel": "~1.0.0"
  }
}

Carouselがkepler-ui-componentsからの唯一のインポートである場合は、依存関係全体を置き換えます。
ほかのコンポーネントもインポートしている場合は、kepler-ui-componentsを残したままvega-carouselを追加します。

5.3 importステートメントを更新する

// ❌ 更新前
import { Carousel } from '@amazon-devices/kepler-ui-components';

// ✅ 更新後
import { Carousel, CarouselRenderInfo } from '@amazon-devices/vega-carousel';

5.4 データアクセスパターンを移行する

Carousel V2では、パフォーマンスの向上のために、単純なdata配列プロパティがdataAdapterパターンに置き換えられています。

// ❌ 更新前（V1）- 単純なdata配列
<Carousel
  data={items}
  keyProvider={(item, index) => `item-${item.id}`}
  renderItem={({ item, index }) => <ItemCard item={item} />}
/>

// ✅ 更新後（V2）- dataAdapterパターン
const getItem = useCallback((index: number) => {
  if (index >= 0 && index < items.length) {
    return items[index];
  }
  return undefined;
}, [items]);

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

const getItemKey = useCallback((info: CarouselRenderInfo) => {
  return `item-${info.item.id}`;
}, []);

const notifyDataError = useCallback((error: CarouselDataError) => {
  return false;
}, []);

<Carousel
  dataAdapter={{
    getItem,
    getItemCount,
    getItemKey,
    notifyDataError,
  }}
  renderItem={({ item, index }) => <ItemCard item={item} />}
/>

警告： 古いクロージャの問題を避けるために、コールバックロジックで参照されているすべての変数を依存配列に含めてください。

5.5 プロパティを移行する

プロパティの名前を、次の表に示すV2プロパティの名前に更新します。

V1プロパティ	V2プロパティ	説明
`data`	`dataAdapter`	手順5.4を参照してください。
`keyProvider`	`dataAdapter.getItemKey`	`(item, index)`ではなく`CarouselRenderInfo`を受け取るようになりました。
`rowId`（数値）	`uniqueId`（文字列）	数値を文字列に変換してください。
`maxToRenderPerBatch`	`renderedItemsCount`	機能は同じですが、新しい名前になりました。
`hasTVPreferredFocus`	`hasPreferredFocus`	すべてのデバイスで機能するようになりました。
`trapFocusOnAxis`	`trapSelectionOnOrientation`	機能は同じですが、新しい名前になりました。
`itemPadding`	`itemStyle.itemPadding`	`itemStyle`オブジェクトに移動されました。
`itemSelectionExpansion`	`itemStyle.selectedItemScaleFactor`	単一の統一されたスケール係数。V1では`widthScale`と`heightScale`の別々の値が使用されていましたが、V2では単一の統一されたスケール係数が使用されます。V1の実装で幅と高さに異なるスケールを設定していた場合は、まず`heightScale`を使用して表示結果をテストしてください。
`itemScrollDelay`	`animationDuration.itemScrollDuration`	`animationDuration`オブジェクトに移動されました。
`focusIndicatorType`	`selectionStrategy`	値のマッピング：`fixed`→`anchored`、`natural`→`natural`、`pinned`→`pinned`
`pinnedFocusOffset`	`pinnedSelectedItemOffset`	`"start"`、`"center"`、`"end"`も受け入れます。
`selectionBorderStrategy`	`selectionBorder.borderStrategy`	`selectionBorder`オブジェクトに移動されました。

廃止された以下のV1プロパティの削除（相当するV2プロパティなし）

itemDimensions
getItemForIndex
firstItemOffset
selectionBorder.enabled

5.6 イベントハンドラーを移行する

選択されたカルーセルアイテムの追跡にonFocusまたはonFocusUpdateを使用している場合は、onSelectionChangedに移行します。

// ❌ 更新前（V1）- 選択の追跡にonFocusを使用
const [selectedIndex, setSelectedIndex] = useState(0);

<Carousel
  onFocus={(index) => setSelectedIndex(index)}
/>

// ✅ 更新後（V2）- onSelectionChangedを使用
const onSelectionChanged = useCallback((event: CarouselSelectionChangeEvent) => {
  const item = items[event.index];
  // ここに独自のロジックを実装
}, [items]);

<Carousel
  onSelectionChanged={onSelectionChanged}
/>

5.7 移行の完全な例

// ✅ V2 Carouselの完全な実装
import React, { useCallback } from 'react';
import { Carousel, CarouselRenderInfo, CarouselSelectionChangeEvent } from '@amazon-devices/vega-carousel';

interface MovieItem {
  id: string;
  title: string;
  thumbnail: string;
}

function MovieCarousel({ movies }: { movies: MovieItem[] }) {
  const getItem = useCallback((index: number) => {
    return index >= 0 && index < movies.length ? movies[index] : undefined;
  }, [movies]);

  const getItemCount = useCallback(() => movies.length, [movies]);

  const getItemKey = useCallback((info: CarouselRenderInfo) => {
    return `movie-${info.item.id}`;
  }, []);

  const notifyDataError = useCallback(() => false, []);

  const onSelectionChanged = useCallback((event: CarouselSelectionChangeEvent) => {
    console.log('選択された映画：', movies[event.index]?.title);
  }, [movies]);

  return (
    <Carousel
      dataAdapter={{ getItem, getItemCount, getItemKey, notifyDataError }}
      renderItem={({ item }) => <MovieCard movie={item} />}
      uniqueId="movie-carousel"
      renderedItemsCount={7}
      hasPreferredFocus={true}
      selectionStrategy="anchored"
      onSelectionChanged={onSelectionChanged}
      itemStyle={{
        itemPadding: 16,
        selectedItemScaleFactor: 1.1,
      }}
      animationDuration={{
        itemScrollDuration: 0.3,
      }}
    />
  );
}

プロパティマッピングの詳細なリファレンスについては、Vega Carouselのドキュメントを参照してください。

Last updated: 2026年7月9日