20200731のvue.jsに関する記事は14件です。

投稿日：2020-07-31T20:50:50+09:00

Vue Apolloを@vue/apollo-composableに書き換える

株式会社iCAREのプロダクトCarelyのフロントエンド環境は、Vue.js + GraphQL(Vue Apolloを利用)で構成されています。

Carelyでは、今絶賛、Option APIからComposition APIへの移行中です。

その中でVue Apolloに関しても、Composition APIに合わせて、Vue Apollo v3から@vue/apollo-composable(Vue Apollo v4)に移行していますが、そこでどのように変わるのか、どんなメリットが生じるかについて書きたいと思います。

情報ソースは主に以下を利用しています。
https://apollo.vuejs.org/guide/
https://v4.apollo.vuejs.org/guide-composable/

これから移行を検討しているエンジニアの皆様の参考になれば幸いです。

クエリの書き方

v3の場合
apollo: {
  users: gql`
    query getUsers {
      users {
        id
        name
      }
    }
  `,
},
のように「オプション」でクエリを定義すると、テンプレートでクエリの結果usersを参照することができます。
この際、クエリの結果をusersで参照するためには
data () {
  return {
    users: [],
  },
},
のようにdataオプション内でusersを初期化しておく必要があります。

v4の場合
<script>
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'

export default {
  setup () {
    const { result } = useQuery(gql`
      query getUsers {
        users {
          id
          name
        }
      }
    `)

    return {
      result,
    }
  },
}
</script>
オプションではなく、useQuery関数を使ってクエリを実行します。
setup()の戻り値にresultを含めることでテンプレートからresultを参照できます。
v3と異なりクエリの結果を受け取る変数を事前に、dataオプションで初期化する必要はありません。
<template>
  <ul>
    <li v-for="user of result.users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>
v3とv4で大きく異なる点（主観）

マルチルートのクエリへの対応
query getCatsAndDogs {
  cats {
    id
  }

  dogs {
    id
  }
}
といったクエリの結果を受け取る場合、v3の場合は、クエリの結果が自動的にdataオプションで指定したオブジェクトのプロパティにマップされるため、デフォルトではこの結果をうまく受け取ることができません。

v4の場合は、マルチルートの結果は、useQueryの戻り値のプロパティとして受け取ることができるため、特段の迂回策を取らずに受け取ることができます。

useResult

v4にはuseQueryと並んでuseResultがあり、クエリ結果に対して柔軟にアクセスすることができるようになっています。
const { result } = useQuery(gql`
  query getMessages {
    currentUser {
      messages {
        id
        text
      }
    }
  }
`)

const messages = useResult(result, null, data => data.currentUser.messages)
上記のようにuseResultを使って結果を取得した場合、result.valuesがundefinedだとしても、useResultの関数の中でエラーが出ないように実装されているので
const messages = useResult(result, null, data => data && data.currentUser && data.currentUser.messages)
のように子要素の存在チェックをする必要はありません。

また、この様に簡単に処理を分けることもできます。
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'

function useGetMessages() {
  const { result } = useQuery(gql`
    query getMessages {
      currentUser {
        messages {
          id
          text
        }
      }
    }
  `)

  return useResult(result, null, data => data.currentUser.messages)
}

export default {
  setup () {
    const messages = useGetMessages()
    return { messages }
  }
}
その他にも様々な点での仕様の変更があり、v3と比較してv4はいろいろな点で使いやすくなっている印象を受けました。

参考サイト

https://apollo.vuejs.org/guide/
https://v4.apollo.vuejs.org/guide-composable/

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T18:12:14+09:00

Vue Composition API でVuex を用いずにデータの状態管理を行う方法

この記事では、Vue Composition API において、Vuex を用いないでデータの状態管理を行う方法について記事をまとめました。公式のドキュメントで詳しく記されていなかったのでこの記事で詳しく書いていきたいと思います。

Vuex について

Vuex は、Vue.js でグローバルでのデータの状態管理を行うことができるライブラリです。Vuex は、これまで props、emit を利用した親子間のコンポーネントでの状態管理の複雑さを解消するために用いられてきました。このライブラリにより、どのコンポーネントからでも状態にアクセスしたり、アクションを実行することができます。

Vuex を使用するにあたっての弊害

しかしながら、Vuex を使用するにあたって次の問題が挙げられました。

TypeScript との相性が悪い

アーキテクチャが複雑で手軽に扱うことが難しい

コンポーネントをテストを行うことが難しい

こういった課題を解決するために、Vue.js の2.2 以降に provide、inject といったDI を行うことができる関数が追加されました。

Vue Composition API でも、provide, inject 関数が用意されており、このライブラリを利用してお手軽かつグローバルな状態管理を行うことができます。

Provide / Inject を用いて状態管理する方法　

今回使うにあたり、使用したライブラリは以下の通りです。

nuxt : 2.0.0

@nuxt/typescript-build : 0,6,0

@vue/composition-api : 0.6.3

ここでは、Nuxt.js　でプロジェクトの立ち上げ方やVue Composition API の導入方法については省略します。

まず、Vue Composition API が使えるように設定します。
/plugins/composition.ts
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
続いて、/compositions ディレクトリを用意して状態を定義します。
/compositions/index.ts
import { reactive, toRefs, InjectionKey } from '@vue/composition-api'

// interface で型を定義している
import { StateInterface, UserInterface } from '~/interfaces'

export const useGlobalState = () => {
  const globalState = reactive<StateInterface>({
    userState: {
      id: '',
      name: '',
      email: '',
    }
  })

  const setUserState = (stateValue: UserInterface) => {
    globalState.userState = stateValue
  }

  return {
    // toRefs を使って外部のファイルにエクスポートできるようにします。
    ...toRefs(globalState),
    setUserState
  }
}

// provide で使用するキーを設定します。次のように設定することで、inject で注入された　State に型を渡すことができます。
type GlobalStateType = ReturnType<typeof useGlobalState>
export const GlobalStateKey: InjectionKey<GlobalStateType> = Symbol(
  'GlobalState'
)
親コンポーネントで provide を設定

先ほど定義した状態をグローバルで使えるようにするために設定します。
Nuxt.js であれば、/layouts/default.vue にで設定を行います。

また、Vue composition API は setup() 内でしか使用することができないため、Nuxt.js の middleware で使用することができませんでした。今後この部分の仕様が随時変更されると思いますが、認証周りはこの/layouts/default.vue 内で定義したほうがいいと思います。
/layouts/default.vue
<template>
  // 省略
</template>

<script lang="ts">
// For Accounts Only

import {
  defineComponent,
  SetupContext,
  provide,
  inject
} from '@vue/composition-api'

import jwtDecode from 'jwt-decode'
import Headers from '@/components/organisms/header/Headers.vue'
import { UserInterface } from '~/interfaces'
import { OauthUserInterface } from '~/interfaces/user'
import { useGlobalState, GlobalStateKey } from '@/compositions'

export default defineComponent({
  components: {
    Headers
  },
  setup(props: any, { root }: SetupContext) {
    provide(GlobalStateKey, useGlobalState()
    // 親コンポーネントでも inject を使って、状態の読み込み、書き込みを行うことができます。

    const state = inject(GlobalStateKey)
    if (!state) {
      throw new Error('NO Global Key')
    }
     // 次のようにしないと値が読み取れません。
    if (state.userState.value.id === '') {
      const parsedUserInfo: UserInterface = {
        id: '143562',
        name: 'example',
        email:'fuga@example.com',
      }
      state.setUserState(parsedUserInfo) 
    }
  }
})
</script>
上記のように、injectは、provide が定義された後であれば親コンポーネント内でも使用することができます。また、データの状態は、 'GlobalState' のキーを持つ provide 内のオブジェクトで管理されているため、値の読み込みや書き込みには、上記のコードのようにstate.setUserState() とする必要があります。

子コンポーネントでinject を利用してState を呼び出す

続いて、inject を利用して、先ほど親で定義した状態を子コンポーネントから呼び出し、利用できるようにします。

例えば、先ほどの個人情報を子コンポーネントである /pages/index.vue より呼び出します。
pages/index.vue
<template>
  <div>
   <v-row align="center" justify="center">
    <v-col cols="8" sm="9" xl="10">
      <v-card-title>
        {{ props.userName }}
      </v-card-title>
      <v-card-subtitle> @{{ props.userId }} </v-card-subtitle>
      <v-card-subtitle> @{{ props.email }} </v-card-subtitle>
    </v-col>
  </v-row>

  </div>
</template>
<script lang="ts">
import { defineComponent, inject } from '@vue/composition-api'
import { GlobalStateKey } from '@/compositions'

export default defineComponent({
  name: 'Settingwindow',

  setup() {
    const userState = inject(GlobalStateKey)
    if (!userState) {
      throw new Error(`${GlobalStateKey} is not provided`)
    }
    // userState.userState としないと値が読み取られません。
    console.log('state', userState.userState)
    return {
      userState: userState.userState
    }
  }
})
</script>
以上のようにして、Vuex を用いないでグローバルにデータの状態管理を行うことができました。

最後に

Vue Composition API では、確かに関数ベースでよりシンプルに状態管理を行うことができました。それでも、Vuex のようなFlux をベースとしたライブラリを利用すれば、よりクリーンなアーキテクチャを構築することができます。大規模な開発になっていくのであれば、Vuex を用いたものに書き換えていくほうがいいです。

次の記事のように、Nuxt.js と　Composition APIでVuexのデータの状態をReactiveに使ってみる例もあります。
https://qiita.com/tubone/items/f5c7e8e79e21b051eec4

現在（2020/7/31）では、Vuex がVue Composition API に対応していませんが、今後対応されるのを期待しましょう。

参考文献

https://qiita.com/tmy/items/a545e44100247c364a71

https://composition-api.vuejs.org/api.html#dependency-injection

https://vuex.vuejs.org/ja/

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T18:12:14+09:00

Vue Composition API でprovide , inject を用いたデータの状態を管理する方法

この記事では、Vue Composition API で用意されているprovide, inject を使って、Vuex を用いないデータの状態管理について記事をまとめました。公式のドキュメントで詳しく記されていなかったので、この記事で詳しく書いていきたいと思います。

Vuex について

Vuex は、Vue.js でグローバルでのデータの状態管理を行うことができるライブラリです。Vuex は、これまで props、emit を利用した親子間のコンポーネントでの状態管理の複雑さを解消するために用いられてきました。このライブラリにより、どのコンポーネントからでも状態にアクセスしたり、アクションを実行することができます。

Vuex を使用するにあたっての弊害

しかしながら、Vuex を使用するにあたって次の問題が挙げられました。

TypeScript との相性が悪い

アーキテクチャが複雑で手軽に扱うことが難しい

コンポーネントをテストを行うことが難しい

こういった課題を解決するために、Vue.js の2.2 以降に provide、inject といったDI を行うことができる関数が追加されました。

Vue Composition API でも、provide, inject 関数が用意されており、このライブラリを利用してお手軽かつグローバルな状態管理を行うことができます。

Provide / Inject を用いて状態管理する方法　

今回使うにあたり、使用したライブラリは以下の通りです。

nuxt : 2.0.0

@nuxt/typescript-build : 0,6,0

@vue/composition-api : 0.6.3

ここでは、Nuxt.js　でプロジェクトの立ち上げ方やVue Composition API の導入方法については省略します。

まず、Vue Composition API が使えるように設定します。
/plugins/composition.ts
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
続いて、/compositions ディレクトリを用意して状態を定義します。
/compositions/index.ts
import { reactive, toRefs, InjectionKey } from '@vue/composition-api'

// interface で型を定義している
import { StateInterface, UserInterface } from '~/interfaces'

export const useGlobalState = () => {
  const globalState = reactive<StateInterface>({
    userState: {
      id: '',
      name: '',
      email: '',
    }
  })

  const setUserState = (stateValue: UserInterface) => {
    globalState.userState = stateValue
  }

  return {
    // toRefs を使って外部のファイルにエクスポートできるようにします。
    ...toRefs(globalState),
    setUserState
  }
}

type GlobalStateType = ReturnType<typeof useGlobalState>
export const GlobalStateKey: InjectionKey<GlobalStateType> = Symbol(
  'GlobalState'
)
このとき、InjectionKey を上記のように設定したのは、以下のような型が定義されているためです。
interface InjectionKey<T> extends Symbol {
}
declare function provide<T>(key: InjectionKey<T> | string, value: T): void;
declare function inject<T>(key: InjectionKey<T> | string): T | undefined;
declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T;
provide や inject のキーは string 型 で定義することもできますが、InjectKey<T> を利用して型を設定してあげることで、inject で注入された変数に型の注釈を与えることができます。

親コンポーネントで provide を設定

先ほど定義した状態をグローバルで使えるようにするために設定します。
Nuxt.js であれば、/layouts/default.vue にで設定を行います。

また、Vue composition API は setup() 内でしか使用することができないため、Nuxt.js の middleware で使用することができませんでした。今後この部分の仕様が随時変更されると思いますが、認証周りはこの/layouts/default.vue 内で定義したほうがいいと思います。
/layouts/default.vue
<template>
  // 省略
</template>

<script lang="ts">
// For Accounts Only

import {
  defineComponent,
  SetupContext,
  provide,
  inject
} from '@vue/composition-api'


import { UserInterface } from '~/interfaces'
import { OauthUserInterface } from '~/interfaces/user'
import { useGlobalState, GlobalStateKey } from '@/compositions'

export default defineComponent({

  setup(props: any, { root }: SetupContext) {
    provide(GlobalStateKey, useGlobalState()
    // 親コンポーネントでも inject を使って、状態の読み込み、書き込みを行うことができます。

    const state = inject(GlobalStateKey)
    if (!state) {
      throw new Error('NO Global Key')
    }
     // 次のようにしないと値が読み取れません。
    if (state.userState.value.id === '') {
      const parsedUserInfo: UserInterface = {
        id: '143562',
        name: 'example',
        email:'fuga@example.com',
      }
      state.setUserState(parsedUserInfo) 
    }
  }
})
</script>
上記のように、injectは、provide が定義された後であれば親コンポーネント内でも使用することができます。また、データの状態は、 'GlobalState' のキーを持つ provide 内のオブジェクトで管理されているため、値の読み込みや書き込みには、上記のコードのようにstate.setUserState() とする必要があります。

子コンポーネントでinject を利用してState を呼び出す

続いて、inject を利用して、先ほど親で定義した状態を子コンポーネントから呼び出し、利用できるようにします。

例えば、先ほどの個人情報を子コンポーネントである /pages/index.vue より呼び出します。
pages/index.vue
<template>
  <div>
   <v-row align="center" justify="center">
    <v-col cols="8" sm="9" xl="10">
      <v-card-title>
        {{ props.userName }}
      </v-card-title>
      <v-card-subtitle> @{{ props.userId }} </v-card-subtitle>
      <v-card-subtitle> @{{ props.email }} </v-card-subtitle>
    </v-col>
  </v-row>

  </div>
</template>
<script lang="ts">
import { defineComponent, inject } from '@vue/composition-api'
import { GlobalStateKey } from '@/compositions'

export default defineComponent({
  name: 'Settingwindow',

  setup() {
    const userState = inject(GlobalStateKey)
    if (!userState) {
      throw new Error(`${GlobalStateKey} is not provided`)
    }
    // userState.userState としないと値が読み取られません。
    console.log('state', userState.userState)
    return {
      userState: userState.userState
    }
  }
})
</script>
以上のようにして、Vuex を用いないでグローバルにデータの状態管理を行うことができました。

最後に

Vue Composition API では、確かに関数ベースでよりシンプルに状態管理を行うことができました。それでも、Vuex のようなFlux をベースとしたライブラリを利用すれば、よりクリーンなアーキテクチャを構築することができます。大規模な開発になっていくのであれば、Vuex を用いたものに書き換えていくほうがいいです。

次の記事のように、Nuxt.js と　Composition APIでVuexのデータの状態をReactive に使う例もあります。

https://qiita.com/tubone/items/f5c7e8e79e21b051eec4

現在（2020/7/31）では、Vuex がVue Composition API に対応していませんが、今後対応されるのを期待しましょう。

参考文献

https://qiita.com/tmy/items/a545e44100247c364a71

https://composition-api.vuejs.org/api.html#dependency-injection

https://vuex.vuejs.org/ja/

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T17:31:44+09:00

【Nuxt.js】Nuxt文法編：fetch

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

前置き

非同期通信に使えるfetchをご紹介?

APIからデータを取得する方法は2つ！
fetch
asyncData

2つの違いについても解説しました??‍?

⬇️asyncDataの記事はこちら
https://wp.me/pc9NHC-ut

asyncDataとの違い

値のセット先が違う

asyncData：直接コンポーネントにセット
fetch：Vuexのstoreに格納?

呼び出されるタイミングが違う

asyncData：インスタンス作成前
fetch：インスタンス作成後

The Nuxt.js fetch hook is called after the component instance is created on the server-side: this is available inside it.

https://ja.nuxtjs.org/guides/features/data-fetching/

【翻訳】
Nuxt.jsフェッチフックは、
サーバー側でコンポーネントインスタンスが
作成された後に呼び出されます。
これは、その内部で使用できます。

違いはこれくらいです！
他はほとんど変わりません?

基本的にはasyncDataと同じ

使い方・書き方

asyncDataとほとんど一緒です?
Promiseを返すか
async/awaitを使うかです?
詳しい書き方はasyncDataの記事をご覧ください?

thisが使えない

thisを通してコンポーネントのインスタンスに
アクセスすることができません?

使用箇所

pages内コンポーネントのみ使用可能

fetch

fetchとは

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T15:56:24+09:00

Vite触ってみた

Viteとは？

Vue.js生みの親Even You氏が開発したノーバンドルなビルドツールです。

従来のVueだと、単一ファイルコンポーネント.vueはwebpack等といったバンドラーでの処理が必要で、それが動作の低下を引き起こしてました。

ViteはネイティブESモジュールのインポートを介したバンドル不要のdevサーバーを持っており、従来の環境よりも高速な実行環境が提供されます。
また、ビルド環境もrollup.jsをベースとしているのでこれも従来より高速となっているようです。

webpackとRollup：似て非なるもの

メリット

バンドル処理がないため、初回起動、また開発中の更新処理が非常に高速です

コードのコンパイルは変更された部分にのみ適用されます、従来は変更したらアプリ全体がバンドルされ、処理が終わるのを待つ必要がありました。大規模アプリでは大きな高速化が見込めます

HMRのパフォーマンスはモジュールの総数から切り離されるので、アプリの大きさに関係なく一貫した高速さを維持します

デメリット

今現在はVue3.0のみに対応しています。Vue3.0に対応していないライブラリも使用はできません

ESインポートは深い構造になるため、全体のリロードはバンドラーベースよりも遅くなる場合があります。しかしこれはローカル環境のみでのことで、コンパイル済みのファイルはメモリにキャッシュされるためページリロードにコンパイルコストはかかりません

How and Why

Viteでプロジェクトを作ってみる

npm、yarn両方での使用が可能ですが、今回はnpmを使用します
$ npm init vite-app <project-name>
これでプロジェクトの作成は完了です。
あとは依存するモジュールをインストールすれば起動ができます
$ cd <project-name>
$ npm install
$ npm run dev
プロジェクトをビルドする

ビルドするにはNodeのバージョンを12以降にする必要があります

Vite - zlib_1.brotliCompressSync is not a function
$ npm run build
構成
ディレクトリ構造はこのようになっています
.
├── node_modules
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js
index.html以外は通常のvueプロジェクトの構成と変わりません。
package.json
{
  "name": "vite-sample",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-rc.1"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.1",
    "@vue/compiler-sfc": "^3.0.0-rc.1"
  }
}
初期の依存モジュールはviteと@vue/compiler-sfcだけの非常にシンプルなものとなっており、起動もviteを通したものとなっています。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>
viteで作ったプロジェクトはindex.htmlからmain.jsをインポートしています。
main.js以降の流れは通常のvueと変わりません。

index.htmlからmoduleタイプとしてmain.jsをインポート

main.js内でApp.vueをcreateAppし、#app(id="app")としてマウント

App.vueから子コンポーネントなどをインポート

続き - ViteとVue CLIで作ったVue3プロジェクトのパフォーマンス比較

別記事で書きたいと思います

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T11:28:33+09:00

NUXTのサブコンポーネント内で非同期データを扱うと描画がめちゃ遅くなる

描画がめちゃおそになったのでメモ。

NUXTの子コンポーネント内で非同期データを扱うには2通りの方法があるそうな。

https://ja.nuxtjs.org/faq/async-data-components/

mounted() フック内に API コールを作成し、ロード時に data プロパティをセットすること。マイナスな側面: サーバーサイドレンダリングでは機能しません

この方法を試してみたところ、データを取得してからDOMの描画が行われるためか、描画がめちゃ遅くなる。
generateでもデータ読み込むとこだけ遅れて描画される。

参考
https://www.kimullaa.com/entry/2019/12/01/132724
<template>
  <ul>
    <template v-for="item in result">
      <template v-if="item.sectionsKey === 1">
        <li>
          <div><nuxt-link :to="item.url">{{ item.pages }}</nuxt-link></div>
          </div>
        </li>
      </template>
    </template>
  </ul>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return{
      result: ''
    }
  },
  created() {
    this.asyncData()
  },
  methods: {
    asyncData() {
      axios.get('https://script.google.com/macros/s/id/exec')
      .then((res) => {
        this.result = res.data
      })
    }
  }
}
</script>
2つめの方法の方がいい

ページコンポーネントの asyncData() または fetch() メソッド内に API コールを作成し、データを props としてサブコンポーネントへ渡すこと。この方法ではサーバーサイドレンダリングでもうまく機能します。マイナスな側面: ページ内 asyncData() または fetch() が他のコンポーネントのデータをロードするため、可読性が落ちるかもしれません。

これもSSRだといちいち通信が走るので描画が遅くなるけど、generateすると関係ないので、generate前提であればこれでいいかも。
oya.vue
<template>
  <directive :jsonData="result">
</template>

<script>
import axios from "axios"

export default {
async asyncData({ $axios }) {
    //jsonデータを取得
    const url = 'https://script.google.com/macros/s/id/exec';
    const response = await $axios.$get(url);
    return { result: response }
  }
}
</script>
ko.vue
<template>
  
  {{ jsonData }}
</template>
<script>
export default {
  props:['jsonData']
}
</script>

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T11:18:28+09:00

Vueでパスワード確認用入力欄のバリデーションをしようと思ったけどそもそもパスワード確認はオワコンだった

これはなに

オワコンは言い過ぎかもしれません。
パスワード確認用入力欄はいらないのかもしれないというメモです。

パスワード確認用入力欄とは？

パスワード確認用入力欄とは、以下のようなフォームのことを指してます。

ユーザーの登録フォームなどにあって、
パスワードを2回入力することでパスワードの入力ミスを防ぐための入力欄です。

経緯

今回、弊社プロダクトのユーザーの登録フォームをNuxtに置き換えることになり、VeeValidateというバリデーションパッケージを使ってパスワードの入力確認のバリデーションを実装する必要が出ました。

そこで、参考のために他サイトでの「パスワード確認用入力欄」の動きを見てみたのですが、Facebook、Yahoo、Qiita、Green,Teratailなどのサイトを見ても「パスワード確認用入力欄」が見つかりません。
（Appleはパスワード確認用入力欄がありました）

自分の普段のウェブ利用について考えると、他サイトを登録した時にパスワードを間違って登録したとしても、
すぐにパスワード再発行することで対応していることに気づきました。

もしかして、「パスワード確認用入力欄」はいらないのでは？

パスワード確認用入力欄はいるか？

パスワード確認用入力欄は、パスワードの入力ミスを気づかせ、間違ったパスワードでユーザー登録してしまうのを防ぐものです。
間違ったパスワードでユーザー登録してしまうと、パスワードの再発行をしなければなりません。
パスワードの再発行は手間ですよね。
その点では、パスワード確認用入力欄は、ユーザーの手間を減らすことができているといえるでしょう。

しかし、以下の問題があります。

パスワードを2回打ち間違えると意味がない

パスワードを2回打たなければならない

パスワード不一致でパスワードを再度入力しなくてはいけない（どこで間違ったかわからないため）

入力欄が1つ多くなるので、入力欄の数の多さを見て離脱してしまう確率があがる

あまりユーザーの手間を減らせているとは思えません。
登録フォームのUXがよくなければ、そこで離脱されてしまいます。

他に、ユーザーの手間を減らす方法はあるでしょうか？

最近よく目にするのが、パスワード入力欄のマスクON/OFF機能です。
マスクをオフにすることで、自身が入力した文字列がなんなのかがわかります。

マスクOFF機能は、パスワード確認用入力欄と比較して以下のメリットがあります。

入力ミスに気づくことができる

2回入力しなくていい

入力欄が1つ減る

マスクOFF機能があれば、パスワード確認用入力欄と同じく、パスワードの入力ミスに気づくことができます。
入力欄がすっきりすれば、登録フォームでの離脱率も下がるはずです。

ABテストなどの検証をしたわけではないので、実際にユーザーにいいUXだと感じてもらえるかはわかりません。

個人的には、マスクOFFが好きです。
私は、パスワードがわからなくなったらパスワードの再発行をすればいいというタイプなので、
入力が一回で済むならそちらのほうがいいです。

まとめ

パスワード確認用入力欄は別にいらないんじゃないかという話でした。

参考

https://uxmilk.jp/18568
https://f-tra.com/ja/blog/column/4567
https://note.com/sadako_a_/n/n9abe75dce8ba
https://appleid.apple.com/account#!&page=create

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T04:35:16+09:00

Vue.jsのサービスワーカーにスクリプトを追加する

Vue.jsのサービスワーカーはVue CLIのPWAを追加するか、というところで追加した時に勝手についてくるやつで、GoogleのWorkboxというスクリプトを用いて、バックグラウンドでオフライン作業できるように色々やってくれるやつです。
まあとにかく、サービスワーカーでやりたいことはもっと他にもあるわけで、そのスクリプトを書いて挿入するにはどうしたらいいか？という事です。

vue.config.jsに以下の設定を追加します。
module.exports = {
  pwa: {
    workboxOptions: {
      importScripts: '/swlib.js'
    }
  }
}
この後、publicディレクトリにswlib.jsを入れることで

キャッシュの問題

WebPackではファイル名をハッシュ値などで書き換えることでキャッシュの問題をクリアしてくれる便利な機能がありますが、importScriptsViaChunksで利用できるようになるのはvue.jsのプラグインの問題でまだできないようです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T02:39:01+09:00

Vue.js の Composition API における this.$refs の取得方法

Vue.js でテンプレート内の DOM 要素や子コンポーネントの参照は、旧来の Options API だと this.$refs で取得できました。
では、Composition API ではどうなっているのでしょうか。

答えは公式サイトに書いてあります。
公式サイトより引用
<template>
  <div ref="root"></div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div/>
      })

      return {
        root
      }
    }
  }
</script>
ref 関数で作った変数（上記の場合は root）をテンプレート内の要素の ref 属性に与えます。
初回レンダリング後（onMounted のタイミング）、変数の value プロパティに DOM 要素の参照が代入される、という流れです。

TypeScript で型をつける

さて、このまま終わってしまうのも味気ないので TypeScript ではどう書くのか見ていきましょう。
Vite で作ったプロジェクトをベースにして検証しました。¹

DOM 要素の場合
<template>
  <img ref="imgRef" alt="Vue logo" src="./assets/logo.png" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  setup() {
    const imgRef = ref<HTMLImageElement>() // 1: 型を指定

    console.log(imgRef.value) // 2: undefined が出力される

    onMounted(() => {
      console.log(imgRef.value) // 3: <img>
      console.log(imgRef.value?.clientHeight) // 4: 0 が出力される

      imgRef.value?.addEventListener('load', () => {
        console.log(imgRef.value?.clientHeight) // 5: 200 が出力される
      })
    })

    return { imgRef }
  },
})
</script>
ref 関数は引数なしの場合、ジェネリクスで指定した型と undefined のユニオンになります。²
すなわち上記の場合は Ref<HTMLImageElement | undefined> 型です。

レンダリング前は undefined です。

レンダリング後だと img 要素の参照が取得できます。

この時点では画像データはまだ読み込まれていないので高さは 0 です。
また、imgRef.value は HTMLImageElement | undefined 型なので、?. を使用しています。気になる場合は if (!imgRef.value) return などを書いて、undefined の可能性を除外してしまいましょう。

画像が読み込まれると、正しいサイズが取得できます。

コンポーネントの場合
<template>
  <HelloWorld ref="componentRef" msg="Hello Vue 3.0 + Vite" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  components: {
    HelloWorld,
  },
  setup() {
    const componentRef = ref<InstanceType<typeof HelloWorld>>() // 1: 型を指定

    onMounted(() => {
      if (!componentRef.value) return // 型から undefined をなくす

      console.log(componentRef.value) // 2: Proxy {…}

      console.log(componentRef.value.$el) // 3: #text

      console.log(componentRef.value.msg) // 4: Hello Vue 3.0 + Vite
      console.log(componentRef.value.count) // 5: 0

      componentRef.value.count++ // 6: バッドプラクティス！
      console.log(componentRef.value.count) // 1 （増えている）
    })

    return { componentRef }
  },
})
</script>
コンポーネントの実態はコンストラクタなので、このような型になります。

インスタンスの Proxy オブジェクトが入っています。

Vue 3 ではテキストノード（<template> 開きタグと最初の DOM 要素の間）になります。³

props のプロパティが直接生えており、値が取得できます（componentRef.value.$props.msg でも同じ）

data も同様です（componentRef.value.$data.count でも同じ）

外から data の値を変えることもできてしまいますが、大変危険なのでやめましょう。

まとめ

以前にくらべると少し手間は増えましたが、型の恩恵を受けるためなので仕方ないですね。⁴

今までコンポーネント ref はほとんど使っていませんでした。唯一使いそうな $el がテキストノードに変更されてしまい、さらに使いどころが分からなくなりました。誰か教えて下さい。

参考になるか分かりませんが、リポジトリはこちら https://github.com/jay-es/composition-api-refs ↩

tsconfig.json で "strictNullChecks": true にしている場合("strict": true でも OK)。
false になっていると | undefined にはなりません。 ↩

Vue 2 + @vue/composition-api の頃はコンポーネント全体の DOM 要素が取得できました。
テンプレートのルートに複数の要素を置けるようになったことが関係していると思われます。 ↩

実は Vue 2 + @vue/composition-api の場合、setup 関数の第二引数に refs が生えています。なんとなく理由は分かりますよね。
ただし、型情報には存在しないため as などでごまかさないといけないのでオススメできません。 ↩

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:47:25+09:00

【Vueですぐに使える】CSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

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

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する



【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で中央配置

コードを確認する



【Web制作に最適】背景を重ねるCSS画像アニメーション４選

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

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する



【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

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

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する



マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

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

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する



transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

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

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:47:25+09:00

【初心者はまず見て】Vueでもすぐに使えるCSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

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

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する



【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で中央配置

コードを確認する



【Web制作に最適】背景を重ねるCSS画像アニメーション４選

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

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する



【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

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

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する



マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

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

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する



transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

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

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:47:25+09:00

【初心者はまず見て】Vueですぐに使えるCSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

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

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する



【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で中央配置

コードを確認する



【Web制作に最適】背景を重ねるCSS画像アニメーション４選

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

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する



【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

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

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する



マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

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

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する



transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

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

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:33:44+09:00

【CSSの本気見せます】世界に一つしかない完全オリジナルのCSSアニメーション５５選（現役Vueエンジニア実装）

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

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

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

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

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

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

１. 複数のtransform×transitionでつくるCSSスライダーアニメーション３選【未経験でもOK】

filterプロパティの応用、transform:translateの移動エフェクト、skewの傾斜エフェクト、scaleの拡大エフェクト、rotateの回転エフェクトで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

２. transform:translate&skewで絵画のスライドショーを実現！CSSスライダーアニメーション３選

。filterプロパティの応用、transform:translateの移動エフェクトとskewの傾斜エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

３. transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

filterプロパティの応用、transform:translateの移動エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

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

４. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

５. filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

６. コピペだけで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でシンプルな文字付きスライダーをコピペのみで導入する方法

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

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:33:44+09:00

【非エンジニアとは言わせない】世界に一つしかない完全オリジナルのCSSアニメーション５５選（現役Vueエンジニア実装）

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

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

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

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

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

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

１. 複数のtransform×transitionでつくるCSSスライダーアニメーション３選【未経験でもOK】

filterプロパティの応用、transform:translateの移動エフェクト、skewの傾斜エフェクト、scaleの拡大エフェクト、rotateの回転エフェクトで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

２. transform:translate&skewで絵画のスライドショーを実現！CSSスライダーアニメーション３選

。filterプロパティの応用、transform:translateの移動エフェクトとskewの傾斜エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

３. transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

filterプロパティの応用、transform:translateの移動エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

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

４. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

５. filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

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

６. コピペだけで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でシンプルな文字付きスライダーをコピペのみで導入する方法

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

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

　 Tweet
Qiitaで続きを読む