- 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/
- ① JSONファイルをAjax通信で取得
axiosというAjax通信を簡単に実装できるライブラリがあります。それをソースコード1の（A-1）のように記述してJSON情報を取得して、配列displayItemsに格納します。 - ② 配列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の魅力だと思います。
ぜひ制作の中に取り入れてみてください。
