この記事では、VS CodeそしてGItHub Copilotを利用して決済・サブスクリプション機能の開発をスムーズに行う方法を紹介します。これからStripeの組み込みを開始するという開発者だけでなく、担当者の異動などで新しく決済・請求システムの運用保守を担当することになった方にとっても、コードの理解や修正方法をより効率的に知る方法としてぜひお試しください。

この記事は、Visual Studio Code Advent Calendar 202416日目のポストです。

StripeによるVS Code拡張機能

StripeはVS Codeを利用した開発を効率化するための拡張機能をリリースしています。この機能を利用することで、Stripe Webhook用のAPI開発やリクエストログのストリーミング・テストイベント送信などの作業をVS Code上で完結させることができます。

https://docs.stripe.com/stripe-vscode

Stripe拡張機能は、GitHub Copilotにも対応

Stripeが提供する拡張機能は、VS CodeでGitHub Copilotを利用するユーザーにとってさらに強力なツールとなります。これはStripeの拡張機能がGitHub CopilotのChat機能をサポートしており、　Copilot拡張機能を通して調査やデバッグなどを行うことができるためです。

VS CodeでのGitHub Copilotのセットアップ方法については、VS Codeが提供するドキュメントを参考にしてください。

Stripeの拡張機能とCoiplit両方のセットアップが完了していれば、Copilot Chatで@stripeコマンドが利用できるようになっています。

StripeのCopilot連携機能でできることの紹介（一部）

ここからはCopilotとStripeの拡張機能を組み合わせてできることの一部を紹介します。

`@stripe {質問文}`コマンドで、Stripeに関する質問やコード生成を行う

もっともシンプルな使い方は、「Stripeの組み込み方法をCopilotに質問する」使い方です。@stripeコマンドで質問を行うと、Stripeが公開しているドキュメントの内容に基づいた回答を得ることができます。例えば「サブスクリプションの作り方を教えて」と質問すると、事前にProductsやPricesリソースを作る必要があることなどを教えてもらえます。

Copilotはチャット形式で会話を続けることができます。そのため、言語を指定してコードの生成を依頼すると、指定した言語でのコードも入手できます。

また、@stripeコマンドで直接コードの生成を指示することも可能です。この場合生成したコードの説明や注意点なども生成してくれることがあります。

Copilotを使って、よりコードの運用保守をスムーズに行う

この他にもCopilotが持つ機能を利用して様々な効率化が期待できます。ここでは/explainと/fixの２コマンドを紹介します。

実装済みのコードを理解するためにつかう`/explain`コマンド

決済や請求管理に関する実装は、常にゼロから作るとは限りません。すでにあるアプリケーションコードの保守を引き継いで担当するケースももちろんあります。このような場合、多くの開発者にとって負担となるのが現在の実装を理解・把握することです。このようなケースでも、Copilotの機能は大いに役立ちます。

まず調査したいファイルをVS Codeで開きましょう。その後、Copilotのチャット画面にて、@workspace /explainを実行します。

@workspace /explainコマンドを実行すると、現在開いているコードがどういうものかを、説明してくれます。この説明文を読みながらコードを読み解くことで、現在の実装がどのようなものかを短時間で把握していくことができます。

またこの機能は特定のAPIパスや関数に絞っても利用できます。例えばExpressやHonoなどで追加したAPIパスを指定して質問することも可能です。

このほかにもコードを選択した状態にすると、その部分だけ説明してくれます。どの行について説明しようとしているかは、[Ask Copilot]のファイル名に表示されている行数を確認しましょう。

このように/explainコマンドを活用することで、すでにあるコードベースの実装理解をよりスムーズに進めることができます。もしStripeに関する説明について、より詳しく知りたい・ドキュメントを参照したいとなった場合には、先に紹介した@stripeコマンドを利用して不明な点について質問することをお勧めします。

fixでコード内の問題を調べる

もう1つのコマンドは、@workspace /fixコマンドです。これは、現在開いているファイルや選択中のコードについてCopilotが修正の提案をしてくれるコマンとです。例えばStripeのAPIキーを直接定義しているファイルを開いている場合、@workspace /fixコマンドを実行すると、APIキーを環境変数へ移動することをお勧めされます。

このコマンドは@workspace /fix <指示>のような形で修正を依頼する内容を指定することもできます。APIレスポンスの内容を変更したい場合などには、変更したいコードを選択し、@workspace /fixコマンドを実行して提案してもらう指示を出しましょう。

更なるAI支援機能もプレビュー提供中！

今回の記事では、Copilot Chatを使った実装相談やコードの理解・そして修正提案についてを紹介しました。Stripeではこれ以外にも、さらなるAI支援機能も開発中です。Copilot / VS Codeを組み合わせた開発フローの更なる効率化に興味をお持ちの方は、プレビュー参加申し込みフォームからお申し込みください。

VS Code拡張機能に関する最新情報は、Stripe Insidersのカテゴリー: VS Code extensionからチェックできます。Stripe Insidersでは、これ以外にも様々な開発者向けプレビュー機能の紹介や、製品フィードバックの募集などを行っています。英語ではありますが、翻訳機能や生成AIなどを活用してぜひご参加ください。