新しいJSXベースのSnaps UIコンポーネントライブラリのご紹介

業界標準に準拠した、より使いやすい JSX ベースの UI システムを導入しました。これにより、開発者は Snap の UI をより簡単に作成し、以前よりもさらに柔軟にカスタマイズできるようになりました。このシステムは、柔軟性に乏しかった従来の関数ベースのコンポーネントシステムを置き換えるものです。この新しい UI ライブラリを使用することで、開発者はカスタム props を用いたインターフェースを構築したり、独自のテンプレートコンポーネントを作成したりすることができます。

さらに、この新しいシステムには、位置指定、ボタンのバリアント、ドロップダウンなど、さまざまなインタラクティブなユースケースを実現する UX コンポーネントが含まれています。インラインスタイリングの定義においても開発者体験が向上しており、Markdown 使用時に生じていた課題が解消されています。

従来の UI ライブラリは引き続きサポートされますが、非推奨（deprecated）として扱われます。将来的には削除される予定です。Snaps 開発者の皆様には、できるだけ早く UI コードを新しい JSX ベースのシステムへ移行されることを強くお勧めします。

新しいコンポーネント

Custom UI の作成を簡素化するだけでなく、関数ベースの同等コンポーネントが存在しない 2 つの新しいインタラクティブな JSX コンポーネント、Dropdown と Field をリリースしました。これらのコンポーネントにより、Custom UI にさらなるインタラクティブ性と優れたユーザー体験をもたらすことができます。

新しい Box コンポーネントは panel コンポーネントを置き換え、位置指定と方向のオプションを追加します。これにより、ユースケースにより適したリッチな UI を作成できます。Markdown は Bold、Italic、Link コンポーネントに置き換えられ、書式付きテキストの扱いが容易になりました。

JSX API には今後も新しいコンポーネントを追加していく予定です。

独自コンポーネントの作成

JSX API を使用すると、React と同様に独自のコンポーネントを作成できます。@metamask/snaps-sdk/jsx から既存のコンポーネントをインポートするか、独自のカスタムコンポーネントを組み合わせて作成することができます。以下に簡単な例を示します：

import {Box, Form, Input, Button} from '@metamask/snaps-sdk/jsx'

export const MyCustomForm = (props) => (
<Box>
  <Form name="form-to-fill">
    <Input name="user-name" placeholder="Your name" />
    <Box direction="horizontal">
      <Button type="submit">Submit</Button>
      {props.isCancellable && <Button type="button" name="cancel">Cancel</Button>}
    </Box>
  </Form>
</Box>
);
コピー

既存の Snap プロジェクトのアップグレード

既存の Snap プロジェクトを JSX にアップグレードするために必要な手順の概要は以下のとおりです：

1. Snap パッケージの依存関係を更新する。

2. JSX コンポーネントを完全に使用できるよう、リントルールを変更する。

3. JSX が含まれる場合、Snap のソースファイルを index.tsx にリネームする。

4. index.tsx を参照するよう、Snap CLI の設定を変更する。

5. JSX を有効にするため、Snap の tsconfig.json ファイルを編集する。

これらの手順については、既存の Snap プロジェクトを JSX 対応にアップグレードするドキュメントに詳しく記載されています。

はじめに

テンプレート Snap モノレポはすぐに使い始められるよう設定済みです。以下のコマンドを使用して、モノレポから新しい Snap プロジェクトを作成できます：

snap/src/index.tsx ファイルには、JSX を使用した Custom UI の実装例が含まれています。@metamask/snaps-sdk/jsx からコンポーネントをインポートし、UI の構築に活用できます。

すべてのコンポーネントとその props については Custom UI with JSX ドキュメントを参照してください。また、JSX を使用したサンプル Snap もぜひご覧ください。