• コーディング ファクトリーHOME
  • Coding Methodology
  • 第121回 MovableTypeとNuxt.jsで作る更新性の高いSPAサイト

コーディングメソドロジー

第121回 MovableTypeとNuxt.jsで作る更新性の高いSPAサイト

近年Webを取り巻く環境や技術も様変わりし、ブラウザで挙動するWebサイトでありながら、アプリのようなUXを実現するシングルページアプリケーション(SPA)という実装手法も出てきました。新しい実装はなかなか導入のハードルが高いイメージがありますが、フレームワークの発展とともに導入しやすくなってきています。
今回は、Nuxt.jsというフレームワークとMovableType(以下、MTと表記)で生成したJSONファイルを使ってSPAサイトを実装する方法をご紹介します。

MTを利用し、SPAサイトを作成する

■CMSを利用してSPAサイトを実装するメリット

CMSを利用してSPAサイトを実装することで、「CMSの運用者はSPAの知見があまりなくても運用できる」「CMS側はデータを担い、フロント側は表示を担うという役割分担が明確にでき、開発者も把握や管理が楽になる」というメリットがあります。
運用を考慮しつつSPAとしてWebサイトを実装したい場合、MTを活用しDataAPIや、作成したJSONデータを取得させる方法があります。今回はJSONを取得させる方法で実装します。

図1: 実装構成例

1. 実装・構成イメージ

画像1(完成イメージ)のような記事一覧を実装します。実装構成例としては、図1のような構成です。
「単一のindex.htmlを起点として、app.jsでJSONファイルと通信を行う」という流れになります。

画像1:完成イメージ

2. 記事一覧画面の実装方法
【CMS側】
MTにて、投稿した記事内容(見出し、本文等)を入れたJSONファイルを作成します。(図1の「entries.json」)これがSPAのコンテンツデータです。
【フロントページ側】
「CMS側で用意したJSONを取得して、JSON内の記事データを記事一覧としてWebページに表示する」という処理を書きます。今回は、Nuxt.jsというフレームワークを利用して記述しています。Nuxt.jsの環境構築までの流れや基本事項については、以下の公式サイトをご確認ください。

Nuxt.js https://ja.nuxtjs.org/

  1. ① JSONファイルをAjax通信で取得
    axiosというAjax通信を簡単に実装できるライブラリがあります。それをソースコード1の(A-1)のように記述してJSON情報を取得して、配列displayItemsに格納します。
  2. ② 配列displayItemsを利用して、HTMLのループ出力を行う
    ①で用意した配列を用いて、配列に格納したデータの個数分ループ処理を行います。ソースコード1の(B-1)のように「v-for="(変数)in使う配列"」のように記述すると、ループ処理をします。
    また、{{item.title}}のような記述をすると、変数の値が出力されます。この場合は、配列内(記事データ)の見出しを出力します。独特な記述ではありますが、マークアップでEJSやpug等を普段から使用する方であれば、似たような記述をすることは多いと思いますので、特に問題なく記述を行えると思います。

ソースコード1

<template>
  <div class="list-articles">
    <div v-for="(item, index) in displayItems" :key="index" class="list-articles__item"> ・・・(B-1)
      <nuxt-link :to="item.permalink" class="card-articles"> ・・・(C-1)
        <figure class="card-articles__image"><img :src="item.mainImage" /></figure>
        <h1 class="card-articles__title">{{ item.title }}</h1>
        <p class="card-articles__read">{{ item.readText }}</p>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
// JavaScript を記載する
import axios from 'axios'
export default {
  data() {
    return { displayItems: [] }
    },
    created() {
      axios.get('https://~~~~~~~.jp/abcde/entries.json').then(response => { ・・・(A-1)
        this.displayItems = response.data
    })
  }
}
</script>
3. 遷移先のページを実装するには

SPAはページ遷移するたびにページ全体更新を行うのでなく、JSONデータを参照し、JavaScriptで画面の部分更新を行っています。更新される画面(レイアウトやUI)を担当するひとまとまりは「コンポーネント」と呼ばれ、Nuxt.jsでは、pagesフォルダに遷移ページ用のコンポーネントを追加できます。また、遷移先の画面の実装自体は「2. 実装方法」と同様に処理を実装していきます。

今回は、比較的シンプルな実装のご紹介でした。
実際の実装においては、より複雑な条件やロジックがあると思いますが、JSON等のコンテンツデータさえあれば、あとはJavaScriptでページ遷移も出力の仕方も柔軟に制御出来るという点がSPAの魅力だと思います。
ぜひ制作の中に取り入れてみてください。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム