the industrial

ブログと言うより自分のためのメモ以外の何モノでもないです。でも読んでくださってありがとうございます。

Nuxt.js に VueSliderComponent を導入し検索条件を範囲指定可能に

VueSliderComponent Nuxt.js PROGRAMMING WORK

デモ

f:id:omiend:20190726171248g:plain

へいしゃの フリエン にてお試しいただけます。

f:id:omiend:20190726171449g:plain

導入手順

nightcatsama.github.io

基本的にオフィシャルサイトを見ればかんたんに導入できます。

install

$ yarn add vue-slider-component

nuxt.config.js

  plugins: [
    { src: '@/plugins/vue-slider-component', ssr: false }
  ]

index.vue

> template

        <vue-slider ref="earningSlider"
          :min="20"
          :max="155"
          :interval="5"
          :tooltip="'none'"
          :marks="marks"
          v-model="values"
          @change="change()"
        >
          <template v-slot:process="{ start, end, style }">
            <div :style="style" class="vue-slider-process">
              <div :class="[
                  'merge-tooltip',
                  'vue-slider-dot-tooltip-inner',
                  'vue-slider-dot-tooltip-inner-top',
              ]">
                {{ values[0] }}万 〜 {{ values[1] }}万
              </div>
            </div>
          </template>
        </vue-slider>
      </div>

<template v-slot:process="{ start, end, style }"> 〜 </template> は

f:id:omiend:20190726171248g:plain

の tooltip にしたかったための対応です。

オフィシャルのコチラを参考にしました。

> script

・・・
  data() {
    return {
      intervalId: '',
      // v-model には Array を指定する
      values: [20, 155],
      // スライダー上のマーカーを指定する
      marks: {
        20: '20万',
        50: '50万',
        75: '75万',
        100: '100万',
        125: '125万',
        155: '155万'
      }
    }
  },
・・・
  methods: {
    change() {
      // setIntervalのIDが存在する場合は処理を終了する
      clearInterval(this.intervalId)
      // setInterval を利用し、処理を遅延させる
      this.intervalId = setInterval(() => {
        // 選択された値を取得
        const _selected = this.$refs.earningSlider.getValue()
        // 最小値
        _selected[0]
        // 最大値
        _selected[1]

        // do something...

        // 現在の処理を終了する
        clearInterval(this.intervalId)
      // 0.5秒遅延させる
      }, 500)
    }
  }
・・・

setInterval を指定している理由

上記で setInterval を指定しているのは、

  • 金額指定を変更したタイミングで検索処理を行いたい
  • change はドラッグする分だけイベントが発火されてしまう（ドラッグするたびに検索処理が走ってしまう）
  • drag-end Event だと、クリックした場合イベントが発火されない

という３つの理由からとなります。

とりあえずコレでいい感じになりました。

嫌われる勇気メモ

BOOK

1. 承認欲求を捨てる

  • 「課題の分離」が必要
  • 自分と他者の課題を分離し、他社の課題には検知しない
  • 人の評価ではなく、自分が信じる道を行く

2. 人生は競争ではない

  • 他者に対して劣等感（もしくは優越感）を持つようになるのはダメ
  • 勝ち負けではない
  • 気にすると周りが敵だらけになる
  • 目指すべきは他者ではなく理想の自分

3. 仲間に貢献する

  • コミュニティーの中に居場所があること＝人が幸福を感じる瞬間
  • 他者貢献と真反対にあるのが承認欲求
  • 周りを敵だと思い見返りを求めて行う貢献は偽善、周りが仲間でその人に何かできないだろうかという行動は貢献
  • 人に貢献できていると感じる＝自分の価値の実感＝心からありがとう

Nuxt & Jest にて ReferenceError: regeneratorRuntime is not defined が出るケースに対処

Nuxt.js bable webpack jest PROGRAMMING

omiend.hatenablog.jp

↑の続き。

タイトルの通り、

  ● Test suite failed to run

    ReferenceError: regeneratorRuntime is not defined

というエラーでテスト自体が正常に処理されないケースがある。

どうやら babel 周りの設定が原因らしいのだけど、いまいちわからない。

いろいろ調べた結果をメモしておこうと思う。

Store の actions のところで「ReferenceError: regeneratorRuntime is not defined」

$ yarn test HogeComponent
yarn run v1.16.0
$ jest HogeComponent
 FAIL  spec/components/parts/HogeComponent.spec.js
  ● Test suite failed to run

    ReferenceError: regeneratorRuntime is not defined

    > 139 | const actions = {
          |                 ^
      140 | 

      at src/store/index.js:139:17
      at Object.<anonymous> (src/store/index.js:139:17)
      at Object.<anonymous> (spec/components/parts/HogeComponent.spec.js:4:1)

といったように、 Store の actions のところで謎のエラーが発生。

いろいろ調べてみると package.json の babel の定義を

  "babel": {
    "env": {
      "test": {
        "presets": [
          "@babel/preset-env"
        ]
      }
    }
  }

から、

  ・・・
  "babel": {
    "env": {
      "test": {
        "presets": [
          ["@babel/preset-env", {
            "targets": {
              "node": "current"
            }
          }]
        ]
      }
    }
  }
  ・・・

というように直してみたら正常に処理できた。

Component の Script 内部にて「ReferenceError: regeneratorRuntime is not defined」

$ yarn test HogeComponent
yarn run v1.16.0
$ jest HogeComponent
 FAIL  spec/components/parts/HogeComponent.spec.js
  ● Test suite failed to run

    ReferenceError: regeneratorRuntime is not defined

      353 |   },
    > 354 |   methods: {
          | ^

まったく意味不明だったけど、Component の Script 内部の定義にて、

export default {
  data() {
  ・・・割愛・・・
  computed: {
  ・・・割愛・・・
  mounted() {
  ・・・割愛・・・

という順番で定義していたのを、

export default {
  data() {
  ・・・割愛・・・
  mounted() {
  ・・・割愛・・・
  computed: {
  ・・・割愛・・・

の様に順番を入れ替えたら正常にテストが処理されるようになった。

babel 、あるいは webpack 的なサムシングなのだろうけど、あまり明るくないのでツライ。

#Nuxt.js で Jest を利用したテストを実装する際にエンカウントしたワーニングやエラーの対処法メモ

Jest Nuxt.js PROGRAMMING

Nuxt.js で Jest を利用したテストを実装する際にエンカウントしたワーニングやエラーの対処法メモ

なんかタイトル日本語でOK状態だけど、つまりそういうこと。

Jest でテストを書いていたのだけど、いろいろぶち当たったので都度メモしていく。

[Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Nuxt で作られたプロジェクトにおいて Jest を利用してテストをする際、下記の様な [Vue warn] が出てしまう。

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

      found in

      ---> <Anonymous>
             <Root>

原因はいまいちわからないのだけど、 <nuxt-link> を <a> にレンダリングしてくれないから的なサムシング。

そこで、 RouterLinkStub を使えば解決できそうな感じが公式にあった。

vue-test-utils.vuejs.org

つまり、

import { mount } from '@vue/test-utils'
import TheHeader from '@/components/sections/TheHeader.vue'

describe('components/sections/TheHeader.vue', () => {

  describe('template', () => {
    test('template test', () => {
      const wrapper = mount(TheHeader)
      expect(wrapper.contains('header')).toBe(true)
    })
  })
})

といったテストがあったとして、

import { mount, RouterLinkStub } from '@vue/test-utils'
import TheHeader from '@/components/sections/TheHeader.vue'

describe('components/sections/TheHeader.vue', () => {

  describe('template', () => {
    test('template test', () => {
      const wrapper = mount(TheHeader, { stubs: { NuxtLink: RouterLinkStub }})
      expect(wrapper.contains('header')).toBe(true)
    })
  })
})

のように修正すればOK。

<nuxt-link> のスタブを用意して上げる感じか。

こちらが大変参考になった。ありがとうございました。

onigra.github.io

[Vue warn]: Unknown custom element: <no-ssr> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

しかし、今度は <no-ssr> についてもスタブが必要となってくる。

まったくイメージわかないのでいろいろ調べていたら、こちらに行き当たった。

github.com

どうやら jest の setup に下記の様なスクリプトを書いてあげれば良さそう。

spec/util/jest.setup.js

import VueTestUtils from '@vue/test-utils';

Vue.config.silent = true;

// Mock Nuxt components
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>';

package.json には setupFiles を追加

・・・
  "jest": {
    "setupFiles": [
      "<rootDir>/spec/unit/jest.setup.js"
    ],
・・・
  },
・・・

これで <no-ssr> の [Vue warn] も出なくなった。

すべて jest.setup.js にまとめる

RouterLinkStub を使わなくても jest.setup.js に <nuxt-link> のスタブを追加すればよいのではないか？

つまり、

import VueTestUtils from '@vue/test-utils';

// Mock Nuxt components
VueTestUtils.config.stubs['nuxt-link'] = '<a><slot /></a>';
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>';

このように任意のスタブを追加していく。

せっかくなので、 <nuxt-link> は RouterLinkStub を使おう。

一応これでWARNは出なくなったけど、 <nuxt-link> は RouterLinkStub を使いたい。

github.com

なので、最終的に spec/util/jest.setup.js はこのようになった。

import VueTestUtils from '@vue/test-utils';

// Mock Nuxt components
VueTestUtils.config.stubs['nuxt-link'] = VueTestUtils.RouterLinkStub;
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>';

他にも VueTestUtilsでてこないのかな。なんか思いついたらプルリク送りたい気もする。

router を利用する場合？

Page Component ではなく、部品として作成した Component のテストにて、routerが見つけられずこんなエラーが出た場合は、

TypeError: Cannot read property 'fullPath' of undefined

下記の通りに修正すればOK。

vue-test-utils.vuejs.org

props はどうするの？

mount のところに仕込んであげれば良い。

import { mount } from '@vue/test-utils'
import TheHeader from '@/components/sections/TheHeader.vue'

describe('components/sections/TheHeader.vue', () => {

  describe('template', () => {
    test('template test', () => {
      const wrapper = mount(TheHeader, { props: hogehoge: { name: "hogehoge" } })
      expect(wrapper.contains('header')).toBe(true)
    })
  })
})

んー、きりがないので一旦このくらいにしておこうかなｗ

クワイエット・プレイス

MOVIES

クワイエット・プレイス (字幕版)

音に敏感なエイリアンが猛威をふるったあとの世界で、なるべく音を立てずに暮らしている一家が主人公。

まあ設定に無理がありすぎるし、命の危険があるのに安易な行動ばかりだしとストレス満載ｗ

家族なのに個々の葛藤などがあったり、映画の題材の通りドキドキする部分も大きかったりと、まあそれなりに楽しめる。

しかし、正直あまりおもしろくなかったかも。

ネイビーシールズ

MOVIES

ネイビーシールズ　ナチスの金塊を奪還せよ！(字幕版)

アメリカ海軍のチームを主人公にしたルパン三世みたいなストーリーの冒険活劇的な映画。

ナチスが隠した金塊を、敵陣からサルベージしてしまおうという話で、荒くれ者共と厳しいけど部下想いの偉い人、それから美女が手を取り合う感じでとてもおもしろかった。