AIの進化がすさまじいですよね。ChatGPT、GitHub Copilot、Cursor、V0、Artifacts...
私はそんな最新技術の恩恵をフルに受けているデザイナーの１人です。
生成AIのおかげでコーディングしたり、SQLを書いたり、メールの返信したり、落ち込んだ時に永遠と励ましてもらったりに頼りまくる日々を送っています。
新しい世界を覗くためAIの助けを借りて、非エンジニアの私がPAY.JPのテスト実装をどこまでやれるか挑戦してみました！
スペック
🧑🎨 マーケ兼デザイナー
HTMLやCSSを触れる程度。
環境設定や初期構築にはいつも怯えてしまいエンジニアさんに頼りっぱなし
準備編
アカウント登録
メールアドレスとパスワードでアカウント登録します。
https://pay.jp/d/signup
ログインできたらPAY.JPのアカウントを登録してテスト環境のAPIキーを確認します。
これでPAY.JP側の下準備はおわりです✌️
ChatGPTで全体を聞く
必要なコードと流れを知りたかったのでChatGPTで「PAY.JPをつかったシンプルなコードとファイル構成とローカル環境の立ち上げ方法も教えて」と伝えて全体の流れを把握します。
CursorもChatGPTなのでまるっとCursorでやっても大丈夫ですが、個人的にはCursorの方で質問するとシンプルで端的回答で、ChatGPTの方はガッツリ説明してくれる印象なので全体感を聞く時はChatGPTなど回答してほしい内容に応じてなんとなく使い分けてます。
project/
├── index.php # フロントエンド（決済ページ）
├── charge.php # 支払い処理
├── .env # 環境変数（APIキーなど）
├── vendor/ # Composerのライブラリ
└── composer.json # Composer設定ファイル
必要なファイル構成と必要なライブラリのインストールと各ページで何をするのかをざっくりイメージできたので、ChatGPTが生成してくれたコードをローカルで作成していきます🙆
実践編
Cursorで実装してみる
Cursorは、Visual Studio Code（VSCode）をベースにChatGPTが搭載されたAI搭載のコードエディタです。
VSCodeユーザーなので、学習コストが低くて、プライベートで使ってます。
ChatGPTから生成してもらったコードをCursorに取り込み、実装を進めていきます。
APIキーのセットアップ
まずはPAY.JPの管理画面から取得したテスト用APIキーをコードに埋め込みます。この時、セキュリティ意識高めのChatGPTが「環境変数を使うといいですよ」とさりげなく教えてくれました。
.env ファイル
PAYJP_SECRET_KEY=sk_test_*****************
環境変数を使う利点
セキュリティ向上 - コード内にハードコーディングしないため、誤ってコードを公開した場合でもシークレットキーが漏洩しません。
環境ごとの設定切り替えが簡単 - 開発環境、ステージング、本番環境で異なるシークレットキーを使用できます。
管理しやすい - .envファイルやシステムの環境変数で一元管理することで、キーの変更が容易になります。
インストール
では、localhostにつながるかためしてみます。
php -S localhost:8000
はい、ダメです。
zsh: command not found: composer
そうでした。ChatGPTにもcomposerをインストールしてねって言われてました。
今までなら、エラーをググってターミナルで震えながらインストールしていましたが、 ここがAIのありがたいところです。
右側のチャットでなぜエラーになったのか、次に何をすればいいのかおしえてくれます。
（最初Pythonチャレンジしたときのスクショでわかりずらかったらすみません。）
右側のチャットを拡大したものが下の画像です。
CursorはChat機能があり、そこで何のエラーなのか、解消するためにどんなステップが必要なのか教えてくれます。
順番に沿ってrunしてインストールしていきます。
日本語対応とてもありがたいですよね。恐怖心が軽減されます。
モデルも選べます。
プランによってモデルの制限がありますので、いっぱい使いたい方は計画的に。
無事、composerをインストールできたので、payjp-phpもイントールします。
composer require payjp/payjp-php
ローカル立ち上げ
今度は、無事立ち上がりました。
カード情報のUIも参照してくれています。
エラーがでたり、追加したいものをチャットで会話すると、ログを追加したりしながら、改善を進めてくれます。
相談を繰り返して、完了までたどりつきました🎉
テストカードで無事完了したので、PAY.JPの管理画面も確認してみると、管理画面にも反映されていました🎉
無事ひと段落なので、Cursorを使って引き続き遊んでみようと思います。
環境変数にする
上記のテストを繰り返してる中で、エラーが解消できずに環境変数を外して直書きをしてしまいました。
Cursor直してもらおうとおもいます。
ファイルを参照して修正を行うことができるので、APIキーを直書きしてしまったファイルを検索して、対象ファイルを修正してもらう指示をだしました。
それぞれのファイルを修正してくれながら、注意点を教えてくれました。
~ ~ ~
🎉
PAY.JP docsを読み込ませてみる
つぎは、Docs機能を使ってみます。
CursurのDocs機能とは、サードパーティライブラリのドキュメントをAIに読み込ませる機能です。
これにより、PAY.JP Docsの情報を参照しながらベストプラクティスに沿いながら反映してくれます。
例えば、以下はPAY.JP v2のドキュメントを参照しながらresult.token.id から result.id に変更してくれてます。
外部ドキュメントを読み込むことで、Cursorがプロジェクト全体の仕様やAPI、設定を理解してくれるので、コンテキストを持ったコード補完がありがたいです。
1人だったらググりループを繰り返して、3時間くらい泣き悩んでしまいそうです。
🎉
3Dセキュアの設定をしてみる
Docsをインポートしたので、3Dセキュアも設定してみます。
3Dセキュアの重要な点と今のコードで反映箇所を指示してくれます。
正確な情報をだしてくれるわけではないので、Cursurが参照した箇所の本家のドキュメントを両方見ながら進めるとかなり理解が深まります🙆
対応してくれたのを、反映してローカル環境を確認します。
無事サブウィンドウ型で3Dセキュアのモーダルがでました。
🎉
顧客を追加してみる
3Dセキュアを設定後に、「3Dセキュアするなら顧客情報追加してね」と指摘をもらったので、顧客も追加してみます。
PAY.JPのDocs参照し「顧客を追加したい」とつたえると公式に合わせて提案してくれます。
3Dセキュアを有効化しながらCustomerもつくってくれました。
見た目はかわっていませんが、管理画面の方に顧客（Customer）が追加されるようになりました。
🎉
気づきと学び
AIがメンター兼、補助輪の役割をしてくれた
何が原因でエラーが起きてるのか、どのコードをどんな理由で変えるのか説明をもらうので、なるほど〜と思いながらすすめるので、めちゃくちゃ勉強になりながら進めることができました。
全然自分のものにできてるわけじゃないので、補助輪付きで進んでく感覚でした。
PAY.JPのドキュメントが親切
CursurのDocs機能でPAY.JPのドキュメントインポートしてから、わかりやすさが段違いになりました。
最初からやっておけばよかったです。
Cursurは、もちろんすごいんですがドキュメント側のクオリティも出力に大きく影響します。
PAY.JPの公式ドキュメントは、エンジニアさんからもシンプルでわかりやすいという声をSNSを見ることが多いのですが、シンプルで曖昧な表現を避けて言い切るスタンスのおかげで、AIが生成するコードやアドバイスも的確だったのかもとおもっています。
今後、人間だけでなくAIも「読む」ことを想定したドキュメント設計が求められてくるんだな〜と気付かされました。
感想
それにしても、AIやツールの活用の敷居がここまで下がった時代に生きていることに感謝です。
AIがメンターになってくれて一歩踏み出すハードルが低くなっているのは、本当にありがたいことです。
モデルの進化やツールもどんどんアップデートしている今、この流れに乗って、もっといろいろなことを試してみたいです！