次のイベントループで関数を実行するいくつかの方法

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


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

Javascriptでよく使われるのはsetTimeout


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

Promiseでもできる


Promise.resolve().then(() => {
  ...
});

ちょっと違うけど、ReactだとsetStateで関数を実行することで、上記の代替になるかも


setState(()=>{
 ...
})

Node.js jsonファイルの読み込み方

node.jsでjsonファイルの読み込む方法を2つメモ

1.直接requireで読み込み


const json = require('../hoge.json');

この方法だと初回に1度読み込むだけなので、頻繁にjsonを書き換える場合は更新が反映されない。定数や設定ファイルに向いてる。

2.fsで読み込む


let json = JSON.parse(
fs.readFileSync(`${full_path}/hoge.json`, 'utf8')
);

この方法で関数の中で都度読み込んであげると、頻繁に書き込むするjsonも反映される

3.requestモジュールを使う

外部のサーバからGETでjsonを取ってくるときとかに使います。
yarn add request でモジュールを追加

const request = require("request");
request.get(
{
url:'https://xxx.com/api',
qs: {
key:'12345'
}
},
(error, response, body) => {
console.log(body);
}
);

アナリティクスに正しいページタイトルが送信されているかチェックする方法

こんにちは、フロントエンドのフレームワークを使っていたりすると設定したページタイトルがきちんとアナリティクスに送られているのか気になりますよね?

クローム拡張を使って簡単にチェックしましょう。

Tag assistant (by google)
https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk

追加したツールバーにスマイル君が横になった荷札みたいなアイコンが出てきます。
← これ

chromeに追加したら目的のサイトに移動

緑色か青色になっていることを確認(なっていなければそもそもの計測タグまたはタグマネージャタグになにか不具合が発生している可能性大)

Enable をクリックして有効にする

以下gif参照(ポインタでURLバーを指してるところが始まりです)

google tag assistantの詳細はこちら↓
Tag Assistant Recordings を使用する

vueでモバイル判定をする

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

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

ライブラリを追加

yarn add vue-mq

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


  <template>
    <div v-if="$mq==='sp'">
      <div>モバイルで表示</div>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import VueMq from "vue-mq";

  const breakpoints = {
    sp: 400,
    pc: 1024
  };
  Vue.use(VueMq, { breakpoints });
  </script>

Vue.jsでWebサイトを作るときに使ったライブラリ

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

vue-backtotop

名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。

vue-scrollto

ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
  offset: -80 //headerの高さの分
})
 offset以外にもスクロールの速度なども設定できます。

他画面からの移動

idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
  mounted () {
    const hash = this.$route.hash
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash)
    }
  }
 しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。

setTimeout()してみたら動きました。

 mounted() {
    setTimeout(this.scroll, 300);
  },
 methods: {
    scroll() {
      const hash = this.$route.hash;
      if (hash && hash.match(/^#.+$/)) {
        this.$scrollTo(hash);
      }
   }
  }

vue-carousel

カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。

vue-material-design-icons

マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。

vue-meta

title、descriptionやogなど、headに記述するメタ情報の設定に使いました。

vue-social-sharing

FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。

google-maps-api-loader

GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。

date-fns

日付の書式を整えるときに使いました。