今回体験して知ったのですが、Netlifyでリポジトリを使ってウェブサイトを公開すると、リポジトリを更新したときに、自動でウェブサイトのビルドができて更新できることを知りました。リポジトリに閉じ括弧忘れやvite.config.tsが認識されないことで、ビルドが失敗する経験もしました。Netlifyでリポジトリを使ったビルドが失敗するときは、画像のように失敗した理由を確認できる赤いボタンがありました。これを使って表示された英語のメッセージを、機械翻訳して理解しました。生成AIを使っているのに、APIのJSONからのデータの取り出しに時間がかかることは、不思議に思われる人も多いと思います。今回、楽天APIから商品情報を取り出すために、苦労しました。Felo.AIを使って、楽天商品検索APIの使い方を調べました。https://felo.ai/search/Q9ZWp5hdqVLuuW4D5bJYQpAPIの部分は、このようなコードになりました。Plusやリートン、Claud3など活用しました。その中で楽天商品検索APIなど楽天のAPIの利用制限の一秒に一回以内の制限を守るために、debouncedFetchItems「デバウンス関数」というものを知り、キーワード検索のときに「デバウンス関数」を使っています。すべての動作にデバウンス関数を適用すると、操作に時差が生まれるのです。私も、ワンテンポ遅れてボタンが動作したので戸惑いました。それで検索のときのみデバウンス関数を使うように、コードを制作しました。最終的に、その工夫は、残っていると思います。Perplexityは、一度に複数のファイルをアップロードして質問できることや、ネット検索して調べてくれるので、役立ちました。Engineerからcursorを使い、Netlifyでデブロイして、ウェブサイトを公開しました。コーディングの際に英語で表示されるエラーメッセー、ターミナルに表示される英語のメッセージを理解するときに、cursorは、とても役立ちました。私は、cursorがプロジェクト全体を見て複数のファイルを見てコーディング支援してくれるので、活用しています。今回は、楽天商品検索APIを使い、基本的な表示ができるように取り組みました。ウェブサイトのデザインも基本的なものなので、これから工夫していきたいと思っています。lonely_creator_mバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。