Vue.jsでSEO対策した無限スクロール（Infinite Scroll）を実現する

ライトコード社員ブログ

2021.12.20

1 「Vue.js」で無限スクロールする方法とは？
2 無限スクロールの実装パターンと SEO 対策
3 Vue.js で無限スクロールを実現する方法
4 実装前の準備
5 Vue.js で SEO 対策をした無限スクロールを実装
6 無限スクロールを実行
7 さいごに

「Vue.js」で無限スクロールする方法とは？

「無限スクロール（Infinite Scroll）」は、ページを切り替えることなくページネーションするテクニックです。

ページの一番下までスクロールすると、表示するコンテンツがなくなるまで、続きを自動的に読み込んでくれます。

スクロール操作が基本のモバイル端末で、「最もスマートなページネーション」とも言われています。

今回は、人気の「Vue.js」で無限スクロールを実装する方法と、無限スクロールに必要な SEO対策について解説していきます。

無限スクロールの実装パターンと SEO 対策

無限スクロールには、2つの実装パターンがあります。

同一URLで、ページ内にコンテンツを読み込ませる方法
読み込むコンテンツ単位にURLを割り当ててページを分割する方法

それぞれの実装パターンを、SEOの観点で見ると次のような特徴があります。

1.同一URLで、ページ内にコンテンツを読み込ませる

この方法のメリットは、実装がシンプルで楽なことです。

しかし、この方法は、SEO 的には NG な実装パターンです。

なぜなら、検索エンジンの bot は、スクロールなしで見える情報しか認識できないからです。

また、この仕様は、ユーザービリティ的にも良くありません。

ページを訪れるたびに、毎回下までスクロールするのは面倒ですよね。

2.読み込むコンテンツ単位にURLを割り当ててページを分割

スクロールで読み込むコンテンツの単位（ページ単位）に、URLを割り当てる方法です。

これが、SEO的にも良いと言われている実装パターンです。

実装パターン実際どうやるの？

下記の画像を見てください。

「全部で40件のコンテンツを、20件ずつページ分けして表示する」と仮定します。

まず、コンテンツ20件ごとにURLを割り当てます。

そして、スクロールでページが切り替わるタイミングで「History API」の pushState() や replaceState()を使って、URLを書き換えます。

ページごとに URL を割り当てるメリット

ページ毎にURLを割り当てることで、検索エンジンのクローラーが情報を全てインデックスできるのです。

「同一URLでページ内にコンテンツを読み込ませる方法」に比べ、実装が複雑なのが難点ですが…。

無限スクロールを実装するなら、SEO 対策してあるこちらのパターンを使いましょう。

Vue.js で無限スクロールを実現する方法

Vue.js には、標準で無限スクロールを実現する機能がありません。

そのため、以下のどちらかの方法で、SEO 対策済みの無限スクロールを Vue.js で実装しましょう。

外部のライブラリを使う
自前で無限スクロールを実装する

注意

ただし、外部のライブラリを使う場合でも、一部の処理は自前で実装しなければなりません。

SEO 対策済みの無限スクロールライブラリが、公開されていないからです。

今回の方針

今回は、無限スクロールを「vue-infinite-loading」という外部のライブラリを使って実現します。

そして、SEO 対策の為の URL 切り替えを、「History API」を使って自前で実装していきます。

実装前の準備

事前準備として、新しいプロジェクトを用意しておきましょう。

npm、 vue-cliなど、Vue を開発するための環境が揃っている前提で話を進めます。

新しいプロジェクトを作る

まず、 vue-cliで、新しいプロジェクトを作成します。

今回は、「sample-inifnite-scroll」という名前にしました。

vue create sample-inifnite-scroll

1	vue create sample-inifnite-scroll

vue-infinite-loading をインストール

プロジェクトが作成されたら、次に「vue-infinite-loading」をインストールします。

以下のいずれかの方法で、インストールしてください。

npm の場合

npm install vue-infinite-loading -save

1	npm install vue-infinite-loading -save

yarn の場合

yarn add vue-infinite-loading

1	yarn add vue-infinite-loading

CDN 経由で使用する場合は、以下のタグを html に追加します。

<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>

1	<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>

【Vue-infinite-loading】
https://peachscript.github.io/vue-infinite-loading/

これで、プロジェクトの準備ができました。

Vue.js で SEO 対策をした無限スクロールを実装

それでは、さっそく Vue.js で無限スクロールを実装していきましょう。

App.vueを開き、次の通りに編集してください。

Template

<template>
  <div id="app">    
    <!--リストを表示する部分-->
    <ul class="list">
      <li class="item" v-for="(item, index) in this.items" :key="index">{{item}}</li>
    </ul>
    <!--下スクロールした時に、次のページのデータを取得する無限スクロールコンポーネント-->
    <infinite-loading v-if="hasNext" @infinite="infiniteHandler" spinner="spiral" direction="bottom">
      <div slot="no-more">No more</div>       <!--これ以上表示するデータがない時に表示されるメッセージ-->
      <div slot="no-results">No results</div> <!--検索結果がない時に表示されるメッセージ-->
    </infinite-loading>
  </div>
</template>

</ul>

<infinite-loading v-if="hasNext" @infinite="infiniteHandler" spinner="spiral" direction="bottom">

<div slot="no-results">No results</div>

</infinite-loading>

</div>

</template>

テンプレートには、「検索したデータを表示する為のリスト部分」と、「無限スクロールを実現するための infinite-loadingタグ」を置きます。

infinite-loadting の役割

infinite-loadingは、ページの下の方までスクロールすると、 @infiniteイベントを発生させます。

そして、イベントハンドラの infiniteHandler関数の中で、次のページに表示するデータを検索してくれます。

JavaScript

import InfiniteLoading from 'vue-infinite-loading'

export default {
  name: 'App',
  components: {
    InfiniteLoading
  },
  data() {
    return {
      items: [],            // リストに表示するデータ
      startPage: 0,         // 開始ページ番号
      endPage: 0,           // 終了ページ番号
      totalPages: 0,        // 総ページ数
      pageSize: 20,         // １ページに表示するデータ件数
      initialized: false    // 初回データアクセスが完了した後にtrueを設定するフラグ
    }
  },
  computed: {
    hasNext() {
      return this.initialized && this.totalPages > this.endPage
    }
  },
  mounted() {

    // 現在表示中のページ番号をURLに設定する為に、スクロールイベントを監視
    window.addEventListener("scroll", () => this.scroll())

    const urlParams = new URLSearchParams(window.location.search);
    const page = urlParams.get('page');

    if (page) {
      // URLパラメータでページ番号が指定された場合、指定ページから表示
      this.startPage = parseInt(page, 10)
      this.endPage = parseInt(page, 10)
    } else {
      // ページ番号の指定がない場合は１ページ目から表示
      this.startPage = 1
      this.endPage = 1
    }

    // 初回データアクセス
    this.getItems(null, this.startPage, false)
  },
  methods: {

    // スクロール時に、次ページに表示するデータを取得する処理
    infiniteHandler($state) {
      if (this.endPage >= this.totalPages) {
        // 表示するデータが無くなったら$state.complete()を呼ぶ
        $state.complete()
      } else {
        // 表示するデータがある場合、時ページのデータを読み込む
        this.getItems($state, this.endPage + 1, true)
      }
    },

    // ページに表示するデータを検索する処理
    getItems($state, page, next) {
      setTimeout(() => {

        // 読込データを設定（実際はaxiosなどで非同期でデータを取得する想定）
        let data = []
        for (let i = 1 ; i <= this.pageSize; i++) {
          data.push(`item${page}-${i}`)
        }
        // 総ページ数を設定（これも実際はaxiosなどで非同期でデータを取得する想定）
        this.totalPages = 10

        // 現在表示しているデータの末尾に取得したデータを追加
        this.items = this.items.concat(data)
        this.endPage = page

        // $state.loaded()でデータの読込完了を通知する
        if ($state) $state.loaded()

        this.$nextTick(() => {
          this.initialized = true
        })
      }, 1000)
    },

    // スクロールイベント発生時の処理
    scroll() {
      // 現在のスクロールY座標から、画面に表示されているページ番号を計算する
      let scroll_pos = window.pageYOffset || document.documentElement.scrollTop
      let window_height = window.outerHeight
      let page = Math.ceil((scroll_pos + 0.5 * window_height) / 40 / this.pageSize) + (this.startPage - 1)
      // replaceStateでurlを書き換え（urlパラメータにページ番号を設定）
      window.history.replaceState(null, null, "/?page=" + page)
    }
  }
}

import InfiniteLoading from 'vue-infinite-loading'

export default {

name: 'App',

components: {

InfiniteLoading

data() {

return {

items: [], // リストに表示するデータ

startPage: 0, // 開始ページ番号

endPage: 0, // 終了ページ番号

totalPages: 0, // 総ページ数

pageSize: 20, // １ページに表示するデータ件数

initialized: false // 初回データアクセスが完了した後にtrueを設定するフラグ

}

computed: {

hasNext() {

return this.initialized && this.totalPages > this.endPage

}

mounted() {

// 現在表示中のページ番号をURLに設定する為に、スクロールイベントを監視

window.addEventListener("scroll", () => this.scroll())

const urlParams = new URLSearchParams(window.location.search);

const page = urlParams.get('page');

if (page) {

// URLパラメータでページ番号が指定された場合、指定ページから表示

this.startPage = parseInt(page, 10)

this.endPage = parseInt(page, 10)

} else {

// ページ番号の指定がない場合は１ページ目から表示

this.startPage = 1

this.endPage = 1

}

// 初回データアクセス

this.getItems(null, this.startPage, false)

methods: {

// スクロール時に、次ページに表示するデータを取得する処理

infiniteHandler($state) {

if (this.endPage >= this.totalPages) {

// 表示するデータが無くなったら$state.complete()を呼ぶ

$state.complete()

} else {

// 表示するデータがある場合、時ページのデータを読み込む

this.getItems($state, this.endPage + 1, true)

}

// ページに表示するデータを検索する処理

getItems($state, page, next) {

setTimeout(() => {

// 読込データを設定（実際はaxiosなどで非同期でデータを取得する想定）

let data = []

for (let i = 1 ; i <= this.pageSize; i++) {

data.push(`item${page}-${i}`)

}

// 総ページ数を設定（これも実際はaxiosなどで非同期でデータを取得する想定）

this.totalPages = 10

// 現在表示しているデータの末尾に取得したデータを追加

this.items = this.items.concat(data)

this.endPage = page

// $state.loaded()でデータの読込完了を通知する

if ($state) $state.loaded()

this.$nextTick(() => {

this.initialized = true

})

}, 1000)

// スクロールイベント発生時の処理

scroll() {

// 現在のスクロールY座標から、画面に表示されているページ番号を計算する

let scroll_pos = window.pageYOffset || document.documentElement.scrollTop

let window_height = window.outerHeight

let page = Math.ceil((scroll_pos + 0.5 * window_height) / 40 / this.pageSize) + (this.startPage - 1)

// replaceStateでurlを書き換え（urlパラメータにページ番号を設定）

window.history.replaceState(null, null, "/?page=" + page)

}

少し長いコードですが、概ね次のような処理をしています。

mounted()

mounted()は、ページロード時に呼ばれます。

URLパラメータで指定されたページ番号のデータを表示します。

ページ番号の指定がなければ、１ページ目が表示されます。

infiniteHandler

infiniteHandlerは、次のページのデータが必要になった時に呼ばれます。

次ページのデータを読み込んだ後、リストの末尾にデータを追加します。

$state.loaded() と $state.completed()

データを読み込む際、次のページに表示するデータが存在する場合は、 $state.loaded()が呼ばれます。

これ以上表示データがない場合（最終ページ）は、 $state.completed()を呼びます。

scroll 関数

scroll関数は、ブラウザでスクロールが発生すると呼ばれます。

現在のスクロール位置(Y座標)から表示中のページ番号を計算します。

そして、「History API」の replaceState()でURLパラメータに現在のページ番号をセットします。

CSS

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  height: 40px;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #777;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.list {

list-style: none;

margin: 0;

padding: 0;

}

.list li {

height: 40px;

border-top: solid 1px #ccc;

border-bottom: solid 1px #777;

box-sizing: border-box;

margin: 0;

padding: 0;

}

無限スクロールを実行

ここまで出来たら、実際に動きを確認してみましょう！

ターミナル上で、次のコマンドを入力します。

npm run serve

1	npm run serve

1ページ目

ブラウザで http://localhost:8080にアクセスしてみてください。

1ページ目の情報がリストになった状態で、ページが表示されていると思います。

では、下にスクロールして、無限スクロールが働いているか確認しましょう。

2ページ目

次の画像のように、下スクロールでローディングアイコンが表示された後、2ページ目の情報が表示されればOKです。

さらにスクロールを続けていきます。

2ページ目の情報が中盤あたりにくると、「History API」の replaceState()の処理により、URLパラメータにページ番号がセットされています。

URL にページ番号を指定する

また、URLにページ番号を直接指定すると、指定したページ番号のページからリストが表示されます。

さいごに

今回は、Vue.js でSEO対策した無限スクロールを実現する方法を紹介しました。

無限スクロールは、スマホ用サイトなどで、便利にページネーションする為のテクニックです。

検索エンジンのクローラーがインデックスしやすいように、SEO 対策もしっかりしておきましょう。

こちらの記事もオススメ！

2020.08.07

JavaScript 特集

知識編 JavaScriptを使ってできることをわかりやすく解説！ JavaScriptの歴史【紆余曲折を経たプログラミング言語】 ...

2020.07.17

ライトコード的「やってみた！」シリーズ

「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！ ※作成日が新しい順に並べ...

書いた人はこんな人

ライトコード社員ブログ

「好きなことを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎！
また、WEBエンジニアとモバイルエンジニアも積極採用中です！

ご応募をお待ちしております！

初回投稿日:2020.07.14