こんにちは、Yuiです。

今回、Vue.js×firebaseで簡単なアプリを作ろうと思ってfirebaseとつなげた際に下記のエラーが起きたので、その解決策を書きます。

出たエラー

./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/hoge/Desktop/Develop/dame.com/node_modules/vuetify/lib/components/VCalendar'

環境

$ node -v
v12.18.2

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.4.6

エラーになるまでの手順

• Vuetifyを入れて、ある程度のレイアウトを整えてnpm run serve→ここまでは大丈夫だった
• その後、DBとつなげようと思い、firebaseを開く
• npm install firebaseした後、main.jsに以下貼り付け

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "apiKey",
    authDomain: "authDomain.firebaseapp.com",
    databaseURL: "https://databaseURL.firebaseio.com",
    projectId: "projectId",
    storageBucket: "storageBucket.appspot.com",
    messagingSenderId: "messagingSenderId",
    appId: "x:xxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxx",
    measurementId: "measurementId"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

• 再度npm run serve→ここでエラー

画面を見ると、

./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/hoge/Desktop/Develop/dame.com/node_modules/vuetify/lib/components/VCalendar'

コンソールに吐き出されたエラーは下記

 ERROR  Failed to compile with 671 errors                               21:16:38

These dependencies were not found:

* core-js/modules/es.array.concat in ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js, ./node_modules/vuetify/lib/components/VCalendar/VCalendarWeekly.js and 44 others
* core-js/modules/es.array.every in ./node_modules/vuetify/lib/components/VColorPicker/util/index.js, ./node_modules/vuetify/lib/components/VDataIterator/VDataIterator.js and 3 others
* core-js/modules/es.array.fill in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerMonthTable.js, ./node_modules/vuetify/lib/components/VSparkline/VSparkline.js and 1 other
* core-js/modules/es.array.filter in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js, ./node_modules/vuetify/lib/components/VAutocomplete/VAutocomplete.js and 19 others

エラー文が長すぎるので、全部は書かない。

解決法

どうやらcore-jsが原因かということで、

$ npm install --save core-js

これで無事エラー解消！

Vue.jsの公式チュートリアル、ずいぶん充実しているなぁ。
だけど、一通り終わっちゃったし、実務で使うまでにもういくつか練習してみたいな。

ということで、こちらのページで紹介されているチュートリアル「ToDoリストを作りながら学習しよう！」をベースに、ToDoリスト作ってみました。
https://cr-vue.mio3io.com/tutorials/todo.html

変更した点

routerを使った

元サイトではindex.html、main.css、main.jsだけで実装していますが、せっかくの練習なので、vue-routerをつかいコンポーネントを外部から読み込んでくる形にしました（1ページだから意味ないけど）。以下構成です。
- App.vue
- main.js
- router
　└ index.js
- views
　└ Top.vue

ローカルストレージをそのまま使いました

ローカルストレージAPIから抜き出してくるのではなく、こちらに書いてある方法で直接ローカルストレージに読み書きしました。
https://jp.vuejs.org/v2/cookbook/client-side-storage.html

完成図

cssは上記サイトからコピペさせていただきましたm(__)m

コード

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/'

Vue.config.productionTip = false

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

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode : 'history',
  base : process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'top',
      component: () => import('../views/Top.vue')
    }
  ]
})

export default router

Top.vue

<template>
  <div class="top">
    <h2>TODOリスト</h2>

    <label v-for="(option, key, index) in options" :key="index">
      <input type="radio"
        v-model="current"
        v-bind:value="option.value" />{{ option.label }}
    </label>

    <span>{{ computedTodos.length }} 件を表示中</span>
    <table>
      <thead>
        <tr>
          <th class="id">ID</th>
          <th class="comment">コメント</th>
          <th class="state">状態</th>
          <th class="button">-</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in computedTodos" v-bind:key="item.id">
          <th>{{ item.id }}</th>
          <td>{{ item.comment }}</td>
          <td class="state">
            <button @click="doChangeState(item)">{{ labels[item.state] }} </button>
          </td>
          <td class="button">
            <button @click.ctrl="doRemove(item)">削除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p>※削除ボタンはコントロールキーを押しながらクリックしてください</p>

    <h2>新しい作業の追加</h2>
    <form @submit.prevent="doAdd" class="add-form">
      <p>
        <span>コメント</span>
        <input type="text" ref="comment">
        <button type="submit">追加</button>
      </p>
    </form>
  </div>
</template>

<script>
export default{
  name: 'top',
  data(){
    return {
      todos: [],
      options: [
        { value: -1, label: 'すべて' },
        { value:  0, label: '作業中' },
        { value:  1, label: '完了' }
      ],
      current: -1,
      uid: 0
    }
  },
  computed: {
    labels(){
      return this.options.reduce(function(a,b){
        return Object.assign(a, { [b.value]: b.label })
      }, {})
    },
    computedTodos: function(){
      return this.todos.filter(function(el) {
        return this.current < 0 ? true: this.current === el.state
      }, this)
    }
  },
  created(){
    if(localStorage.getItem('todos')){
      try{
        this.todos = JSON.parse(localStorage.getItem('todos'))
      } catch(e){
        localStorage.removeItem('todos')
      }
    }

    if(localStorage.getItem('uid')){
      this.uid = localStorage.getItem('uid')
    }
  },
  methods:{
    doAdd : function(){
      var comment = this.$refs.comment
      if(!comment.value.length){
        return
      }
      this.uid += 1
      this.todos.push({
        id: this.uid,
        comment: comment.value,
        state: 0
      })
      localStorage.setItem('uid',this.uid)
      comment.value = ''
    },
    doChangeState: function(item){
      item.state = item.state ? 0 : 1
    },
    doRemove: function(item){
      var index = this.todos.indexOf(item)
      this.todos.splice(index,1)
    }
  },
  watch: {
    todos: {
      handler: function(todos) {
        localStorage.setItem('todos',JSON.stringify(todos))
      },
      deep: true
    }
  }
}
</script>

<style>
省略 
</style>

v-forでキー指定

Top.vue

    <label v-for="(option, key, index) in options" :key="index">
      <input type="radio"
        v-model="current"
        v-bind:value="option.value" />{{ option.label }}
    </label>

上記みたくキーを指定してあげないと下記みたく怒られたので、キーを指定しました。

5:5  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

✖ 1 problem (1 error, 0 warnings)

clickを省略記法に変えました

Top.vue

          <td class="state">
            <button @click="doChangeState(item)">{{ labels[item.state] }} </button>
          </td>
          <td class="button">
            <button @click.ctrl="doRemove(item)">削除</button>
          </td>

Vue.jsでは"v-on:click"を"＠click"のように省略して書けるので省略しました。

ローカルストレージへの読み書き

Top.vue

  created(){
    if(localStorage.getItem('todos')){
      try{
        this.todos = JSON.parse(localStorage.getItem('todos'))
      } catch(e){
        localStorage.removeItem('todos')
      }
    }
  }

こちらを参考にしてローカルストレージへの読み書きを直接する方法に変えました。
https://jp.vuejs.org/v2/cookbook/client-side-storage.html

Top.vue

    doAdd : function(){
      var comment = this.$refs.comment
      if(!comment.value.length){
        return
      }
      this.uid += 1
      this.todos.push({
        id: this.uid,
        comment: comment.value,
        state: 0
      })
      localStorage.setItem('uid',this.uid)
      comment.value = ''
    }

IDの更新は、uidという変数をローカルストレージとVueとで共有して更新していくやり方にしました。

Top.vue

  watch: {
    todos: {
      handler: function(todos) {
        localStorage.setItem('todos',JSON.stringify(todos))
      },
      deep: true
    }
  }

一瞬詰まったのが、ローカルストレージへのオブジェクトの保存。
ローカルストレージには配列やオブジェクトなど複雑なものは入れられないので、Stringに変換する必要があります。

シンプルで取り組みやすいチュートリアルをありがとうございました！
コンポーネント化とかvue-routerとかもっと触ってみたいので、次は複数ページにわたるアプリを作ってみたいと思います！

次のコードを使ってVue.jsのイベント処理を試します。

<template>
  <ul>
    <li v-for="(item, idx) in items" :key="idx">
      <label>
        <input type="checkbox" v-model="item.checked" @click="clicked(item)">
        {{item.name}}
      </label>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'foo', checked: true  },
        { name: 'bar', checked: false },
        { name: 'baz', checked: false }
      ]
    };
  },
  methods: {
    clicked(item) {
      console.log("clicked");
      console.log(item.checked);
    }
  }
}
</script>

チェックされていないチェックボックスをクリックすると、item.checkedはfalseとなります。あれ？チェックしたんだからtrueになるはずでは。

clicked
false

Eventオブジェクトを使ってHTML要素を見てみます。

<input type="checkbox" v-model="item.checked" @click="clicked($event, item)">

clicked(event, item) {
  console.log("clicked");
  console.log(item.checked);
  console.log(event.target.checked);
}

チェックボックスはチェックされているけど、dataのオブジェクトにはまだ反映されていないようです。

clicked
false
true

ならば、nextTickを使えば反映されるのでは、と思いきやfalseのままです。

clicked(item) {
  console.log("clicked");
  this.$nextTick(() => {
    console.log(item.checked);
  });
}

以上の挙動は、inputイベントを使っても同じです。正解は、clickでもinputでもなくchangeイベントを使うことでした。

<input type="checkbox" v-model="item.checked" @change="changed(item)">

changed(item) {
  console.log("changed");
  console.log(item.checked);
}

参考: vue.js - Vuejs click event from checkbox? - Stack Overflow

? この記事はWP専用です
https://wp.me/pc9NHC-sl

前置き

Sass変数とmixinを使って
レスポンシブ 対応を簡単に管理していきます✨

スタイルを当てるごとに毎回
@media screen and (max-width: 480px)
などと書き足していくのは面倒ですよね？

これが@includeだけ書けばよくなります！
また、pxを変数化して共通化&変更が
とっっっても簡単になります?

mixinについてはこちら
https://wp.me/pc9NHC-s6

Sassの導入方法、変数の使い方はこちら
https://wp.me/pc9NHC-sc

簡単な使い方

メディアクエリ をやる前に！
まずはSassとmixinを使った簡単な例をどうぞ?‍♀️

引数を$変数にする

変数名(変数に設定された値)を
引数で上書きできるやり方。

ただこれならmixin使わずとも
タグ別に普通の共通cssで指定しとけば良いです?‍♀️

今回はSassとmixinを簡単に
理解するためだけのサンプルです?

nuxt.config.js

export default {
 styleResources: {
   scss: [
     '@/assets/scss/_mixin.scss',
   ]
 },
}

mixin.scss

@mixin hoge($color: pink, $fSize: 32px) {
 color: $color;
 font-size: $fSize;
}

【index.vue】

デフォルトをred, 20pxでマージしています。
引数を渡さなければデフォルトが適応されます。

コンフリクトが起きた場合のマージ
https://wp.me/pc9NHC-s6

index.vue

<template>
 <div class="page">
   <p>Hello Nuxt.js!</p>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
 .page {
   padding: 20px;
   @include hoge(red, 20px)
 }
</style>

メディアクエリ

ではメディアクエリ をやっていきましょう！

? 続きはWPでご覧ください?
https://wp.me/pc9NHC-sl

非同期更新の変数の更新を待つ

this.$nextTick()を使う。

データの変更を一方通行にする

templateの値だけ変更し、templateの値が変更されても変数は変わらない

<a
:href="Object.assign(foo)"
></a>

VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。

カーソルが要素に重なると文字が拡大され、選択された値を取得する

←気が向いたらLGTMボタンぽちっとお願いします。

カーソルが要素に重なると拡大され、要素の値を取得します。

画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
追記：それっぽい犬図鑑つくりました→https://qiita.com/Itsuki_Y/items/288143a97ae2ad5224ca

ソース

shuffle.html

<!doctype html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PickUp</title>

    <style>
        body {
            font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        }

        ul {
            margin-left: 700px;
            list-style: none;
        }

        div#mainlist {
            color: #8EF1FF;
            font-size: 25px;
        }

        div#mainlist ul li:hover {
            list-style-type: ">";
            color: #7B3CFF;
            font-size: 75px;
        }


        .SubTitle {
            margin-left: 700px;
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0;
            text-decoration: none;
            color: #67c5ff;
        }

        .SubTitle:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 4px;
            top: 100%;
            left: 0;
            border-radius: 3px;
            background: #67c5ff;
            transition: .2s;
        }

        .SubTitle:hover:before {
            top: -webkit-calc(100% - 3px);
            top: calc(100% - 3px);
        }

    </style>
</head>
<body>
<div id="app">
    <h1>
        <div class="SubTitle">あなたの好きな犬種は？？</div>
        <div id="mainlist">
            <ul>
                <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name">
                    {{dog.name}}
                </li>
                <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img>
            </ul>
        </div>
    </h1>
    <p v-show="activeDog">selected:{{activeDog}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            dogs: [
                {name: 'チワワ'},
                {name: 'トイプードル'},
                {name: 'ポメラニアン'},
                {name: '柴犬'},
                {name: 'ダックスフンド'},
                {name: 'パグ'},
                {name: 'ブルドック'},
                {name: 'コーギー'},
                {name: 'パピヨン'},
                {name: 'マルチーズ'},
                {name: 'シェパード'},
                {name: 'ブルドッグ'},
                {name: 'プードル'},
                {name: 'ラブラドール'},
                {name: 'ビーグル'},
                {name: 'ゴールデンレトリバー'},
                {name: 'ラブラドールレトリバー'},
                {name: '秋田犬'},
            ],
            activeDog: ""
        },
        methods: {}
    });
</script>
</body>
</html>

最後に

以上です。気が向いたらLGTMぽちっとお願いします。

VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。

カーソルが要素に重なると文字が拡大され、選択された値を取得する

←気が向いたらLGTMボタンぽちっとお願いします。

カーソルが要素に重なると拡大され、要素の値を取得します。

画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。

shuffle.html

<!doctype html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PickUp</title>

    <style>
        body {
            font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        }

        ul {
            margin-left: 700px;
            list-style: none;
        }

        div#mainlist {
            color: #8EF1FF;
            font-size: 25px;
        }

        div#mainlist ul li:hover {
            list-style-type: ">";
            color: #7B3CFF;
            font-size: 75px;
        }


        .SubTitle {
            margin-left: 700px;
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0;
            text-decoration: none;
            color: #67c5ff;
        }

        .SubTitle:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 4px;
            top: 100%;
            left: 0;
            border-radius: 3px;
            background: #67c5ff;
            transition: .2s;
        }

        .SubTitle:hover:before {
            top: -webkit-calc(100% - 3px);
            top: calc(100% - 3px);
        }

    </style>
</head>
<body>
<div id="app">
    <h1>
        <div class="SubTitle">あなたの好きな犬種は？？</div>
        <div id="mainlist">
            <ul>
                <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name">
                    {{dog.name}}
                </li>
                <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img>
            </ul>
        </div>
    </h1>
    <p v-show="activeDog">selected:{{activeDog}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            dogs: [
                {name: 'チワワ'},
                {name: 'トイプードル'},
                {name: 'ポメラニアン'},
                {name: '柴犬'},
                {name: 'ダックスフンド'},
                {name: 'パグ'},
                {name: 'ブルドック'},
                {name: 'コーギー'},
                {name: 'パピヨン'},
                {name: 'マルチーズ'},
                {name: 'シェパード'},
                {name: 'ブルドッグ'},
                {name: 'プードル'},
                {name: 'ラブラドール'},
                {name: 'ビーグル'},
                {name: 'ゴールデンレトリバー'},
                {name: 'ラブラドールレトリバー'},
                {name: '秋田犬'},
            ],
            activeDog: ""
        },
        methods: {}
    });
</script>
</body>
</html>

以上です。気が向いたらLGTMぽちっとお願いします。

VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。

カーソルが要素に重なると文字が拡大され、選択された値を取得する

←気が向いたらLGTMボタンぽちっとお願いします。

カーソルが要素に重なると拡大され、要素の値を取得します。

画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
追記：それっぽい犬図鑑つくりました→https://qiita.com/Itsuki_Y/items/288143a97ae2ad5224ca

ソース

shuffle.html

<!doctype html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PickUp</title>

    <style>
        body {
            font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        }

        ul {
            margin-left: 700px;
            list-style: none;
        }

        div#mainlist {
            color: #8EF1FF;
            font-size: 25px;
        }

        div#mainlist ul li:hover {
            list-style-type: ">";
            color: #7B3CFF;
            font-size: 75px;
        }


        .SubTitle {
            margin-left: 700px;
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0;
            text-decoration: none;
            color: #67c5ff;
        }

        .SubTitle:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 4px;
            top: 100%;
            left: 0;
            border-radius: 3px;
            background: #67c5ff;
            transition: .2s;
        }

        .SubTitle:hover:before {
            top: -webkit-calc(100% - 3px);
            top: calc(100% - 3px);
        }

    </style>
</head>
<body>
<div id="app">
    <h1>
        <div class="SubTitle">あなたの好きな犬種は？？</div>
        <div id="mainlist">
            <ul>
                <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name">
                    {{dog.name}}
                </li>
                <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img>
            </ul>
        </div>
    </h1>
    <p v-show="activeDog">selected:{{activeDog}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            dogs: [
                {name: 'チワワ'},
                {name: 'トイプードル'},
                {name: 'ポメラニアン'},
                {name: '柴犬'},
                {name: 'ダックスフンド'},
                {name: 'パグ'},
                {name: 'ブルドック'},
                {name: 'コーギー'},
                {name: 'パピヨン'},
                {name: 'マルチーズ'},
                {name: 'シェパード'},
                {name: 'ブルドッグ'},
                {name: 'プードル'},
                {name: 'ラブラドール'},
                {name: 'ビーグル'},
                {name: 'ゴールデンレトリバー'},
                {name: 'ラブラドールレトリバー'},
                {name: '秋田犬'},
            ],
            activeDog: ""
        },
        methods: {}
    });
</script>
</body>
</html>

最後に

以上です。気が向いたらLGTMぽちっとお願いします。

VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。

カーソルが要素に重なると文字が拡大され、選択された値を取得する

←気が向いたらLGTMボタンぽちっとお願いします。

カーソルが要素に重なると拡大され、要素の値を取得します。

画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。

shuffle.html

<!doctype html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PickUp</title>

    <style>
        body {
            font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        }

        ul {
            margin-left: 700px;
            list-style: none;
        }

        div#mainlist {
            color: #8EF1FF;
            font-size: 25px;
        }

        div#mainlist ul li:hover {
            list-style-type: ">";
            color: #7B3CFF;
            font-size: 75px;
        }


        .SubTitle {
            margin-left: 700px;
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0;
            text-decoration: none;
            color: #67c5ff;
        }

        .SubTitle:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 4px;
            top: 100%;
            left: 0;
            border-radius: 3px;
            background: #67c5ff;
            transition: .2s;
        }

        .SubTitle:hover:before {
            top: -webkit-calc(100% - 3px);
            top: calc(100% - 3px);
        }

    </style>
</head>
<body>
<div id="app">
    <h1>
        <div class="SubTitle">あなたの好きな犬種は？？</div>
        <div id="mainlist">
            <ul>
                <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name">
                    {{dog.name}}
                </li>
                <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img>
            </ul>
        </div>
    </h1>
    <p v-show="activeDog">selected:{{activeDog}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            dogs: [
                {name: 'チワワ'},
                {name: 'トイプードル'},
                {name: 'ポメラニアン'},
                {name: '柴犬'},
                {name: 'ダックスフンド'},
                {name: 'パグ'},
                {name: 'ブルドック'},
                {name: 'コーギー'},
                {name: 'パピヨン'},
                {name: 'マルチーズ'},
                {name: 'シェパード'},
                {name: 'ブルドッグ'},
                {name: 'プードル'},
                {name: 'ラブラドール'},
                {name: 'ビーグル'},
                {name: 'ゴールデンレトリバー'},
                {name: 'ラブラドールレトリバー'},
                {name: '秋田犬'},
            ],
            activeDog: ""
        },
        methods: {}
    });
</script>
</body>
</html>

以上です。気が向いたらLGTMぽちっとお願いします。

VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。

クリックでリストがゆっくり入れ替わる

←気が向いたらLGTMボタンぽちっとお願いします。

ボタン押下でリストのゆっくりと順番が変わり、上位3つの要素にcssが適用されます。
ひと段落まで作ったところでVueJsの公式のサンプルで似たようなものがあることに気が付いた。

ソース

shuffle.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>shuffle</title>

    <style>
        /*要素が並び変えにかかる時間*/
        .flip-list-move {
            transition: transform 1.5s;
        }

        ul {
            margin-left: 800px;
            list-style: none;
        }

        div#mainlist {
            color: #8EF1FF;
            font-size: 15px;
        }

        div#mainlist ul li:first-child {
            list-style-type: "1:";
            color: #7B3CFF;
            font-size: 75px;
        }

        div#mainlist ul li:nth-child(2) {
            list-style-type: "2:";
            color: #B384FF;
            font-size: 50px;
        }

        div#mainlist ul li:nth-child(3) {
            list-style-type: "3:";
            color: #EAD9FF;
            font-size: 25px;
        }

        .btn-border-bottom {
            margin-left: 750px;
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0;
            text-decoration: none;
            color: #67c5ff;
        }

        .btn-border-bottom:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 4px;
            top: 100%;
            left: 0;
            border-radius: 3px;
            background: #67c5ff;
            transition: .2s;
        }

        .btn-border-bottom:hover:before {
            top: -webkit-calc(100% - 3px);
            top: calc(100% - 3px);
        }

    </style>
</head>
<body>
<div id="app">
    <h1>
        <div class="backGround">
            <div class="btn-border-bottom" v-on:click="shuffle">あなたにお勧めの犬種は？？</div>
            <div id="mainlist">
                <transition-group name="flip-list" tag="ul">
                    <li v-for="dog in dogs" :key="dog.name">
                        <p>
                            {{dog.name}}
                        </p>
                    </li>
                </transition-group>
            </div>
            </ul>
        </div>
    </h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            error: "error",
            dogs: [
                {name: 'チワワ'},
                {name: 'トイプードル'},
                {name: 'ポメラニアン'},
                {name: '柴犬'},
                {name: 'ダックスフンド'},
                {name: 'パグ'},
                {name: 'ブルドック'},
                {name: 'コーギー'},
                {name: 'パピヨン'},
                {name: 'マルチーズ'},


            ]
        },
        methods: {
            shuffle: function (e) {
                this.dogs = _.shuffle(this.dogs);

            }
        }
    });
</script>
</body>
</html>

最後に

以上です。気が向いたらLGTMぽちっとお願いします。

VueJs初学者のちょっとした倉庫です。

クリックでリストが入れ替わる

ボタン押下でリストの順番が変わり、上位3つの要素にcssが適用されます。

shuffle.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>shuffle</title>

    <style>
        /*要素が並び変えにかかる時間*/
        .flip-list-move {
            transition: transform 1.5s;
        }

        ul {
            margin-left: 800px;
            list-style: none;
        }

        div#mainlist {
            color: #8EF1FF;
            font-size: 15px;
        }

        div#mainlist ul li:first-child {
            list-style-type: "1:";
            color: #7B3CFF;
            font-size: 75px;
        }

        div#mainlist ul li:nth-child(2) {
            list-style-type: "2:";
            color: #B384FF;
            font-size: 50px;
        }

        div#mainlist ul li:nth-child(3) {
            list-style-type: "3:";
            color: #EAD9FF;
            font-size: 25px;
        }

        .btn-border-bottom {
            margin-left: 750px;
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0;
            text-decoration: none;
            color: #67c5ff;
        }

        .btn-border-bottom:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 4px;
            top: 100%;
            left: 0;
            border-radius: 3px;
            background: #67c5ff;
            transition: .2s;
        }

        .btn-border-bottom:hover:before {
            top: -webkit-calc(100% - 3px);
            top: calc(100% - 3px);
        }

    </style>
</head>
<body>
<div id="app">
    <h1>
        <div class="backGround">
            <div class="btn-border-bottom" v-on:click="shuffle">あなたにお勧めの犬種は？？</div>
            <div id="mainlist">
                <transition-group name="flip-list" tag="ul">
                    <li v-for="dog in dogs" :key="dog.name">
                        <p>
                            {{dog.name}}
                        </p>
                    </li>
                </transition-group>
            </div>
            </ul>
        </div>
    </h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            error: "error",
            dogs: [
                {name: 'チワワ'},
                {name: 'トイプードル'},
                {name: 'ポメラニアン'},
                {name: '柴犬'},
                {name: 'ダックスフンド'},
                {name: 'パグ'},
                {name: 'ブルドック'},
                {name: 'コーギー'},
                {name: 'パピヨン'},
                {name: 'マルチーズ'},


            ]
        },
        methods: {
            shuffle: function (e) {
                this.dogs = _.shuffle(this.dogs);

            }
        }
    });
</script>
</body>
</html>

以上です。気が向いたらLGTMぽちっとお願いします。

Nuxt.jsを使ってみたい！

いきなりタイトルとは違うところを書きましたが、Nuxt.jsを使うためにはVue.jsの知識が必要。

Vue.jsから一から学んでいく時にメモ＋まとめ的につらつらと書いていきます。

誤字や誤認識もあるかと思いますが、その際はご指摘をいただけると非常に助かります

準備

簡単に打鍵して試したい時は、jsfiddleがオススメです。

HTMLとJS簡単に試せます。

詳しい使い方として、こちらのサイトを参考にさせていただきました。
簡単にコードを実装してシェアできる！超便利なjsFiddleの使い方

ちなみに開発時はVSCodeを使ってます。便利なプラグインも多くて助かります。
サーバーサイドも一緒に開発する時にはIntellJです（Kotlin&SpringFramework）。

1.概要

まずは本家のサイト を参考に。

ざっとみて、以下の点か重要かなと。

• テンプレート構文を使って、MVVMしてる
• ディレクティブを使って、DOMにリアクティブ可能。
  • タグの属性に処理を設定できる
  • タグ自体の分岐やループ等の処理もできる
  • イベントハンドラの設定もできる
• コンポーネントシステムを使って、再利用可能な小さい部品を作って使いまわせそう
  • アトミックデザインに適した実装が可能かな？
  • でかいシステムでも、設計をちゃんとすれば複数人数で開発できそう

2.Vue定義

Vueインスタンス

Vueにはフィールドとメソッドを定義可能。

• フィールド：data
• メソッド：methods

Vueインスタンスの作成方法は簡単。ViewModelにあやかってvmという変数名をつけることが多いみたい。

var vm = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Vueインスタンスのライフサイクル

以下が、Vueインスタンスのライフサイクル。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyted

Vueインスタンスのライフサイクルをトリガーにフックしたくなる時は以下を参考に。

new Vue({
  data: {
    a: 1
  },
  // createdのフック
  created: function () {
    console.log('a is: ' + this.a)
  }
})

3.テンプレート構文

もっとも基本的なデータバインディングは、二重中括弧を利用したもの。
この「二重中括弧」、”Mustache（むすたっしゅ）” 構文という。初めて知ったけどそれは隠そうと思う。

<!--Vueインスタンスのmsgフィールドの情報をバインディングする。 -->
<span>Message: {{ msg }}</span>

JSでmsgフィールドの内容が変更されたら、上記の内容も変更されます（双方向バインディング）。

ただし、一度表示したらmsgフィールドの内容がかわろうとも、変更されないような書き方もあります。
v-onceディレクティブを使います。

<span v-once>This will never change: {{ msg }}</span>

このように、痒いところに届きそうなものから、すげー使うやつまでディレクティブの種類が多すぎそうなので主要なものと言われるのをまとめてみます。

4.ディレクティブ

特徴としては、以下かと。

• v- から始まる特別な属性
• 属性値は、単一の JavaScript 式を期待する（例外はv-for）
• 属性値の式が変更された時に、DOMを更新する
• 省略記法あり。
  • 例：<a v-bind:href="url"> ... </a> → <a :href="url"> ... </a>

v-のディレクティブについて捉えることが必要そうなので、まとめようと思います。

※次の記事にもまとまっており、参考にもさせていただきました。
体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023

※以下、随時追加。

Nuxt.jsを使ってみたい！

いきなりタイトルとは違うところを書きましたが、Nuxt.jsを使うためにはVue.jsの知識が必要。

Vue.jsから一から学んでいく時にメモ＋まとめ的につらつらと書いていきます。

誤字や誤認識もあるかと思いますが、その際はご指摘をいただけると非常に助かります

準備

簡単に打鍵しながら学びたいので、jsfiddleを使ってます。

HTMLとJS簡単に試せます。

詳しい使い方として、こちらのサイトを参考にさせていただきました。
簡単にコードを実装してシェアできる！超便利なjsFiddleの使い方

ちなみに開発時はVSCodeを使ってます。便利なプラグインも多くて助かります。
サーバーサイドも一緒に開発する時にはIntellJです（Kotlin&SpringFramework）。

1.概要

まずは本家のサイト を参考に。

ざっとみて、以下の点か重要かなと。

• テンプレート構文を使って、MVVMしてる
• ディレクティブを使って、DOMにリアクティブ可能。
  • タグの属性に処理を設定できる
  • タグ自体の分岐やループ等の処理もできる
  • イベントハンドラの設定もできる
• コンポーネントシステムを使って、再利用可能な小さい部品を作って使いまわせそう
  • アトミックデザインに適した実装が可能かな？
  • でかいシステムでも、設計をちゃんとすれば複数人数で開発できそう

2.Vue定義

Vueインスタンス

Vueにはフィールドとメソッドを定義可能。

• フィールド：data
• メソッド：methods

Vueインスタンスの作成方法は簡単。ViewModelにあやかってvmという変数名をつけることが多いみたい。

sample0-1.js

var vm = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Vueインスタンスのライフサイクル

以下が、Vueインスタンスのライフサイクル。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyted

Vueインスタンスのライフサイクルをトリガーにフックしたくなる時は以下を参考に。

sample0-2.js

new Vue({
  data: {
    a: 1
  },
  // createdのフック
  created: function () {
    console.log('a is: ' + this.a)
  }
})

3.テンプレート構文

もっとも基本的なデータバインディングは、二重中括弧を利用したもの。
この「二重中括弧」、”Mustache（むすたっしゅ）” 構文という。初めて知ったけどそれは隠そうと思う。

<!--Vueインスタンスのmsgフィールドの情報をバインディングする。 -->
<span>Message: {{ msg }}</span>

JSでmsgフィールドの内容が変更されたら、上記の内容も変更されます（双方向バインディング）。

ただし、一度表示したらmsgフィールドの内容がかわろうとも、変更されないような書き方もあります。
v-onceディレクティブを使います。

<span v-once>This will never change: {{ msg }}</span>

このように、痒いところに届きそうなものから、すげー使うやつまでディレクティブの種類が多すぎそうなので主要なものと言われるのをまとめてみます。

4.ディレクティブ

特徴としては、以下かと。

• v- から始まる特別な属性
• 属性値は、単一の JavaScript 式を期待する（例外はv-for）
• 属性値の式が変更された時に、DOMを更新する
• 省略記法あり。
  • 例：<a v-bind:href="url"> ... </a> → <a :href="url"> ... </a>

v-のディレクティブについて捉えることが必要そうなので、まとめようと思います。

※次の記事にもまとまっており、参考にもさせていただきました。
体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023

v-text

• DOMの内側に展開。
• Mustache構文（{{}}で囲んだコード）と一緒。
• 省略系→

サンプルコード

sample1.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-1">
  <!-- フィールド展開の例 -->
  <p v-text="message"></p>
  <p>{{ msg }}</p>

  <!-- メソッド展開の例 -->
  <p v-text="showMessage()"></p>
  <p>{{ showMsg() }}</p>
</div>

sample1.js

var vm = new Vue({
  el: '#app-1',
  data: {
    message: 'Hello Vue.js!',
    msg: 'サンキュー'
  },
  methods: {
    showMessage: function () {
      return "はろー、Vue.js"
    },
    showMsg: function () {
      return "Thank you!!"
    }
  }
})

結果

v-once

• 1度DOM展開したら、そのあとは変更させない。
• なんかの処理で、バインディングしたデータが変更されても、描画を変更させたくないときに有効。
  • 個人的にはこれを使うのは最終手段かなと。感覚的に。
• 省略系→

サンプル（v-onceを使わない）

sample2-1.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-2">
  <p v-text="message"></p>
  <p v-text="showMessage()"></p>
</div>

sample2.js

var vm = new Vue({
  el: '#app-2',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    showMessage: function () {
      this.message = 'hoge';
      return "はろー、Vue.js"
    }
  }
})

結果（「Hello Vue.js!」がshowMessage()で書き換えられて表示される）

サンプル（v-onceを使う・JavaScriptは変更しないので割愛）

sample2-2.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-2">
  <!-- v-onceを追加 -->
  <p v-once v-text="message"></p>
  <p v-text="showMessage()"></p>
</div>

結果（「Hello Vue.js!」が表示される）

v-html

• DOMの内側に展開。
  • v-textは「文字列」で展開する
  • v-htmlは「HTML」で展開する
• HTMLをそのまま展開されるので、XSSに注意して使うことが必要。
• 省略系→

サンプルコード：h1タグを表示させたいときー

sample3.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-3">
  <p v-text="message"></p>
  <p v-html="message"></p>
</div>

sample3.js

var vm = new Vue({
  el: '#app-3',
  data: {
    message: '<h1>タイトルです<h1>'
  }
})

結果

v-bind（その１：属性値）

• htmlタグの属性に埋め込む時に使用。
• 引数が必要なディレクティブ。引数は:の後ろに設定するv-bind:href="url
• 使う頻度がスーパー高そう。
• 省略系→:href='url'のように、コロンだけでOK。

サンプルコード：aタグのリンク先を設定したいときー

sample4.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-4">
  <!-- :(コロン)の後に引数を設定する-->
  <a v-bind:href="url">モノタス</a>


  <!-- 省略系
  <a :href="url">モノタス</a>
  -->
</div>

sample4.js

var vm = new Vue({
  el: '#app-4',
  data: {
    url: 'https://www.monotas.net/'
  }
})

結果

v-bind（その２：属性）

• htmlタグそのものを定義することも可能
• 属性を[]で囲うことで指定可能。例：<a :[attr]="hogehoge">
• つまり、v-bindだけで、各種タグに属性とそのvalueのバインディングができる。
• これも使う頻度がスーパー高そう。

sample5.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-5">
  <a :href="monotas_url">モノタス</a>
  <br>
  <a :[attr]="jta_url">日本テニス協会</a>
</div>

sample5.js

var vm = new Vue({
  el: '#app-5',
  data: {
    attr: 'href',
    monotas_url: 'https://www.monotas.net/',
    jta_url: 'https://www.jta-tennis.or.jp/'
  }
})

結果

v-bind（その３：オブジェクト化）

• 1つのタグに複数のv-bindを指定することもできるが、一つのオブジェクトとして記載することも可能。
• Vueフィールドにオブジェクトを用意して、それをv-bindで指定することも可能。
• 見た目すっきり系でもあるし、DOMの操作しやすくなりそうな感覚。まだふんわりとしかわかってない。

sample6.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-6">
  <!-- 複数指定できる -->
  <a :id="monotas_id" :href="monotas_url">モノタス（省略系でそれぞれ指定）</a>
  <br>
  <!-- 一つのオブジェクトでも書ける -->
  <a v-bind="{id: monotas_id, href: monotas_url}">モノタス（オブジェクトを直接指定）</a>
  <br>
  <!-- VueインスタンスフィールドのオブジェクトもOK -->
  <a v-bind="monotas">モノタス（Vueインスタンスのオブジェクトを指定）</a>
  <br>
</div>

sample6.js

var vm = new Vue({
  el: '#app-6',
  data: {
    attr: 'href',
    monotas_id: 2,
    monotas_url: 'https://www.monotas.net/',
    monotas: {
        id: 2,
      href: 'https://www.monotas.net/'
    }
  }
})

結果：全て同じIDとurlが設定されている

v-on（その１：基本）

• クリック等のDOMが提供しているイベントのリスナー。
• イベント発火時のJavaScriptの実行が可能。
• 引数が必要なディレクティブ。引数は:　の後ろに設定するv-on:click="change"
  • clickはDOMが提供しているイベント
  • changeが Vueで定義したメソッド。
• 使う頻度は超スーパー高そう。
• 省略系→

サンプルコード：clickイベントの例。ボタンが押されたら文字列を変更します的なときー

sample7.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-7">
  <button v-on:click="change">クリックすると文字が変わります</button>
  <p>{{ first_str }}</p>
</div>

sample7.js

var vm = new Vue({
  el: '#app-7',
  data: {
    first_str: '最初に表示されています',
    clicked_str: 'ボタンが押されました'
  },
    methods:{
      change: function() {
        this.first_str = this.clicked_str
      }
    }
})

結果

v-on（その２：引数とイベント）

• v-onでメソッドを実行する際に、引数を渡すことが可能。change('モノタス')
• DOMイベントをそのまんま渡すことも可能。$eventという特別な変数を指定する。change($event, 'モノタス')

サンプルコード：引数とイベントオブジェクトを渡した時の例

sample8.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-8">
  <!-- $eventでイベントオブジェクト渡します -->
  <button v-on:click="change($event, '株式会社モノタス')">クリックすると文字が変わります</button>
  <p>{{ first_str }}</p>
  <p>{{ event_name }}</p>
</div>

sample8.js

var vm = new Vue({
  el: '#app-8',
  data: {
    first_str: '最初に表示されています',
    clicked_str: 'ボタンが押されました',
    event_name: 'イベントが表示されます'
  },
    methods:{
      change: function(event, msg) {
        this.first_str = msg
        this.event_name = event.target.tagName
      }
    }
})

結果

v-on（その3：イベントをJavaScriptから指定）

• click等のDOMイベントは、JavaScriptからも指定できる

*サンプルコード：その2のコードをちょっと変更

sample8-2.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app-8-2">
  <!-- vm_eventに変更 -->
  <button v-on:[vm_event]="change($event, '株式会社モノタス')">クリックすると文字が変わります</button>
  <p>{{ first_str }}</p>
  <p>{{ event_name }}</p>
</div>

sample8-2.js

var vm = new Vue({
  el: '#app-8-2',
  data: {
    first_str: '最初に表示されています',
    clicked_str: 'ボタンが押されました',
    event_name: 'イベントが表示されます',
    vm_event: 'click' // このイベントを設定
  },
    methods:{
      change: function(event, msg) {
        this.first_str = msg
        this.event_name = event.target.tagName
      }
    }
})

v-on（その4：引数となるDOMイベント）

DOMイベントの一覧は以下を参照。
https://developer.mozilla.org/ja/docs/Web/Events

上記のページの内、以下をよく使うと想定。
* キーボードイベント
* マウスイベント
* ドラッグ & ドロップイベント
* フォームイベント
* フォーカスイベント

5.イベント修飾子

イベントハンドラ内でそのイベントを止めたり、バブリングを止めるために、
event.preventDefault()やevent.stopPropagation()をメソッドの最初にコールするが、
Vueには同等の機能をもった便利なイベント修飾子.stopや.preventがある。

v-onディレクティブの引数に設定するDOMイベントに追加する形式で書く。例：v-on:click.stop

「バブリング」については、DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017を参照

.stopや.preventだけでなく、以下が用意されている。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

sample50.html

<!-- クリックイベントのバブリングが止まる -->
<a v-on:click.stop="doThis"></a>

<!-- submit イベントが実行されない -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾子は繋げることができる。バブリングを止める ＆ doThatは実行されない。 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 値を指定せず、修飾子だけ利用することも可能 -->
<form v-on:submit.prevent></form>

<!-- イベントリスナーを追加するときにキャプチャモードで使います -->
<!-- 言い換えれば、内部要素を対象とするイベントは、その要素によって処理される前にここで処理されます -->
<div v-on:click.capture="doThis">...</div>

<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます -->
<!-- 言い換えると子要素のときは呼び出されません -->
<div v-on:click.self="doThat">...</div>

<!-- 最大1回、クリックイベントはトリガされます -->
<a v-on:click.once="doThis"></a>

<!-- `onScroll` が `event.preventDefault()` を含んでいたとしても -->
<!-- スクロールイベントのデフォルトの挙動(つまりスクロール)は -->
<!-- イベントの完了を待つことなくただちに発生するようになります -->
<div v-on:scroll.passive="onScroll">...</div>

使用時の注意事項１：実行される順番

以下の通り、イベント修飾子を設定する順番で、挙動が異なるので注意する。

修飾子を使用するとき、関連するコードが同じ順序で生成されるため注意してください。
それゆえ、v-on:click.prevent.self を使用すると全てのクリックイベントを防ぐことはできますが、v-on:click.self.prevent は要素自身におけるクリックイベントを防ぐだけです。

使用時の注意事項2：.passive と .prevent は同時使用不可

以下の通り、.preventが無視されることがあるので注意する。

.passive と .prevent を一緒に使わないでください。.prevent は無視され、ブラウザにはおそらく警告が表示されます。.passive はイベントのデフォルトの挙動を妨げないことをブラウザに伝達することを思い出してください。

6.キー修飾子

イベントハンドラ内で、キーボードに関するDOMイベントを扱う時に有効なのがキー修飾子。
特定のキーだけ反応するような処理を書ける。

イベント修飾子と同じく、v-onディレクティブに対して書く。例：v-on:keyup.enter="addChar($event)

Vueサポートキー

Vueがサポートしているのは、以下の最も一般的と思われるキー。

• .enter
• .tab
• .delete (“Delete” と “Backspace” キー両方をキャプチャします)
• .esc
• .space
• .up
• .down
• .left
• .right

sample60.html

<!-- Enterキーを押下した時だけ、addCharメソッドが実行される -->
<input type="text" v-on:keyup.enter="addChar($event)">

<!-- キー修飾子はつなげることも可能。Space/Enterキー押下時、addCharメソッドが実行される -->
<input type="text" v-on:keyup.enter.space="addChar($event)">

Key Code

keycodeも直接設定できる。

sample61.html

<!-- Enterキーを押下した時だけ、addCharメソッドが実行される -->
<!-- 両方とも、同じ-->
<input type="text" v-on:keyup.enter="addChar($event)">
<input type="text" v-on:keyup.13="addChar($event)">

ただし、keycodeイベントは非推奨。
新しいブラウザではサポートされない可能性もあるので注意が必要。

Key Values

Key Valuesに載っている任意のキー名をケバブケースに変換することで使用可能。

sample11.html

<!-- $event.key が 'PageDown' に等しい場合だけ呼ばれる -->
<input v-on:keyup.page-down="onPageDown">

7.システム修飾子キー

「Ctlキー + 4キー」押下した時など、ctl、alt等は他のキーと一緒に押下されるケースが多い。
このイベントをハンドリングしやすくしたのが、システム修飾キー。

Vueサポートキー

Vueは以下のキーをサポートしてくれる。

• .ctrl
• .alt
• .shift
• .meta（Mac：コマンドキー（⌘）　Windows：ウィンドウキー（⊞））

sample70.html

<!-- altキーを押しながらエンターキーを押下した時、addCharメソッドが実行される -->
<!-- エンターキーを押しながらaltキーを押下しても、何も反応しない-->
<input type="text" v-on:keyup.alt.enter="addChar($event)">

<!-- key codeでもOK -->
<!-- Alt + C -->
<input type="text" v-on:keyup.alt.67="addChar($event)">

<!-- マウス操作とももちろんOK -->
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact 修飾子

.exactはシステム修飾子の正確な組み合わせを制御する。

sample71.html

<!-- これは Ctrl に加えて Alt や Shift キーが押されていても発行されます -->
<button v-on:click.ctrl="onClick">A</button>

<!-- これは Ctrl キーが押され、他のキーが押されてないときだけ発行されます -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- これは システム修飾子が押されてないときだけ発行されます -->
<button v-on:click.exact="onClick">A</button>

マウスボタンの修飾子

マウス操作の、左クリック、右クリック、真ん中クリックを以下の修飾子でサポートしてくれる

• .left
• .right
• .middle

※以下、随時追加。

概要

Vue を使っていて [Vue warn]: You may have an infinite update loop in a component render function. の警告が出た場合、書き方のどこかがおかしいので直す必要がある。

この記事では、原因とその対処法について書く。

まとめ

• 上記の警告が出るのは、テンプレート（から呼ばれるメソッド）の中で data property の値を変更しているのが原因 (ただし v-on:xxx="..." の右辺で値を変更するのは何も問題ない)。

モデルケース

次のような要件の画面を作るとする。

• テキストボックスの入力内容に応じてリアルタイムでバリデーションする
  • ユーザー名は最大 11 文字までとする
• バリデーションエラーがあるときのみ、
  • テキストボックスの下にエラー表示する
  • テキストボックスに error という class をつけて枠を赤くする

※あくまでサンプルなので、 API 呼び出しはしない。

これを実現するための実装方法は1つではないが、
仮に以下のような Vue コンポーネントを定義すると、冒頭の infinite update loop 警告が出る。

警告が出る例

<template>
  <form>
    <div>
      ユーザー名:
      <input type="text" v-model="user_name" 
             v-bind:class="[ validateMaxLength('user_name', 11) ]"
      > 
      <p class="error" v-if="errors.user_name">{{ errors.user_name }}</p>
    </div>
    <!-- 以下、このような項目が複数並ぶ -->
  </form>
</template>

<script>
export default {
  data() {
    return {
      user_name: '',
      errors: {},
    };
  },
  methods: {
    /**
     * @param {string} name
     * @param {number} maxLength 最大文字数
     * @return {string} スタイルクラス名
     */
    validateMaxLength(name, maxLength) {
      const length = Number(this[name].length);
      let styleClass;
      if (length > maxLength) {
        this.$set(this.errors, name, String(maxLength) + '文字以下にしてください');
        styleClass = 'error';
      } else {
        this.$delete(this.errors, name);
        styleClass = '';
      }
      return styleClass;
    }
  }
};
</script>

<style>
input[type="text"].error {
  border-color: red;
}
p.error {
  color: red;
}
</style>

原因と解決方法

      <input type="text" v-model="user_name" 
             v-bind:class="[ validateMaxLength('user_name', 11) ]"> 

のように v-bind:class の中で validateMaxLength メソッドを呼び出しているのが原因。

validateMaxLength メソッドの中では this.$set や this.$delete を使って this.errors の状態を変化させている。
描画処理をしている途中で data property を変更すると無限ループになるおそれがあるため、 You may have an infinite update loop の警告が出る、ということ。

この警告が出ないようにするには、いくつか修正案がある。

修正案 1

this.errors の状態を変更する処理を v-on:xxx に移す。
v-bind:class="..." の中では this.errors を読み取るだけにする。

      <input type="text" v-model="user_name" 
             v-bind:class="{ 'error': errors.user_name }" 
             v-on:input="validateMaxLength('user_name', 11)"
      >

修正案 2

this.errors の状態を変更する処理を watch に移す。
v-bind:class="..." の中では this.errors を読み取るだけにする。
具体的には、

      <input type="text" v-model="user_name" 
             v-bind:class="{ 'error': errors.user_name }" 
      >

にした上で this.user_name を watch して validateMaxLength を実行すればよい。

watch: {
  user_name(newValue) {
    this.validateMaxLength('user_name', 11);
  }
},

なお、上記のいずれの修正案も validateMaxLength の戻り値を使っていないため、修正後はメソッドの戻り値が不要になる。
つまり以下でよいということ。

    /**
     * @param {string} name
     * @param {number} maxLength 最大文字数
     * @return {void}
     */
    validateMaxLength(name, maxLength) {
      const length = Number(this[name].length);
      if (length > maxLength) {
        this.$set(this.errors, name, String(maxLength) + '文字以下にしてください');
      } else {
        this.$delete(this.errors, name);
      }
    }

主に伝えたいこと

• モチベーション維持の大変さとその対処
  • 2ヶ月間ですらモチベーションを維持するのは大変でした

筆者背景

• 機械系学科を卒業し新卒でIT企業(非WEB系BtoB)に入社し1年が経ちました
• 1年目はVue.jsとJavaで社内の在庫を管理するシステムを開発させていただきました
• 2年目(今)はAWSに関わるチームにいます

ポートフォリオとその開発について

概要

https://www.techmatch.tokyo/ (サンプル ユーザID/パスワード：testuser/testuser) (非レスポンシブ)

• 個人エンジニア同士を結び付けるようなサービス(のつもり)です
• ユーザがやりたい事を投稿し，他のユーザが一緒にやりたいと思ったら応募するサービスです
• モチベーションの部分でも書きますが，完成度は6割だと思います

開発期間

• 以下の通りで概算65日です。実装中に要件や設計を変更する場面が度々ありました。恐ろしいことに現場でもあるみたいですね。
  1. 要件定義 2日
  2. 設計 2日
  3. 実装・テスト 60日(バックエンド 25日 フロントエンド 35日)
  4. デプロイ 1日

使用した技術

• フロントエンド：Vue.js，Bulma，webpack
• バックエンド：SpringBoot，pom，postgresql
  • 会社でやってたのでクリーンアーキテクチャで実装しました。冗長な気がしますが，コード保守しやすい，テストしやすい。
• インフラ：heroku
  • AWSを触るチームにいるのですが，コスト的にherokuにしました。

ポートフォリオを作った目的

外にエンジニアの知り合いを作ってみたいなぁ 4割

• 挨拶する際に自分の作ったものがあると便利かなと思いました。ただ会社がBtoBなため簡単に私の携わった部分を見せられません。そこで対外的に形を見せられる実績がほしいので作ってみました。

技術を体得したいなぁ 4割

• インフラからフロントまで1人でやることで，今まで会社から与えられていた部分(開発環境・デプロイ環境など)も含めて身に着けたいと思っていました。ポートフォリオ開発を通じてこの目的は果たせたと思います。

こんなサービスあったらいいなぁ 2割

• ITエンジニアがもっともっと活躍できたらいいなあと思っています。

モチベーション維持の大変さとその対処

とにかく面倒くさい

• 開発期間中は，仕事から帰る → 開発する → 仕事に行く の繰り返しでした。とにかく疲れて面倒くさかったです。レイトン教授や登山に逃げたときもありました。レイトン教授で疲れた時もありました。そこで次のようなことをしていました。

対処１：完璧主義から遠ざかる

• これが一番だと思います。「大学なら6割出来れば単位が貰える。とりあえず6割を目指そう。」これを言い聞かせていました。理由としては，完璧を目指す途中で体力消費や現実とのギャップから萎えてデプロイを断念するよりも，6割でデプロイした方が形として残り良い成果だと思ったからです。そのため，見た目や機能に甘々な部分が多々あります。やり残したリストを取っていたのですが見てみると，タスクの大小含め約20個あります。ですが，また追加開発すればいいし，MVP開発なんてのもありますし，何より心の余裕を作るにはこの考え方が良かったです。

対処２：筋トレする

• 筋肉は裏切らない。
• セロトニンが出て気分をリフレッシュできるらしいです。

対処３：手段ではなく，目的を意識する

• 「次は，画像保存の実装かぁ。」「次は，動的検索の実装かぁ。」「次は，メール認証の実装かぁ。」と目的を達成するための手段の手間を考えると面倒くさくてやる気が起きませんでした。そこで「デプロイしたら知り合いが増えるかも知れないぞ。だからやろう。」と目的を言い聞かせてやってました。万人に効果があるかは分かりませんが，私はやる気が起きました。

その他 雑記

デプロイまでに掛かった料金

• 総額：200円
  • ドメイン取得：200円

今後1ヵ月でかかる料金

• 総額：800円
  • レンタルSMTPサーバ：50円
  • heroku：750円

今後1年間でかかる料金

• 総額：2850円
  • SMTPサーバ：600円
  • heroku：2250円
    • 3ヵ月をすぎたらfreeプランに戻し，cloud flareを立ててssl化しようと思っています。

技術で知ったことを10個なんとなくピックアップ

• Vue.jsのトランジションでアニメーションを作れる
• 無限スクロールを実装するなら，"現在の表示高さ+スクロール量>=全体の高さ" を条件にAPIを叩く
• bulmaという名前はドラゴンボールのブルマからきたっぽい
• 複数の拡張子を考慮し画像データを送るならヘッダーのcontent-typeをmultipart/form-dataというMIMEタイプに
• パスワード暗号化方式のbcryptは一方通行なので複合できない
• DBにクエリを発行する際に起きるかもしれないN+1問題
• SpringBootで動的検索するならJpaSpecificationExecutorインタフェース
• SpringBootでHTTPリクエストに独自のフィルタをかけるなら，OncePerRequestFilterを継承したクラスを使う
• WEBアプリをデプロイするならsitemap.xmlを作っておく
• amazon sesで不特定多数にメールを送る場合は申請が必要になる

最後に

• SNS苦手な老体ですがtwitterを始めました。ITエンジニアの方と知り合いになりたい。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Lower and Upper limit with Vue.js</title>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="lowerupper_warp">
            <select  name="lower"  v-on:change="selectLower()" v-model="lower_value">
                <option value="" >Select lower limit</option>
                <option v-for="(o, key) in lower_list" v-text="o" v-bind:value=key></option>
            </select>
            <select  name="upper" v-model="upper_value">
                <option value="" >Select upper limit</option>
                <option v-for="(o, key) in upper_list" v-text="o" v-bind:value=key></option>
            </select>
        </div>
    </body>
    <script>
        var select_prefecture = new Vue ({
            el : '#lowerupper_warp',
            data: {
                lower_value: 0,
                upper_value: 0,
                lower_list: {},
                upper_list: {},
                full_list: {
                    0: 0,
                    1 : 1,
                    2 : 10,
                    3 : 100,
                    4 : 1000,
                    5 : 10000,
                },
            },
            methods: {
                selectLower() {
                    var selected_value = this.lower_value;

                    const deleted_target = range(0, selected_value - 1);
                    this.upper_list = JSON.parse(JSON.stringify(this.full_list));

                    deleted_target.forEach((value, i) => {
                        delete this.upper_list[value];
                    });

                    if(this.lower_value > this.upper_value){
                        this.upper_value = this.lower_value;
                    }

                },
            },
            mounted() {
                this.lower_list = JSON.parse(JSON.stringify(this.full_list));
                this.upper_list = JSON.parse(JSON.stringify(this.full_list));
            }
        });

        const range = (start, end) => {
            const list = [];
            for (let i = start; i <= end; i++ ) {
                list.push(i);
            }
            return list;
        }
    </script>
</html>

Vue(Nuxt.js)でチャット機能を実装する方法です。
5パターンの実装方法をまとめました。

送信ボタンを押すことで送信する

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea v-model="message"></textarea>
    <button @click="sendChat">送信</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: ''
    }
  },
  methods: {
    sendChat() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

Enterキーを押した時に送信

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea v-model="message" @keyup.enter="pushEnter"></textarea>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: ''
    }
  },
  methods: {
    pushEnter() {
      this.sendChat()
    },
    sendChat() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

@keyup.enter="pushEnter"を設定することでEnterキーを押した時も送信できます。

Enterキーを押した時に送信（日本語変換時のEnterでは送信しない）

日本語変換時のEnterでは送信しない機能を追加したものになります。

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <v-textarea
    <textarea
      v-model="message"
      @keydown.enter.exact="keyDownEnter"
      @keyup.enter="pushEnter"
    ></textarea>

  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: '',
      keyDownCode: 0
    }
  },
  methods: {
    keyDownEnter(e: any) {
      this.keyDownCode = e.keyCode
    },
    pushEnter() {
      if (this.keyDownCode === 229) {
        return
      }
      this.sendChat()
    },
    sendChat() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

@keydown.enter.exact="keyDownEnter"でEnterキーをkeydownした時のイベントを取得します。
this.keyDownCode = e.keyCodeでkeyCodeを変数に記録します。
EnterキーのkeyCodeは13です。しかし、日本語変換確定時のEnterキーのkeyCodeは229に変わります。
if (this.keyDownCode === 229)で日本語変換確定時の場合は処理を抜けるようにしています。

Enterで送信、Shift+Enterで改行

こちらは過去にまとめたので下記記事をご覧ください。
Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装する

空文字や空白のみでは送信しないようにする

空文字や空白、改行のみでは、送信しないようにする為には、送信メソッドに処理を追加します。

sendChat() {
  if (!this.message || !this.message.match(/\S/g)) {
    this.message = ''
    return
  }
  this.sendMessage = this.message
  this.message = ''
}

コピペだけで作れるCSSスライダーアニメーションを３５個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSスライダーアニメーション３５選

１. コピペだけでCSSアニメーション！ECサイトでそのまま使えるスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. コピペだけ！画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン３選

画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. 洗練されたマテリアルデザインをコピペで！CSSスライダーアニメーション３選（ナビゲーションボタン編）

Web制作やWebアプリケーションなどで利用できるデザインになっています

↓参考記事は下の記事です↓

４. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選（コントロールボタン編）

コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

５. 【解説付き】3Dマテリアルデザインをコピペで！CSSスライダーアニメーション３選（rotate編）

実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

６. 【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

それぞれに違ったfilterアニメーションがついていて面白いです

↓参考記事は下の記事です↓

７. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

いろいろなtransformエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

８. コピペだけでスライダーマテリアルデザイン！CSSアニメーション３選【transform:scale編】

コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

９. スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】

CSSだけで動きのあるスライダーマテリアルデザイン３選が紹介されています

かなりスタイリッシュなデザインだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１０. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選

filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１１. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装

そのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１２. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法

そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

コピペだけで作れるCSSスライダーアニメーションを３５個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSスライダーアニメーション３５選

１. コピペだけでCSSアニメーション！ECサイトでそのまま使えるスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. コピペだけ！画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン３選

画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. 洗練されたマテリアルデザインをコピペで！CSSスライダーアニメーション３選（ナビゲーションボタン編）

Web制作やWebアプリケーションなどで利用できるデザインになっています

↓参考記事は下の記事です↓

４. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選（コントロールボタン編）

コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

５. 【解説付き】3Dマテリアルデザインをコピペで！CSSスライダーアニメーション３選（rotate編）

実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

６. 【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

それぞれに違ったfilterアニメーションがついていて面白いです

↓参考記事は下の記事です↓

７. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

いろいろなtransformエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

８. コピペだけでスライダーマテリアルデザイン！CSSアニメーション３選【transform:scale編】

コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

９. スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】

CSSだけで動きのあるスライダーマテリアルデザイン３選が紹介されています

かなりスタイリッシュなデザインだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１０. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選

filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１１. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装

そのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１２. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法

そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります

---

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

---

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

動きは下の画像のような感じになります

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

---

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

---

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

動きは下の画像のような感じになります

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

動きは下の画像のような感じになります

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

動きは下の画像のような感じになります

１. フワッと背景が現れるhoverアニメーション

２. 背景が徐々に画像全体へ広がるhoverアニメーション

３. 扉が閉まるように背景が現れるhoverアニメーション

４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

コードを確認する

【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する

【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

２. flexでhoverした画像が100％拡大する画像アニメーション

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

コードを確認する

【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

コードを確認する

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります

---

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

---

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

動きは下の画像のような感じになります

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

---

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

---

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

動きは下の画像のような感じになります

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

動きは下の画像のような感じになります

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

動きは下の画像のような感じになります

１. フワッと背景が現れるhoverアニメーション

２. 背景が徐々に画像全体へ広がるhoverアニメーション

３. 扉が閉まるように背景が現れるhoverアニメーション

４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

コードを確認する

【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する

【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

２. flexでhoverした画像が100％拡大する画像アニメーション

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

コードを確認する

【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

コードを確認する