nodebrewでバージョンをインストールする

• インストール可能なバージョンの確認

nodebrew ls-remote

• バージョンを指定してインストール

nodebrew install-binary v8.14.0

• バージョンを切り替える

nodebrew use v8.14.0

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_13___default.a.storage is not a function

事象

storageから画像を参照すると以下のエラーが発生

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_13___default.a.storage is not a function

原因/対応

firebaseの設定ファイルでimport 'firebase/storage'のimport文が必要のため追加した

参考記事

qiita.com

Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind.の警告を消したい。

やりたいこと

以下の警告を消したい。

Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind.

optionsを渡すのは非推奨

以下のように、propsでoptionsをしているのは非推奨のようで、そのままv-bindしてあげればよかった。

    <draggable
      v-model="filterList"
      v-bind:options="{
        animation: 200,
        delay: 100
      }"
    >

対応

以下のように:optionsを消したら警告も消えた。

    <draggable
      v-model="filterList"
      v-bind="{
        animation: 200,
        delay: 100
      }"
    >

Firestoreに一括で更新を行う

やりたいこと

Firestoreにて、複数のドキュメントに対して一括で更新を行いたい。

バッチ書き込みを利用

.batch()で生成したオブジェクトにupdateしたいパスとオブジェクトをガンガン足していく。batch.commit()したタイミングで一括実行される。

import firebase from 'firebase/app'
import firestore from '@/firebase/firebase'
...

const batch = firestore.batch()

cardList.forEach(card => {
  const cardRef = firestore.collection('card').doc(card.id)
  batch.update(cardRef, { index: card.newIndex })
})

batch.commit()

参考

cloud.google.com

Vue.Draggableのメモ

Vue.Draggableパッケージをinstall

$ npm install --save vuedraggable

使用したいコンポーネントで呼び出す

<template>
  <div class="board-task-contents" >
    <draggable>
      <div v-for="i in 20" :key = "`${i}`" class="task-card">
        <h3>番号： {{ i }}</h3>
        <p>タスク詳細内容</p>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'TaskList',

  components: {
    draggable
  },
...

で囲まれたdiv要素がドラッグできるようになったしかも並び替えもできる。

PWA化したvueアプリでスマホのドラッグにも対応している◎

(補足)

• アニメーションつけたい v-bindオプションでanimationを指定
• スクロールができなくなる時の対処 v-bindオプションでdelayを指定

<draggable
  v-bind:options="{
    animation: 200,  //アニメーション
    delay: 50        //スクロール防止（長押しでソート）
  }"
>...

参考記事

www.kabanoki.net

sagatto.com

Vueプロジェクトにeslintを導入

[:contens]

eslint関連のパッケージをインポート

package.jsonに以下を追加

{
...
    "husky": "^4.2.5",
    "lint-staged": "^10.2.2",
...
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "vue-eslint-parser": "^6.0.4"
...
}

.eslintrc.jsの作成

$ touch .eslintrc.js

module.exports = {
    root: true,
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 2018,
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    extends: ['standard'],
    plugins: [
        'vue'
    ],
    rules: {
        'vue/html-indent': ['error', 2] // 2 spaces for html indent
    }
}

eslintの実行

nodeのバージョンを10.移行にしないと動かないのであげた

$ nodebrew use v12.10.0

$ npm run lint

色いろエラーを吐いてくれた

///
   1:22  error  Extra semicolon                                semi
   2:35  error  Extra semicolon                                semi
   3:47  error  Extra semicolon                                semi
   5:19  error  Extra semicolon                                semi
   8:1   error  Expected indentation of 2 spaces but found 4   indent
   8:40  error  Unexpected trailing comma                      comma-dangle
   9:2   error  Extra semicolon                                semi
  12:1   error  Expected indentation of 2 spaces but found 4   indent
  13:1   error  Expected indentation of 2 spaces but found 4   indent
  14:3   error  Extra semicolon                                semi
  16:22  error  Extra semicolon                                semi
  16:23  error  Newline required at end of file but not found  eol-last

✖ 17 problems (17 errors, 0 warnings)
  17 errors and 0 warnings potentially fixable with the `--fix` option.

コミット時にルール通りに修正するようにする

package.jsonを修正

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint --ext .js,.vue src --config .eslintrc.js --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

コミット時に自動で修正してくれた。

参考記事

qiita.com kic-yuuki.hatenablog.com

vue-routerの追加実装

vue-routerの追加

$ npm install --save-dev vue-router

rouoter用のindex.jsを作成

src/router配下にindex.jsを作成

import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from '../components/HelloWorld';

Vue.use(VueRouter);

const routes = [
    { path: '/', component: HelloWorld },
];

const router = new VueRouter({
    routes,
    mode: 'history'
});

export default router;

main.jsにrouterを追記

import Vue from 'vue'
import App from './App.vue'
+ import router from './router'
import vuetify from './plugins/vuetify';
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  vuetify,
+  router,
  render: h => h(App)
}).$mount('#app')

App.vueで<router-view>に書き換え

    <v-content>
+      <router-view/>
    </v-content>

直接、のコンポーネントを参照している箇所を<router-view>に書き換え。

変わらず、画面が表示されたのでおk。

参考記事

qiita.com