不具合の概要

LGTMoonで「最近の画像」が更新されない部具合が発生していました。

LGTMoon - 最も簡単なLGTM画像ジェネレーター

LGTMoonはの「最近の画像」ページでは、最新の画像が存在しているかどうかを常にポーリングしており、画像の生成が完了したら自動的に「最新の画像」ページに出てくるようになっておりました。

f:id:yoshiki_utakata:20190408093347p:plain

またその影響で「画像がうまく生成されない」と勘違いされたのか、同じ画像が連続で生成されるケースも増えました。

不具合発生期間

2019年2月21日〜 2019年4月6日

不具合の原因

2019年2月に、Vue.js のバージョンを1から2に上げるために大規模な修正を入れたのですが、その際にこの不具合が発生しておりました。

4月5日に修正を入れたのですが、それでもまだ治っておらず、4月6日で修正されました。修正箇所は以下の通りです。

バグ修正 · yoshikyoto/lgtmoon@4cdde95 · GitHub

もともとコードはこのようになっておりました。

      // 最新の画像を読み込む
      axios.get('/api/v1/images/recent.json').then((response) => {
        this.recentItems = response.data.images
      });
      // 10秒ごとに画像一覧を更新
      setInterval(function () {
        axios.get('/api/v1/images/recent.json').then((response) => {
          this.recentItems = response.data.images
        });
      }, 10000);

ここで注意しなければならないのが、 this の扱いです。

// 最新の画像を読む込む の this.recentItems の部分は、vue.recentItems になりますが、 setInterval の中での this は vue にはならないのです。ここで、こうする必要がありました。

      // 最新の画像を読み込む
      const thisVue = this
      axios.get('/api/v1/images/recent.json').then((response) => {
        thisVue.recentItems = response.data.images
      });
      // 10秒ごとに画像一覧を更新
      setInterval(function () {
        axios.get('/api/v1/images/recent.json').then((response) => {
          thisVue.recentItems = response.data.images
        });
      }, 10000);

最初に const thisVue = this とし、この thisVue の方を使うようにするのです。このテクニックは JavaSctipt では頻出なので覚えておいたほうが良いです。この修正により、LGTMoonの不具合はなおりました。

その他

同じ画像を連打されるケースに関しましては対応を入れたいところなのですが、コストが避けずにまだ入れられてないです。連打されなくても、同じ画像から過去に生成されていた場合は、基本的には過去のものを引っ張ってきたほうがストレージには優しいので、検討したいです。

まとめ

JavaScriptのthisには注意しましょう