Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

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

ホーム

開発

設計と開発

公開

リファレンス

サポート

Vega OS用のプラットフォーム固有のコード

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

Vega OS用のアプリの構築時には、Vegaでのみ動作するプラットフォーム固有のコードを記述したり、プラットフォーム間の違いを処理するようにコードを構成したりする必要が生じる場合があります。このガイドでは、プラットフォーム固有の拡張子とPlatformモジュールをVega OSで使用する方法について説明します。

Platformモジュール

Vega向けReact Nativeには、アプリが実行されているプラットフォームを検出するためのPlatformモジュールが用意されています。Vega OSでは、このモジュールを使用してVega固有のコードを実行できます。

Platform.OS

Platform.OSプロパティは、現在のプラットフォームを表す文字列を返します。注： Vega OSでは、Platform.OSは'kepler'を返します。

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      kepler: {
        backgroundColor: 'blue',
      },
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
    }),
  },
});

Platform.select()

Platform.select()メソッドは、現在実行中のプラットフォームに応じた値を返します。Vega固有の値には、キーとしてkeplerを使用します。

import { Platform } from 'react-native';

const Component = Platform.select({
  kepler: () => require('ComponentKepler'),
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

プラットフォーム固有の拡張子

プラットフォーム固有のコードが複雑になる場合は、コードを別々のファイルに分離することをお勧めします。React Nativeは、ファイルに付けられたプラットフォーム固有の拡張子を検出し、ほかのコンポーネントから要求されたときに適切なプラットフォームファイルを読み込みます。

Vega OS用には.kepler拡張子を使用してください。

例

プロジェクト内に次のファイルがあるとします。

Button.kepler.tsx
Button.ios.tsx
Button.android.tsx

このコンポーネントをインポートします。

import Button from './Button';

React Nativeは、実行中のプラットフォームに基づいて適切なファイルを自動的に選択します。

Vega OSの場合： Button.kepler.tsxが読み込まれます。
iOSの場合： Button.ios.tsxが読み込まれます。
Androidの場合： Button.android.tsxが読み込まれます。

サポートされる拡張子

次のファイルタイプで.kepler拡張子を使用できます。

.kepler.tsx - JSXを使用するTypeScript
.kepler.ts - TypeScript
.kepler.jsx - JSXを使用するJavaScript
.kepler.js - JavaScript

Tree Shakingとプラットフォーム固有のコード

Vega OSでは、プラットフォーム固有のTree Shakingが完全にサポートされています。つまり、アプリをビルドすると、バンドラーによってほかのプラットフォーム用のコードが自動的に除外され、バンドルサイズが小さくなります。

動作のしくみ

.kepler.tsxなどのプラットフォーム固有のファイル拡張子を使用した場合、ビルドシステムは次のように動作します。

ビルドプロセス中にターゲットプラットフォームを検出します。
Vega OSバンドルに.keplerファイルのみを取り込みます。
最終的なバンドルから.iosファイルと.androidファイルを除外します。
使用されていないプラットフォーム固有のコードブランチを削除します。

重要な注意事項

Vega OSはプラットフォームシステムにkeplerとして登録されているため、Tree Shakingを正しく機能させるには、プラットフォーム固有のファイル名にkeplerというキーワード（vegaではなく）を使用する必要があります。

正しい例：

Button.kepler.tsx  ✓
utils.kepler.js    ✓

間違った例：

Button.vega.tsx    ✗
utils.vega.js      ✗

ベストプラクティス

違いが大きい場合はプラットフォーム固有のファイルを使用する：プラットフォーム間で実装が大きく異なる場合は、別のファイルに分離して.kepler拡張子を付けます。
違いが小さい場合はPlatform.select()を使用する：スタイル設定や単純な条件付きロジックなどの小さい違いを実装するには、1つのファイル内でPlatform.select()またはPlatform.OSのチェックを使用します。
共有ロジックを共通のファイルにまとめる：プラットフォームに依存しないロジックは、プラットフォームの拡張子を付けずに共有ファイルにまとめて、できるだけコードを再利用します。
Tree Shakingを利用する：プラットフォーム固有の拡張子を使用して、関連するコードだけをVega OSバンドルに含めるようにします。これにより、パフォーマンスを高め、バンドルサイズを小さくすることができます。