はじめに

最近になって仕事で触る技術に大幅に変化があったため、学習を兼ねてというのとAIと協力して何か作ってみたいという思いがあったので実行してみました。
何か真新しいことをしたわけではないので技術寄りの話というよりは作る上で考えたことを中心にまとめたいと思います。

サイトの概要

まずサイトを作るなら自分自身にも関係があって日常的に利用できるものがよいと思い、商品検索サイトを作ることにしました。
コンセプトはお得な商品を検索して買い物上手になろうということで「買い物上手」→「KAI-JAWS」という発想でサイト名を決めました。
楽天の商品価格ナビに掲載されている商品をキーワード、価格、ジャンル情報をもとに検索・絞り込みを行い、スクロールによって次のリクエストが飛んで追加の結果を描画するシンプルな形にしました。
実際のサイトはこちら↓
https://kai-jaws.com

ちなみにサイトのロゴもAIに作ってもらってます。少し手直ししてますが、ほぼAIが作ったまま使ってます。

なぜChatGPTと楽天の商品価格ナビ製品検索APIを使ったのか

まずなぜChatGPTを使ったかというと、AIで簡単にWebサイトが作れるといろんなところで言われている中、本当のところどうなんだろうというのを体験してみたかったというのが大きかったです。
あと新しく触れるようになった技術についてまだ習熟が浅かったので、AIに聞いて理解しながら進めたかったというのもあります。

次になぜ楽天の商品価格ナビ製品検索APIを使ったのかというと、無料かつ有名どころのショッピングサイトのAPIであればとりあえずOKかなという感じで選びました。本当は普段Amazonで買い物することが多いのでAmazonのAPIの使いたかったのですが、料金はかからないが利用のためには一定のサイト基準を満たしていなければならなかったり、その審査を突破できる自身がなかったことから断念しました。
AmazonのAPIが使えたらKeepaAPIと連携して過去の価格情報から買い時を見極められるサイトにしようかとも考えましたが、KeepaAPIは有料かつ円安の影響で相当コストが嵩みそうだったのでこれも断念する理由になりました。

使用技術について

Ruby v3.3.1
Ruby on Rails v7.1.3.4
React v18.2.0
Next.js v14.2.3
TypeScript v5.4.5
heroku
Vercel
ChatGPT GPT-4o

ChatGPTをどう使ったか

ドメインをとってサイトを公開するということが初めてだったので、ChatGPTには作ろうと思っているサイトのコンセプトと使用技術、サイトを構築するうえで必要な事項をまとめてもらうよう指示しました。
すると、楽天のAPIの使用方法、バックエンド、フロントエンドの具体的な実装、ドメインの取得方法、ホスティングサービスへのデプロイの仕方などすべてまとめてくれたのであとは実装部分以外ほとんどChatGPTが指定してくれたことをそのまま行動に移しました。
実装もサーバーサイド側に関してはほぼChatGPTの指定のまま実装に組み込みましたが、フロントエンドに関してはUIや細かい動きの部分はChatGPTだとうまく調整できなかったので自前でやりました。
他、実装で困ったことがあったり、これできるかなと思ったことはとりあえずプロンプトを投げると解決してくれるので、ChatGPTが返してくれた結果を調整して組み込むみたいな流れでだいたいいけました。

楽天APIの利用方法

Rakuten DevelopersでアプリIDを新規発行するとアプリID、application_secret、アフィリエイトIDが払い出されます

あとはこの情報をバックエンド側に持たせてAPIリクエスト時に渡します。
APIのリクエストの仕方や取得できるデータなどは楽天のドキュメントに詳しくまとまっているのでそこを参照しました。
今回は商品価格ナビ以外にジャンル絞り込み機能の部分で楽天市場ジャンル検索APIを使ってます。他にもいろいろあるので機会があれば使ってみたいですね。

こだわった点

サイトを作成するうえでこだわったこととしては、ユーザー情報を極力保持しないということとコストをかけずにサイトを公開し続けるため無料枠内でサーバーの運用が抑えられるようにすることでした。
ユーザー情報を保持しないのは個人情報などの情報を取り扱うようになると何かあったときの責任を取り切れないというのと、サイトの商品情報はAPIを介して取得しているため、個人情報を保持しないことでDBも構築しなくてよくなるのでコストがかかる因子を減らせるためです。もちろんDBも無料枠で運用することはできると思いますが、念のため。

ユーザー情報は保持しない方針にしましたが、ローカルストレージ上に閲覧履歴やお気に入り情報を保持するようにしているので、同じ端末であればそういった機能を享受することができるようになっています。

ChatGPTをサイト制作に使う上で課題と感じたところ

自分の指示が悪かったと思いますが、UI・UX方面に関してはあまり期待できない返答が返ってくることが多かったです。が、アニメーションやUIライブラリについては期待通りの答えを得ることができました。
また、楽天はジャンルの階層がかなり深くジャンル関連の処理に関しては複雑になりがちだったのですが、そこをChatGPTを使って期待通りの処理までもっていくのが難しいと感じました。
あるところまで行くと書き方は違うけど挙動としては全く変わらないようなコードをずっと吐き出すようになってしまい、結局そういった部分の実装は自前で行いました。

まとめ

ChatGPTを使ったサイト制作はうまいプロンプトを作ることができれば、ほぼ自分でコードを書かずに公開まで行けるのではないかなと思いました。
そこまでいかなくとも実装時のアドバイザーとしてついてくれるだけで相当効率が上がるのではないかなと思いました。
今後はAIを絡めたサービスも何か作ってみたいと思います。

些末な記事になりましたが、ここまで読んでくれた方ありがとうございました。

参考リンク