Nuxt.js と vee-validate でエラーメッセージは日本語でバリデーションするメモ

前提

nuxt.js でプロジェクト作成済み前提 (nuxt2.0.0)

インストール

$ npm install vee-validate -S

plugins/vee-validate.js

新規作成

import Vue from 'vue';
import VeeValidate, { Validator } from'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate);
Validator.localize('ja', ja);

nuxt.config.js

追記

  plugins: [
    { src: '@/plugins/vee-validate', ssr: false },
  ],

pages/hoge.vue

一部抜粋

<template>

          <input
            v-validate="'required|alpha_dash'"
            v-model="user.name"
            name="name"
            type="text"
          >

        <button
          @click="saveData"
        >Save
        </button>

</template>

<script>
export default {

  methods: {
    updateUserData() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          alert('Saved.');
          return
        }

        alert('Error!!!');
      });
    },

}
</script>

参考リンク

• https://baianat.github.io/vee-validate/

Bluetoothヘッドフォン購入検討試聴メモ 2018.10

前置き

気になる機種を試聴してきた。チョイス偏り気味。
星３段階評価。良し悪しはなんとなくの主観。携帯性は考慮しない（考慮するの忘れた...）
順序は上から高い->安い。
ちなみに比較基準が有線の AKG K702 なのでちょっと辛口気味（本来は無線と有線を比較しちゃダメだよね...）

• 試聴は iPhone Xで下記3曲
  • Feels Just Like it Should/Jamiroquai
  • Don't' Know Why/ Norah Jones
  • It's Who We Are/Nulbarich

Bose QuietComfort 35 wireless headphones II

Bose QuietComfort 35 wireless headphones II

• 音質: ★★
• 付け心地: ★★★
• 見た目: ★
• コスパ：★
• 好き嫌い：★

値段お高い割には音質そこまよくないかもって感じ。好みではないだけかも。

SONY WH-1000XM2

• 音質: ★★★
• 付け心地: ★★★
• 見た目: ★★
• コスパ：★
• 好き嫌い：★★

3~4万円以下のbluetoothヘッドホンの中では音質良いと思う。比べちゃダメだけど有線の1~2万円のほうが音質よさそうな気がするレベル。あと個人的にノイズキャンセリング必要としてないから印象そんなによくないのかも。ちなみに最近3が出た。

Skullcandy Crusher Wireless

• 音質: ★★
• 付け心地: ★★★
• 見た目: ★★
• コスパ：★
• 好き嫌い：★★

Skullcandyってメーカー知らなかったけど比較的お安いかも。

JBL E55BT

• 音質: ★★
• 付け心地: ★★★
• 見た目: ★★
• コスパ：★★★
• 好き嫌い：★★

JBLのお高いやつは試聴できなかったけどこれとか音質とかコスパいい感じ。オーバーイヤーの付け心地も悪くない。

Skullcandy Hesh 3 Wireless

• 音質: ★★
• 付け心地: ★★★
• 見た目: ★★
• コスパ：★★★
• 好き嫌い：★★

値段・音質的にコスパ良い感じ。

Sennheiser HD 4.40

• 音質: ★★
• 付け心地: ★★★
• 見た目: ★★
• コスパ：★★★
• 好き嫌い：★★

ゼンハイザーの音もよいなぁ。これはお安くてコスパいいし。

JBL E45BT

• 音質: ★★
• 付け心地: ★★★
• 見た目: ★★
• コスパ：★★★
• 好き嫌い：★★

コンパクトで携帯性よさそう。音質的にもコスパ良さそう。

AKG Y50BT

• 音質: ★
• 付け心地: ★★
• 見た目: ★★
• コスパ：★★
• 好き嫌い：★

ちょっと期待しすぎてイマイチだった。AACだからって必ずしも音質いいわけじゃないみたい。

Skullcandy Grind Wireless

• 音質: ★★
• 付け心地: ★★
• 見た目: ★★★
• コスパ：★★★
• 好き嫌い：★★

見た目が好き。音質もまあまあ。コスパ良い。小さいのに折り畳めないのが難点。

AKG Y45BT

• 音質: ★
• 付け心地: ★
• 見た目: ★★★
• コスパ：★★
• 好き嫌い：★

期待しすぎてイマイチだった。ボーカルの声がなんかイマイチに聴こえる。見た目は好きなんだけど。

JBL T450BT

• 音質: ★★
• 付け心地: ★
• 見た目: ★★
• コスパ：★★★
• 好き嫌い：★★

この音質で5000円前後。コスパいいと思う。ただ付け心地が圧迫感が強すぎる感じ。

Pioneer SE-MJ561BT

• 音質: ★
• 付け心地: ★
• 見た目: ★
• コスパ：★★
• 好き嫌い：★

ネットで低価格帯では評判良さげだったけど音はコモッているし締め付け強すぎだしでイマイチ。

感想

好き嫌いあるけど無線の音質はまだそこそこと思ったほうがいいかもかなぁ。
コスパ考えると自分的には1万円前半くらいのやつでよさそう。
結論としてはしばらく手持ちのbluetoothイヤホンでいいかな...。 （TaoTronics Bluetooth TT-BH07 オススメ。2000~3000円くらいと激安で音質そこそこよいし。）

css helper 的なやつを Javascript で簡単に生成してみるメモ

Javascript

const lineList = [
  '.w100 {width: 100%;}',
  '.text-left {text-align: left;}',
  '.text-center {text-align: center;}',
  '.text-right {text-align: right;}',
  '.text-justify {text-align: justify;}',
];
lineList.forEach(line => {
  console.info(line);
});

const numList = [0, 10, 20, 30 , 40, 50, 60, 70, 80, 100];
const mplineList = [
  '.m${num} {margin:${num}px;}',
  '.mt${num} {margin-top:${num}px;}',
  '.mr${num} {margin-right:${num}px;}',
  '.mb${num} {margin-bottom:${num}px;}',
  '.ml${num} {margin-left:${num}px;}',
  '.p${num} {padding:${num}px;}',
  '.pt${num} {padding-top:${num}px;}',
  '.pr${num} {padding-right:${num}px;}',
  '.pb${num} {padding-bottom:${num}px;}',
  '.pl${num} {padding-left:${num}px;}',
];
mplineList.forEach(line => {
  numList.forEach(num => { // eslint-disable-line no-unused-vars
    console.info(eval(`\`${line}\``));
  });
});


const fontSizeList = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
fontSizeList.forEach(num => {
  console.info(`.font-size${num} {font-size:${num}px}`);
});

CSS

.w100 {width: 100%;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}
.m0 {margin:0px;}
.m10 {margin:10px;}
.m20 {margin:20px;}
.m30 {margin:30px;}
.m40 {margin:40px;}
.m50 {margin:50px;}
.m60 {margin:60px;}
.m70 {margin:70px;}
.m80 {margin:80px;}
.m100 {margin:100px;}
.mt0 {margin-top:0px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt100 {margin-top:100px;}
.mr0 {margin-right:0px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}
.mr60 {margin-right:60px;}
.mr70 {margin-right:70px;}
.mr80 {margin-right:80px;}
.mr100 {margin-right:100px;}
.mb0 {margin-bottom:0px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb100 {margin-bottom:100px;}
.ml0 {margin-left:0px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}
.ml60 {margin-left:60px;}
.ml70 {margin-left:70px;}
.ml80 {margin-left:80px;}
.ml100 {margin-left:100px;}
.p0 {padding:0px;}
.p10 {padding:10px;}
.p20 {padding:20px;}
.p30 {padding:30px;}
.p40 {padding:40px;}
.p50 {padding:50px;}
.p60 {padding:60px;}
.p70 {padding:70px;}
.p80 {padding:80px;}
.p100 {padding:100px;}
.pt0 {padding-top:0px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}
.pt50 {padding-top:50px;}
.pt60 {padding-top:60px;}
.pt70 {padding-top:70px;}
.pt80 {padding-top:80px;}
.pt100 {padding-top:100px;}
.pr0 {padding-right:0px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr30 {padding-right:30px;}
.pr40 {padding-right:40px;}
.pr50 {padding-right:50px;}
.pr60 {padding-right:60px;}
.pr70 {padding-right:70px;}
.pr80 {padding-right:80px;}
.pr100 {padding-right:100px;}
.pb0 {padding-bottom:0px;}
.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}
.pb50 {padding-bottom:50px;}
.pb60 {padding-bottom:60px;}
.pb70 {padding-bottom:70px;}
.pb80 {padding-bottom:80px;}
.pb100 {padding-bottom:100px;}
.pl0 {padding-left:0px;}
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.pl50 {padding-left:50px;}
.pl60 {padding-left:60px;}
.pl70 {padding-left:70px;}
.pl80 {padding-left:80px;}
.pl100 {padding-left:100px;}
.font-size7 {font-size:7px}
.font-size8 {font-size:8px}
.font-size9 {font-size:9px}
.font-size10 {font-size:10px}
.font-size11 {font-size:11px}
.font-size12 {font-size:12px}
.font-size13 {font-size:13px}
.font-size14 {font-size:14px}
.font-size15 {font-size:15px}
.font-size16 {font-size:16px}
.font-size17 {font-size:17px}
.font-size18 {font-size:18px}
.font-size19 {font-size:19px}
.font-size20 {font-size:20px}

Javascript で非同期処理を async/await を使わない場合・使った場合のメモ

（あくまでもこんな感じという擬似コードなので動かないです）

async/await を使わない場合

promise.then(() => {
  console.info('ペ');
  asyncFunc1.then(() => {
    console.info('ン');
  }).then(() => {
    console.info('ギ');
    asyncFunc2.then(() => {
    }).then(() => {
      console.info('ン');
      asyncFunc3.then(() => {
      }).then(() => {
        console.info('・');
        asyncFunc4.then(() => {
        });
      });
    });
  });
});

// ペ
// ン
// ギ
// ン
// ・

async/await を使った場合

promise.then(async () => {
  console.info('ハ');
  await asyncFunc1();
  console.info('イ');
  await asyncFunc2();
  console.info('ウ');
  await asyncFunc3();
  console.info('ェ');
  await asyncFunc4();
  console.info('イ');
});

// ハ
// イ
// ウ
// ェ
// イ