クイズテンプレートを表示する

クイズサイト構築の第2回目となります。

目次サイトは下記ページとなります。

• Nuxt.js+expressでクイズサイトを作ってみた

今回は前回のSPAの土台を作成するに引き続き、クイズサイトを構築していきます。

テンプレートの作成にあまり時間がかけられないため、Vue.jsのサンプルが多数アップされている vuejsexamples.com を利用します。

サイトを検索したところ、 a-nice-quiz-app-with-vue がよさそうなのでこちらを使用します。

環境構築

前回の記事でVue.js＋expressによる構築を行いましたが、フロントをVue.jsからNuxt.jsに変更します。

Nuxt.js は、Vue.js のフレームワークで頻繁に使用するモジュールが最初から組み込まれているため、作業時間の短縮を図ることができます。

まずは、spa_test/frontendを削除し、次にNuxt.jsでプロジェクトを開始します。

# vue init nuxt-community/starter-template frontend
# cd frontend
# npm install

インストールが完了したら、任意のホスト名でURLにアクセスするため、nuxt.config.js を修正します。

# vim nuxt.config.js
↓serverの3行を追加
module.exports = {
  server: {
    port: 8000, // デフォルト: 3000
    host: 'node.home.local', // デフォルト: localhost
  },
  /*
  ** Headers of the page
  */

サーバを起動し、ブラウザから http://node.home.local:8000 にアクセスします。

# npm run dev

Nuxt.jsのホーム画面が表示されたら成功です。

サンプルソースの移植

サンプルのクイズサイトは、Vue.jsをCDNで読み込んでいるため、ソースをそのままコピペしても動作しません。

下記表の通りソースを移植していきます。

移植

解説

※1

CDNをNuxt.jsで利用する場合、グローバルとローカルの2つ設定方法がありますが、今回はグローバルで設定します。
参考：外部リソースを使うには？

設定後のnuxt.config.jsは以下になります。

  head: {
    title: 'frontend',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css' },
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' },
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css' },
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

script、linkの箇所にソースURLを記載してください。

※2

そのまま移植して実行すると “Vue is not defined” エラーが出るため、script.js 108行目以降のソースを以下のように修正します。
参考：Vue.jsの「export default」と「new Vue」の書き方

export default {
  name: 'app',
  data: () => ({
    quiz: quiz,
    questionIndex: 0,
    userResponses: userResponseSkelaton,
    isActive: false
    }),
  filters: {
    charIndex: function (i) {
      return String.fromCharCode(97 + i);
    } },
  methods: {
    restart: function () {
      this.questionIndex = 0;
      this.userResponses = Array(this.quiz.questions.length).fill(null);
    },
    selectOption: function (index) {
      Vue.set(this.userResponses, this.questionIndex, index);
      //console.log(this.userResponses);
    },
    next: function () {
      if (this.questionIndex < this.quiz.questions.length)
      this.questionIndex++;
    },

    prev: function () {
      if (this.quiz.questions.length > 0) this.questionIndex--;
    },
    // Return "true" count in userResponses
    score: function () {
      var score = 0;
      for (let i = 0; i < this.userResponses.length; i++) {
        if (
        typeof this.quiz.questions[i].responses[
        this.userResponses[i]] !==
        "undefined" &amp;&amp;
        this.quiz.questions[i].responses[this.userResponses[i]].correct)
        {
          score = score + 1;
        }
      }
      return score;
  }}};

※3

以下のエラーが発生するため、サンプルソース index.html の87行目をコメントアウトします。（解析中ですが、ページ分割予定のため現時点では深追いしません）

Parsing error: invalid-first-character-of-tag-name  vue/no-parsing-error

動作確認

http://node.home.local:8000にアクセスし、以下が表示されたら成功です。

お疲れさまでした。