NOBODY:PLACE

【Vue.js】同時にリクエストを送る罠にはまる（厳しいAPI制限回避策）

あるサービスとの連携部分を実装していてどうしても上手く動かないのでなんでかなと思ったらVue.jsの実装に問題があったっていう話

毎回 yarn dev したあと待ってました。何やってたんだ

いまだ専任のエンジニアを置いていない前職から「クレジットカードが追加できなくなったんだけど」という問い合わせが来て調べてみたら、クレジットカード追加フォームに設置していたreCaptchaが動かなくなってました。文字通り「何にもしてないけど壊れた」状態。あれ？

簡単に実装するためにVue.jsをCDNで読み込んでいるような環境で、パーツをコンポーネントに分け、かつ、コンポーネントを別ファイルにするようなとき、どうしたら良いかについてのメモ書きです。

需要がないのか検索しても見つからなかったのでメモ程度に。

ストアオブジェクトを複数のモジュールに分けていた場合に、1つのモジュールから他のモジュールのアクションを呼び出した方が効率的ということがあります。それぞれ名前空間が決まってるわけだし、呼び出すことは出来ないんじゃないか……と思ってたんですけど、普通に出来るみたいですね。

このブログではこれまでFlashを使ったグラフを採用してきたのですが、ブラウザ側のFlashへの対応が厳しくなっている今、Flashじゃないよなあということでリニューアル後はJavaScriptによるグラフを採用することにしました。

Vue.js と Chart.js を連携させてグラフを描画する場合、ラッパーとして「vue-chartjs」を使うと面倒なことがかなり省略できて楽です。ファイルさえ準備しておけばデータを入れて簡単にグラフが描画できるというイメージでしょうか。導入に関しては公式サイトなどを参照してください。

Laravel + BootstrapVueの習作として、RSSを読み込んで何らかの形で表示するだけのツールを作成してみました。例によって僕個人が個人サイトで使用する目的のためだけに制作しているので、汎用性は保証していません。（トラフィック次第では制限が掛かる可能性もあります）

ブログなどで使っているAmazonの商品表示は自作のものを使っていたんですが、それをテストがてら新サーバに移行してみました。こんな感じ。