[日本語訳] GitHub Codespacesを使ってブラウザでStripeサンプルをテストする


:::note
この記事は、[dev.to](https://dev.to/stripe)に公開されている英語記事の日本語訳です。

元記事: [Testing Stripe samples in your browser with GitHub Codespaces](https://dev.to/stripe/testing-stripe-samples-in-your-browser-with-github-codespaces-1bh8)
:::

現代では、ブラウザー上でアプリケーションを開発し、テストすることができるようになりました。クラウドベースの開発環境を瞬時に立ち上げて、ローカル環境の設定なしにブラウザで動作させることが可能です。動作が開始されれば、数回のクリックで他の人とアプリケーションを共有することもできます。コンテナ技術を利用することで、アプリケーションのセットアップが迅速かつ容易になります。つまり、開発環境のセットアップを行う必要がなく、URLを共有するだけで簡単にアプリケーションを他人と共有できるということです。

コミュニティの熱心な努力のおかげで、Stripeの[accept-a-payment](https://github.com/stripe-samples/accept-a-payment)のサンプルコードがGitHub Codespacesで動作するようになりました。

これにより、私たちのサンプルアプリケーションをCodespaceを通じてご自身のブラウザで実行できるようになりました。これは、アプリケーションをローカルマシンにダウンロードする必要がないことを意味します。


![GitHub Codespacesでのアプリケーション起動例](https://res.cloudinary.com/practicaldev/image/fetch/s--hRJSDud0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c73qu0463x2hcyzz10i5.png)

この記事では、GitHub Codespacesを使ってこのStripeサンプルアプリケーションをブラウザ上で実行する方法をご紹介します。

## 必要条件

Codespacesを使用するためには、[GitHubアカウント](https://github.com/signup)と、このサンプルを使用するためのテスト[Stripeアカウント](https://dashboard.stripe.com/register)が必要です。  
GitHub Codespacesは個人アカウント向けに無料の使用枠がありますが、GitHub OrganizationやEnterpriseアカウントの一部である場合は、[Codespacesの料金設定](https://docs.github.com/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#pricing-for-paid-usage)を確認する必要があります。

## 最初のコンテナを立ち上げる

このGitHubリポジトリからStripeの例示アプリケーションを数回クリックするだけで立ち上げることができます。  
リポジトリのメインページから、「Code」ボタンをクリックしてドロップダウンメニューを開きます。

![コードボタン](https://res.cloudinary.com/practicaldev/image/fetch/s--z9YW_urt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt8uq6loctjxk26jo38h.png)

タブを「Codespaces」に変更し、「Create Codespace on main」ボタンをクリックします。

![Codespace作成ボタン](https://res.cloudinary.com/practicaldev/image/fetch/s--3QeRZ6WN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eddg2xklwfkwgvlqd77.png)

「Create Codespace on main」ボタンをクリックすると、GitHub Codespaceがアプリケーションプロジェクトをコンテナで立ち上げ、ブラウザ上のエディタでアプリケーションを編集する新しいタブが開きます。

## Codespaceでアプリケーションを実行する

ブラウザエディタでは、アプリケーションファイルを開いてターミナル環境でbashコマンドを実行できます。

![ストライプサンプルの実行例](https://res.cloudinary.com/practicaldev/image/fetch/s--VJJjR9jA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd4tzbmnwgnenxqtukeo.png)

次に、自分のStripe APIキーを使ってアプリケーションを設定しましょう。  
注: この投稿ではNode.jsを使用しますが、他のバックエンド言語も使用可能です。

次のステップでは、Stripeのダッシュボードで[「Developers」ページ](https://dashboard.stripe.com/test/apikeys)で見つかるStripe APIキーが必要です。

![APIキーの取得例](https://res.cloudinary.com/practicaldev/image/fetch/s--ttpiOz-1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tn9fi3ga3dial6glwli.png)

環境変数の例ファイルをコピーするために、ターミナルで次のコマンドを入力します。

```shell
cp payment-element/.env.example payment-element/node/.env
```

エディタで作成された `.env` ファイルを開き、これらのAPIキーを設定します。

```plaintext
STRIPE_PUBLISHABLE_KEY=pk_test_123...
STRIPE_SECRET_KEY=sk_test_123...
```

ターミナルでサーバーサイドのデモアプリケーションディレクトリに`cd`し、npmを使って依存関係をインストールします。

```shell
npm install
```

その後、デモアプリケーションを起動します。

```shell
npm start
```

Codespaceは、新しいタブでアプリケーションを開くポップアップメッセージを表示します。

![起動メッセージ](https://res.cloudinary.com/practicaldev/image/fetch/s--1O_Gsi5Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kz93ho7sf6wrc8yncrv.png)

「ブラウザで開く」ボタンをクリックすると、デモアプリケーションがブラウザに表示されます。

これですべてが完了です！ブラウザで作動するサンプルと開発環境ができました。

### Tips: プレビューURLの取得方法

「PORTS」タブで実行中のプレビューURLを見つけることができます。

![ポートタブ](https://res.cloudinary.com/practicaldev/image/fetch/s--cGe8Gt9---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu5zsvslkfvfg9s8t9yl.png)

## ブラウザでアプリケーションを変更する

Codespacesでは、ブラウザから直接コードを変更することが容易です。例えば、支払いフォームのスタイルをダークモードに対応させる変更を考えてみましょう。  
`payment-element/client/html/index.js`ファイルを開き、`stripe.elements()`関数を編集します。

```diff
-  const elements = stripe.elements({ clientSecret });
+  const elements = stripe.elements({
+    clientSecret, 
+    locale: 'en',
+    appearance: {
+      theme: 'night'
+    }
+  });
```

この変更により、ロケールを英語に設定し、定義済みの「night」テーマを使用するようにPayment Elementに指示します。  
この例では、アプリケーション（payment-element/server/node）を再起動する必要がありますので、ターミナルで「Ctrl」キーと「C」キーを押して「npm start」コマンドを停止し、再度「npm start」コマンドを実行します。  
チェックアウトフォームの外観が「night」テーマに変更されたことを確認できます。

![nightテーマのフォーム](https://res.cloudinary.com/practicaldev/image/fetch/s--MqYJE8FA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd6y5s9ymt2h7w9ttl4g.png)

支払いフォームのカスタマイズに興味がある方は、[Appearance API](https://stripe.com/docs/elements/appearance-api)に関する詳細情報をご覧になれます。

## 複数のアプリケーションを同時に実行する

上記ではCodespacesでサンプルのフロントエンドを動かす方法を示しましたが、フルスタックの全体像を得たい場合はどうでしょうか？幸い、少しの設定でCodespacesでサンプルのフロントエンドとバックエンドの両方を動かすことが可能です。

ターミナルセクションで「Split Terminal button」をクリックして、新しいターミナルタブを起動します。

![ターミナル分割ボタン](https://res.cloudinary.com/practicaldev/image/fetch/s--Moii9EOL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg5ja7hbtwxmxkfoigjj.png)

新しいターミナルタブをクリックして、クライアントサイドのアプリケーションの準備をします。

![クライアントサイドの準備](https://res.cloudinary.com/practicaldev/image/fetch/s--vv82ej7B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz4zaspiwq1wn6dnaxsz.png)

クライアントサイドのアプリケーションディレクトリに移動します。例として`payment-elements/client/react-cra`に行ってReactアプリケーションをテストしましょう。

```shell
cd ../../client/react-cra/
```

インストールコマンドを実行して依存性をインストールします。

```shell
npm install
```

そして、Reactアプリケーションを開始します。

```shell
npm start
```

ReactアプリケーションのプレビューURLにアクセスするため、新しいウィンドウを開きます。

![Reactアプリプレビュー](https://res.cloudinary.com/practicaldev/image/fetch/s--Vz86RfF9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu0mfsfmfm3xqhcn1hcw.png)

各プレビューアプリケーションはCodespaceのコンテナ内で接続されているため、別のアプリケーションに接続するためにコードを更新する必要はありません。さらに、環境内で「localhost」ドメインを使い続けることで、フルスタックアプリの全体像を確認することができます。

## デモを公開で共有する

プレビューURLはプライベートに保持されるため、権限のないユーザーやログアウトしたユーザーはサインインページにリダイレクトされます。

![非公開プレビュー](https://res.cloudinary.com/practicaldev/image/fetch/s--DRyWHRs4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn28syis5w31d2j77boi.png)

デモアプリケーションを共有したい場合は、いくつかのステップを踏んでコンテナを公開に設定することができます。  
「PORT」タブにアクセスし、公開したいアプリケーションを右クリックします。

![ポートの公開](https://res.cloudinary.com/practicaldev/image/fetch/s--B_dtI7MP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bp2tlsczphgmlb2fvv2.png)

「Port Visibility」サブメニューを開き、「Public」を選択します。これで、URLを知っている人なら誰でもアプリケーションにアクセスできます。

![公開プレビュー](https://res.cloudinary.com/practicaldev/image/fetch/s--HQXHKJsn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf9tc6jdh1298r2jag8d.png)

「PORT」タブを確認して、アプリケーションの「Visibility」ステータスをチェックします。

![Visibilityステータス](https://res.cloudinary.com/practicaldev/image/fetch/s--jLy3ru7---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqbfhg35n778170zs2v8.png)

## Codespaceコンテナの停止と終了

GitHub Codespacesには無料プランがありますが、[制限なしの使い放題ではありません](https://docs.github.com/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#monthly-included-storage-and-core-hours-for-personal-accounts)。必要なくなったらコンテナを終了しましょう。  
既存のコンテナは[Codespacesダッシュボード](https://github.com/codespaces)から確認できます：

![コンテナ一覧](https://res.cloudinary.com/practicaldev/image/fetch/s--Klh3Bg07--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7y01dhd0niuz1eeewm7.png)

各コンテナの「...」ボタンをクリックすると、コンテキストメニューが表示され、そこからCodespaceを削除して停止できます。

![コンテキストメニュー](https://res.cloudinary.com/practicaldev/image/fetch/s--FEpFHlht--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/902nrjqsm1k87wfgxgq6.png)

リポジトリページ自体からもCodespaceを管理することができます：

![リポジトリページからの管理](https://res.cloudinary.com/practicaldev/image/fetch/s---qSy3AVZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qf0c17wmi63ksjidfui.png)

## まとめ

この投稿では、GitHub Codespaces を使用して、ブラウザで支払い受諾 Stripe サンプル開発環境を起動する方法を学びました。
アプリケーションで Codespaces をサポートする方法に興味がある場合は、[公式 GitHub ドキュメント](https://docs.github.com/ja/codespaces)から学ぶことができます。
ストライプサンプルリポジトリには、さまざまな言語とユースケースが含まれています。たとえば、Payment 要素の代わりに[Stripe Checkout を使用すること](https://github.com/stripe-samples/accept-a-payment/tree/main/prebuilt-checkout-page)を選択できます。