Vue

こんにちは！今回はLINE Bot（Webhook）をCloudflare PagesなどのEdge環境で動かそうとしたときに、**「何もしていないのに500エラーが返ってくる…！」**という恐ろしい罠にハマったお話を共有します。

はじめに

こんにちは！最近、Nuxt.js（v3）とSupabaseでGoogle OAuthログインを実装していたのですが、めちゃくちゃハマったので知見を共有します。

created() {
  this.$watch(
    () => [this.data1, this.data2],
    (newValue, oldValue) => {
      if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
        //何かしら変更があった場合
      }
    }
  );
}

Webhooksを設定

Bitbucketリポジトリの

Settings > Webhooks

に遷移

Add webook をクリック

titleとリクエスト先URLを入力

Triggers  > Repository push にチェックが入っているのを確認。リポジトリプッシュがトリガーになって入力したURLにリクエストを送られる。

vue.jsだと、vue.nextTickでできる

this.$nextTick(()=>{
  ...
});

Javascriptでよく使われるのはsetTimeout

setTimeout(()=>{
  ...
},0)

Promiseでもできる

ユーザーエージェントで判定

isMobile.js

ライブラリを追加

yarn add ismobilejs

テンプレートで出し分けしたい場合

  <template>
    <div v-if="isMobile.phone">
      <div>モバイルで表示</div>
    </div>
  </template>
  import isMobile from "ismobilejs";
  export default {
    data:()=>{
      isMobile
    }
  }

レスポンシブで判定

vue-mq

Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。

vue-backtotop

名前の通り、トップに戻るボタンです。

ボタンに表示する文字やアイコンの変更も簡単。