React NativeやStripe AppsのUI Componentなど、一般的なHTMLとは違う理屈でUIを実装する必要があるフレームワークやシステムは少なからず存在しています。それらにCursorなどのAIコーディングツールがどこまで対応できるのかを試してみました。

Stripe AppsのUI Componentに関する情報を事前に提供する

流石に事前情報なしでやらせて、「ダメでした」は無理難題が過ぎるかなと思ったので、ドキュメントとしてリソースを提供することにしました。Cursorでは Add new doc で特定のサイトやページをインプットさせることができます。Stripe Appsに関するページをエントリーポイントにする形で登録してみましょう。

CursorでDocumentを明示的に使うときは、@{name}で参照するドキュメントを指定します。

ある程度従うものの、抜け漏れがゼロにはならない

生成したコードはこのような感じでした。Stripe Appsで利用する専用のUIコンポーネントを使ってコーディングできていることが伺えます。

                  <Box css={{ marginTop: "medium" }}>
                    <Box css={{ marginBottom: "small" }}>
                      メール通知の頻度
                    </Box>
                    <Select
                      options={emailFrequencyOptions}
                      value={emailFrequency}
                      onChange={(e) => setEmailFrequency(e.target.value)}
                    />
                  </Box>

ただしアプリを実行すると、「サポートしていないコンポーネントを使っている」というエラーがでました。この例では、<input>タグを使おうとしていることがわかります。

このようなルール違反が起きた場合は、登録したドキュメントを使うだけでなく、明示的にURLを指定することもできます。たとえば以下のプロンプトでは、「このコンポーネントを使え」と指示しています。

@https://docs.stripe.com/stripe-apps/components/select 
selectの使い方は、このページに書かれています。buttonを使うのではなく、selectを使う形でやり直しましょう。

叩き台や速達チケットとしては非常に有効

100点満点ではないにせよ、タブやViewコンポーネントの配置などもしてくれているので、個人的には充分開発に利用できるなと思っています。

流石だなぁと思ったところは、このStripe SDKセットアップ部分です。Stripe Appsで使うときは、少し特殊な書き方をするのですが、見事にサポートしていました。

UIについても、StripeダッシュボードにありそうなUIが出来上がっています。

活用しても、依存はしない

AIコーディングに対する個人的な感想としては、これかなと思います。富士山の5号目までバスで行けるように、ある程度のラインまでの速達チケットをAIコーディングツールは用意してくれます。ただしその先の山登りについては、どこかのラインで自分の力で、足で進む必要が出てきます。そういった意味でも、2025/03時点の生成AIではまだまだ人間の知識力が試される範囲にあるかなと思います。