Nuxt.js・楽天市場APIでWebアプリをつくる
Nuxt.jsと楽天市場APIでWebアプリを作成しました。
構成
API
今回は特にAPIにこだわりなかったので使いやすそうな 楽天市場API を使いました。
Amazonの商品APIは登録や制限の縛りがきつそうで、e-Stat API は種類が多すぎるのと、統計をグラフ等で可視化するために時間かかりそうで手軽に使えるAPIにしました。
フロント開発
Nuxt.js の SPA で開発。
Vuexをはじめて使ったのですが、今までバケツリレー的なことをしていたのでこれ使いこなせるとかなり便利ですね。
ただgetter/setterの概念などまだまだ理解できていないところもあるのでもっと使いこなせるようにしたいです。
CI/CD
どこまでがCI/CDの範囲かは微妙ですが、GitHub Actions を使ってGitHubリポジトリのマスターブランチにプッシュしたら自動でビルドしてGitHub Pagesへデプロイするようにしました。
GitHub Actionsいまいち分かっていなかったのですが、色々モジュールが用意されていてどれを使うか選択して、オプションやパラメータをyamlで設定するような流れなのですね。
モジュールは公式のものもMarket Place的にサードパーティや個人製のものもあるって感じで、確かにGitHubをリポジトリとするプロジェクトの場合は広がりがあるなあという印象でした。
ただホスティングする場所にこだわりなければ、ちょっと複雑すぎる印象もあるのでNetlifyなどの方が手軽にはできるかなと思います。
感想
久しぶりにNuxt.jsを触ることになってしまったのですが、今回Nuxtで詰まったというよりGitHub Actionsの設定周りで時間を費やしてしまったのでごりごり開発できた感はありませんでした。
例えば、リロード時に検索条件をlocalStorageに保存する、詳細ページからも検索できるようにするなどのもう少し細かいところを詰めたかったですが、次回以降も勉強でNuxt触ると思うのでだんだんできるようになっていければと思います。