投稿日：2020-10-12T21:38:57+09:00

【vue.js】画像の遅延読み込みを実現する為にvue-lazyloadで導入してみた

実務でフロントのパフォーマンス改善を仰せつかり、
試行錯誤する中で、学習の一環で個人アプリにvue-lazyloadと言うライブラリを導入してみた。

他にもいくつかvueでLazyLoad出来るライブラリがあるので、後日そっちも試してみたい。

Lazy Load

Lazy Loadとは、画像やiframeなどコンテンツがブラウザの表示領域内に存在するものだけをロードし、領域外のコンテンツはロードしないことで、画面表示を高速化する仕組みのことです。

環境

vue.js 2.6.12
vue-lazyload 1.3.3

実装

まずはライブラリをインストールします。
$ npm install vue-lazyload -D
CDNでもOKです。
<script src=”https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
エントリーポイントでインポートして必要に応じてオプションを設定しておきます。
app.js
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: // 事前ロードする高さの割合指定
  error: //エラー時に表示する画像指定する
  loading: // ロード中に表示する画像指定する
  attempt: // ロード失敗した時のリトライの上限指定
  listenEvents: // 遅延読み込みを起動するためのイベント
  adapter: // 要素の属性を動的に切り替えたい時に使用
  filter: // 画像を動的に切り替えたい時に使用
  throttleWait: // 遅延の待機時間
})
Lazy Loadさせたいimg要素にv-lazyディレクティブ的なもので画像パスを措定するだけと簡単です。
card.vue
<li v-for="item in items" :key="item">
  <img class="card-main-img" v-lazy="item.imageUrl">
</li>
実装イメージ。
分かりづらいですが、ロード中の画像にNoImageを設定しています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-12T21:38:57+09:00

【vue.js】画像の遅延読み込みを実現する為にvue-lazyloadを導入してみた

実務でフロントのパフォーマンス改善を仰せつかり、
試行錯誤する中で、学習の一環で個人アプリにvue-lazyloadと言うライブラリを導入してみた。

他にもいくつかvueでLazyLoad出来るライブラリがあるので、後日そっちも試してみたい。

Lazy Load

Lazy Loadとは、画像やiframeなどコンテンツがブラウザの表示領域内に存在するものだけをロードし、領域外のコンテンツはロードしないことで、画面表示を高速化する仕組みのことです。

環境

vue.js 2.6.12
vue-lazyload 1.3.3

実装

まずはライブラリをインストールします。
$ npm install vue-lazyload -D
CDNでもOKです。
<script src=”https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
エントリーポイントでインポートして必要に応じてオプションを設定しておきます。
app.js
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: // 事前ロードする高さの割合指定
  error: //エラー時に表示する画像指定する
  loading: // ロード中に表示する画像指定する
  attempt: // ロード失敗した時のリトライの上限指定
  listenEvents: // 遅延読み込みを起動するためのイベント
  adapter: // 要素の属性を動的に切り替えたい時に使用
  filter: // 画像を動的に切り替えたい時に使用
  throttleWait: // 遅延の待機時間
})
Lazy Loadさせたいimg要素にv-lazyディレクティブ的なもので画像パスを措定するだけと簡単です。
card.vue
<li v-for="item in items" :key="item">
  <img class="card-main-img" v-lazy="item.imageUrl">
</li>
実装イメージ。
分かりづらいですが、ロード中の画像にNoImageを設定しています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-12T19:24:17+09:00

（１）Vue + Vuetify でローカル開発環境をセットアップ

この記事は

Vue、Vuetifyを使って、Vueの機能の確認を簡単に行う方法を説明した記事です。（VuetifyはVueをベースにしたUIライブラリです。）
HTML、CSS、コマンドラインの使い方（Windowsのコマンドプロンプト、MacのTerminal）はある程度理解していることが前提です。

開発環境は以下の通りです。（バージョンは2020年9月時点の最新です）

Vue: 2.6.12

Vue CLI (command line interface): 4.5.6

Vuetify: 2.3.10

Node.js : 6.14.6

Windows10 or MacOS

開発環境のセットアップ

以下のソフトウェアを順番にインストールします。Vue, Vuetifyは、npmを使ってインストールしますので、先に、Node.js環境のインストールが必要となります。

1. Node.jsのインストール

Node.jsをダウンロードします。インストーラをダウンロードし、全てデフォルトのままインストールします。
インストールが終了したら、Windowsの場合、スタートメニューから、"Node.js command prompt" を選択して、以下のコマンドを入力し、npmのバージョンが表示されたらOKです。Macの場合は、Terminalからコマンドを入力してください。

> npm -version

バージョンが表示されたら、OKです。
6.14.6
2. Vue ＋ Vue CLIのインストール

次にVueをダウンロードしてインストールします。Windows10環境の場合、"Node.js command prompt"から以下のコマンドを入力します。
Macの場合は、Terminalから同じコマンドを入力します。Macの場合は、セキュリティの関係でsudoを付けてコマンドを実行しないとエラーが表示されることがあります。その場合は、"Vue-CLIのインストール方法（Mac版）"を参照ください。

インターネットへの接続にプロキシサーバが設置されている場合は、npmにプロキシの設定が必要となるので注意が必要です。
インストール後にバージョンを表示して確認します。

> npm install -g vue
> npm install -g @vue/cli
> vue --version

バージョンが表示されます。
@vue/cli 4.5.6
Vueでプロジェクトを作成

以上で開発環境のインストールは終了です。
では、ここから実際にVueのアプリケーション（テンプレート）の作成に入ります。
アプリケーションを保存するためのに、適当なディレクトリを作成します。ここでは、ホームディレクトリに testというディレクトリを作成し、そのディレクトリに移動して作業をしますが、作成する作業ディレクトリはどこにおいても構いません。

> mkdir test
> cd test

testディレクトリの下に、test001という最初のアプリケーションを作成します。以下のコマンドで、test001というディレクトリが作成され、関係するファイルは、全てtest001のディレクトリの下に作成されます。

> vue create test001

プロジェクトの作成方法の選択画面が表示されます。
Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features
Defaultを選択してreturnを押します。そうすると、必要なモジュールのダウンロードが始まり、最後に以下のように表示されたら、プロジェクトの作成は成功です。
...
?  Successfully created project test001.
?  Get started with the following commands:
 $ cd test001
 $ npm run serve
表示されている通り、コマンドプロンプトあるいはTerminalから以下のコマンドを入力します。

> cd test001
> npm run serve

これで、ローカルで開発用のサーバが起動します。起動したら、ブラウザから、localhost:8080にアクセスして確認します。

上記のVueのページが表示されたら成功です。
ローカルのPC上でWebサーバが起動しているだけなので、インターネットからはアクセスできません。

Vuetify

次に、UIライブラリのVuetifyを組み込んでみます。Vuetifyの組み込み方は、Vueのプロジェクトを作ってから、そのプロジェクトに対して、VueCLIを使ってVuetifyのライブラリを追加する、という方法になります。

まず、新しいプロジェクト test002 を作成し、その ディレクトリに移動してから vuetifyを追加します。

> cd ..　（testディレクトリに移動します）
> vue create test002　（test002というディレクトリが作成されVueのテンプレートが作成されます）
> cd test002　（test002に移動します）
> vue add vuetify

vuetifyがインストールされた後、設定の選択をします。
...
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced) 
ここでは、Defaultを選択して、returnを押します。
ライブラリのダウンロードが始まり、最後に以下のようなメッセージが出力されたらOKです。
...
✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider
今は、作業ディレクトリが、test002のプロジェクトになっているはずなので、そのままローカルで開発用のWebサーバを起動します。

> npm run serve

localhost:8080にアクセスして確認します。今度は、以下のようにVuetifyの画面が表示されたら成功です。

まとめ

VueとVuetifyで、アプリケーションの開発環境の作成ができました。
次は、Visual Studio Code上でVueのプログラムを作成しながら、Vuetifyで何ができるかを見てみたいと思います。

（おまけ）Vue CLIについて

Vue CLIを使わなくても、他のJavascriptライブラリと同様に、<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>として読み込めば、Vueを使うことができ、覚えることが少ないので、私も最初はそこから始めました。ところが、ネットでの情報はCLIベースのインストールと、.vue の単一ファイルコンポーネントを前提とした説明の方が多くて、つまづいてしまいました。なので、最初からCLIと.vueファイル（単一ファイルコンポーネント）で学習を始めた方がスムーズだと私は思います。

（おまけ２）Vuetifyについて

Vuetifyは、いきなりモダンな感じのマテリアルデザインUIのアプリケーションが簡単に作れるUIライブラリです。プリミティブなVueだけでアプリケーションを開発することもできますが、Vuetifyを使えば、レスポンシブUIを実現するためのグリッドシステムや、ローディング中のプログレスバーを追加したり、テキストフィールドにアイコンを追加したり、ということが、Vuetifyだけで簡単にできてしまいます。
Vuetifyで実現されている範囲と、Vueでできることの範囲が分かりにくいと思うので、疑問に感じたら、それぞれのガイド（Vueガイド, Vuetifyガイド）を確認するのが良いかと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-12T18:47:23+09:00

Vue.js入門

Vue.jsを使う機会があったので、調べたことをまとめていきます。

Vue.jsとは、一言でいうとユーザーインターフェイスを構築するためのjavascriptフレームワークです。
開発者のEvan You氏はプログレッシブフレームワーク！という概念を提唱していて、その辺もう少し知りたい人は公式サイトとかこの辺を読んでみるといいかもしれません。
https://gihyo.jp/dev/serial/01/vuejs/0001?page=1

vueには様々なディレクティブ（独自の属性）が用意されていて、DOM操作やVue変数との同期などが行えます。
取り扱う情報は、双方向バインディングによってUI側からもスクリプト側からも動的に更新・描画することができます。

Vue.jsの特徴としてよく目にするのは、
・双方向バインディング
・軽量
・独自概念が少なく学習コストが低い
・再利用可能なコンポーネントやそのmixinによって効率よく作業できる
・仮想DOMによる高速レンダリング
といった感じで、ベンチマークとかは取ってませんが実際使ってみて早いなーという印象です。

この記事ではVue.jsの基本的な概念をまとめていきます。

インストール

https://jp.vuejs.org/

公式サイトから、アクセス -> 学ぶ -> ガイド -> インストール
と進んでCDNかnpmでインストールします。

jsfiddleを使うとサクッと試せるので、ちょっと触ってみたい人にはお勧めです。
https://jsfiddle.net/

vueの記述

基本的にはマークアップとスクリプトを分けて記述していきます。
jsfiddleで、以下のコードをそれぞれhtmlエリアとjavascriptエリアにコピペすると
jsfiddle_html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>　

<div id="demo">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
jsfiddle_javascript
new Vue({
  el: '#demo',
  data: {
    message: 'hello VueJS!'
  }
})
v-bind

HTMLタグの属性に対して、vueの変数やjavascriptで書いた式をセットします。

記入例）
jsfiddle_html
...


  <p>
    <a v-bind:href="url" >{{ url }}</a>  
  </p>


  <p>
    <a :href="url" >{{ url }}</a>  
  </p>

...
jsfiddle_javascript
new Vue({
  el: '#demo',
  data: {
    message: 'hello VueJS!',
    url: 'https://example.com'
  }
})
v-on

v-onディレクティブとイベント名、発火時に実行するメソッドを記述することで、イベントリスナーにイベントを登録できます。
jsfiddle_html
...

  
  
  <button v-on:click="doThis">click me</button>
  
  <input @keyup.13="onEnter">

...
jsfiddle_javascript
new Vue({
  el: '#demo',
  data: {
    message: 'hello VueJS!',
    url: 'https://example.com'
  },
  methods: {
    doThis(event) {
      alert('fire!')
    }
  }
})
v-onのイベント修飾子

event.stopPropagation() → v-on:event名.stop

イベントの伝搬（バブリング）を防ぐstopPropagation()を簡単に記述できる修飾子が用意されている。
html
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p v-on:mousemove="changeMousePosition($event, 10)">マウスをのせてください
  <span v-on:mousemove.stop>ここは反応しません</span></p>
  <p>X:{{x}}, Y:{{y}}</p>
</div>
...
script
...
new Vue({
  el: '#app',
  data: {
    message: "example",
    x: 0,
    y: 0
  },
  methods:{
    changeMousePosition(event, devideNumber) {
      this.x = event.clientX / devideNumber;
      this.y = event.clientY / devideNumber;
    }
  }
})
...
event.preventDefault() → v-on:event名.prevent

上記と同じ要領で.prevent修飾子を付けるとイベントオブジェクトに対してpreventDefault()してくれる。

v-onのキー修飾子
jsfiddle_html
...

  
  <input @keyup.13="onEnter">

...
jsfiddle_javascript
new Vue({
  el: '#demo',
  data: {
    message: 'hello VueJS!',
    url: 'https://example.com'
  },
  methods: {
    doThis(event) {
      alert('fire!')
    },
    onEnter(event) {
      alert('keyup!')
    }
  }
})
v-model

双方向バインディングを実装するためのディレクティブv-modelを見ていきます。
スクリプト側でexampleという文字列が入ったmessage変数を宣言しています。
input要素のv-modelディレクティブにmessageを指定し、入力欄の値を削っていくと、
h1要素の内容も変化するのが分かります。
html
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="message">
  <h1>{{ message }}</h1>
</div>
...
script
...
new Vue({
    el: '#app',
  data: {
    message: "example"
  }
})
...
また追記していきます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-12T14:14:11+09:00

映画情報を取得できるTMDb API　画像（poster_path）のサイズは、決まっていた！！

はじめに

TMDbのAPIを使って、映画アプリを開発していおります。
Vue 映画情報をTMDb APIを使って取得
※この記事のコードは、全て上記のページを元にしています

このAPIを使えば、こんな感じで映画を取得する事ができます。

で、この映画のポスター画像なんだが、、どうもサイズの扱いが難しく思い通りにできなかった。。

その記録をここに残す。

ポスター画像の大きさを変えるには

https://developers.themoviedb.org/3/getting-started/images
ドキュメント

http://image.tmdb.org/t/p/w300/
画像のURLの中にあるw300の部分を変更すると、画像サイズは変更できる。

で、ここから本題となるのだが、この画像サイズ変更がなかなかうまくいかないのである。。

width100%にしてみる
<v-img v-bind:src="'http://image.tmdb.org/t/p/w100%/' + movie.poster_path"></v-img>
w100%にした場合、ポスター画像は表示されない。。。
何も表示されない！

width150にしてみる
<v-img v-bind:src="'http://image.tmdb.org/t/p/w150/' + movie.poster_path"></v-img>
w150にした場合、ポスター画像は表示されない。。。
何も表示されない！

あれ？でもw300なら表示されてたよね？？なんでw150なら何も表示されないの？

サイズは決まっている

https://www.themoviedb.org/talk/5aeaaf56c3a3682ddf0010de

どうやらサポートされている画像サイズは決まっているようで、上記のサイズ以外を指定しても何も表示されないらしい。。。

なので、poster画像の場合w150では表示されず、w154では正常に表示されたのである！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-12T00:49:20+09:00

【Vue】v-if,v-forを分離するために【メモ】

v-if, v-for分離前（VueCLIだとエラーになる）

<span class="project-title">{{project.title}}</span>

<div
  class="project" 
  :key="project.title" 
  v-for="project in projects" 
  v-if="currentFilter === project.category || currentFilter === 'ALL'" :key="project.title" v-for="project in projects"
>

↓

v-if, v-for分離後（v-ifを削除し、computedを追記）

「activeProjects」を新規で追加

<span class="project-title">{{project.title}}</span>

<div
  class="project" 
  :key="project.title" 
  v-for="project in activeProjects" 
>

computed: {
    activeProjects() {
      return this.projects.filter(project => {
        return this.currentFilter === project.category || this.currentFilter === 'ALL'
      })
    }
  }

　 Tweet
Qiitaで続きを読む

20201012のvue.jsに関する記事は6件です。

【vue.js】画像の遅延読み込みを実現する為にvue-lazyloadで導入してみた

Lazy Load

環境

実装

【vue.js】画像の遅延読み込みを実現する為にvue-lazyloadを導入してみた

Lazy Load

環境

実装

（１）Vue + Vuetify でローカル開発環境をセットアップ

この記事は

開発環境のセットアップ

1. Node.jsのインストール

2. Vue ＋ Vue CLIのインストール

Vueでプロジェクトを作成

Vuetify

まとめ

（おまけ）Vue CLIについて

（おまけ２）Vuetifyについて

Vue.js入門

インストール

vueの記述

v-bind

v-on

v-onのイベント修飾子

event.stopPropagation() → v-on:event名.stop

event.preventDefault() → v-on:event名.prevent

v-onのキー修飾子

v-model

映画情報を取得できるTMDb API 画像（poster_path）のサイズは、決まっていた！！

はじめに

ポスター画像の大きさを変えるには

width100%にしてみる

width150にしてみる

サイズは決まっている

【Vue】v-if,v-forを分離するために【メモ】

v-if, v-for分離前（VueCLIだとエラーになる）

v-if, v-for分離後（v-ifを削除し、computedを追記）

「activeProjects」を新規で追加

日付別

タグ一覧

映画情報を取得できるTMDb API　画像（poster_path）のサイズは、決まっていた！！