# UI Extensions の開発者ツール

バンドルされている開発者ツールを使用して、コードについて Typecheck、lint、テストを行います。

Stripe CLI を使用して[アプリを作成](https://docs.stripe.com/stripe-apps/create-app.md)すると、生成されるパッケージには、UI 拡張機能の構築に役立つベストプラクティスが組み込まれた開発環境ツールが含まれます。このドキュメントでは、含まれているツールと、必要に応じてご自身のアプリに合わせてツールを変更する方法について説明します。

## タイプの確認

アプリは [Typescript](https://www.typescriptlang.org) のサポートとともに提供され、Stripe が出荷するすべてのサポートパッケージに開発を支援するためのタイプ定義が含まれています。 Typescript の警告は、サポート対象のコードエディターに自動的に表示されますが、コマンドラインを使用してコードを確認することもできます。

#### yarn

```bash
yarn tsc
```

アプリのルートディレクトリには、`@stripe/ui-extension-tools` パッケージの推奨設定を拡張する `tsconfig.json` ファイルがあります。ほとんどの開発者はこのファイルを変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、`extends` プロパティを削除して独自の Typescript 設定を作成することもできます。

画像のインポートを有効にするために、`@stripe/ui-extension-tools` パッケージのタイプ定義を参照する `ui-extensions.d.ts` タイプ定義ファイルが含まれています。このファイルは CLI が処理できる画像のタイプを示すのに役立つため、削除はお勧めしません。

## Linting

Linting (コードの構文やフォーマットのエラーをチェックすること) は非常に貴重な開発者ツールで、アプリには [ESLint](https://eslint.org) 設定が付属しています。ベストプラクティスのリンタリングルールに加え、Stripe 独自のルールも用意し、よくあるミスを防ぎます。対応するコードエディタでは自動的にリンタリングの警告が表示されますが、コマンドラインを使用してコードをチェックすることもできます。

#### yarn

```bash
yarn lint
```

ESLint 設定は、`eslintConfig` プロパティの `package.json` ファイルにあります。これにより、`@stripe/ui-extension-tools` パッケージの設定を拡張します。ほとんどの開発者はこの設定を変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、`extends` プロパティを削除して独自の Linting ルールを作成することもできます。

## テスト

アプリ開発者は、[Jest](https://jestjs.io) で構築されたバンドルのテストハーネスを使用して、React コンポーネントとユーティリティ関数の[ユニットテストを作成](https://docs.stripe.com/stripe-apps/ui-testing.md)できます。テストは、コマンドラインで実行します。

#### yarn

```bash
yarn test
```

アプリのルートディレクトリに、`@stripe/ui-extension-tools` パッケージの推奨設定を拡張する `jest.config.js` ファイルがあります。ほとんどの開発者はこのファイルを変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、インポートを削除して独自の設定を作成することもできます。

## Optional: ui-extension-tools パッケージを使用するように古いアプリを更新する

`stripe apps` CLI バージョン 1.3.0 (2022 年 8 月 16 日リリース) 以降で作成されたアプリでは、開発者ツールの設定が簡素化され、開発者は `package.json` の `@stripe/ui-extension-tools` を更新することで、Typescript タイプ、linter ルール、テスト設定を最新状態に保つことができます。古いアプリを更新して新しいパッケージを使用するには、以下の手順に従います。

1. 古い依存関係を削除します。アプリのルートディレクトリのコマンドラインで、以下を実行します。
   #### yarn

   ```bash
   yarn remove react @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react eslint-plugin-react-hooks jest jest-transform-stub ts-jest ts-node typescript
   ```
1. 新しいツールパッケージを追加します。コマンドラインで以下を実行します。
   #### yarn

   ```bash
   yarn add --dev @stripe/ui-extension-tools
   ```
1. `eslintConfig` プロパティを `package.json` に追加します。
   ```json
   "eslintConfig": {
     "extends": [
       "./node_modules/@stripe/ui-extension-tools/eslintrc.ui-extension.js"
     ]
   }
   ```
1. `package.json` の `scripts` セクションに `lint` コマンドを追加します (`test` はそのままにします)。
   ```json
   "scripts": {
     "test": "jest",
     "lint": "eslint --ext ts,tsx src"
   },
   ```
1. `jest.config.ts`、`.eslintrc.json`、`images.d.ts` ファイルを削除する
1. `tsconfig.json` のコンテンツを次のコードに置き換えます。
   ```json
   { "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension" }
   ```
1. このコードを使用して、ルートディレクトリに `jest.config.js` という新しいファイルを作成します。
   ```javascript
   /* eslint-env node */
   /* eslint-disable @typescript-eslint/no-var-requires */
   const UIExtensionsConfig = require("@stripe/ui-extension-tools/jest.config.ui-extension");
   
   module.exports = {
     ...UIExtensionsConfig,
   };
   ```
1. このコードを使用して、ルートディレクトリに `ui-extensions.d.ts` という新しいファイルを作成します。
   ```
   /// <reference types="@stripe/ui-extension-tools" />
   ```

## See also

- [UI Extensions の仕組み](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)