目次

07.Vue.jsでクイズアプリ

クイズアプリを作ってみたいと思います。

前回に続き、Javascriptのフレームワーク(便利なものがつまった一式)であるVue.jsというものを、CodeSandbox上で、使用していきます。

方針をたてる

今回作成するチャットアプリは、

  1. 3択クイズ
  2. 文字のみ
  3. 3問
  4. 最終ページで正解数を表示

となります。

  1. クイズ結果データは保存せずに、リロードで破棄する

ものとします。ランキング機能つきクイズアプリについては、次回以降、記載したいと思います。

今回は、こちらのサイトのソースコードを利用させていただこうと思います。

ソースコード

https://codesandbox.io/s/68rnrr893

これから作るもの

0.用意するもの(開発環境)

パソコン

Windowsパソコンでも、Macでも、かまいません。

Chrome(くろーむ、WEBブラウザの一つ)

オンラインエディタであるCodeSandboxを利用するために、ChromeというWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。こちらのページからインストールできます。

また、GitHubアカウントを作成(無料)していると、CodeSandboxで作成したアプリを保存できます。

1.CodeSandboxでVue.jsアプリを作成

  1. https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック

  1. Vue をクリック


すると、以下のような画面になり、ログイン無しで、Vue.jsアプリをの開発環境が整います。

一番左側には、ファイル名が並びます。さらに下に行くと、「Add Dependency」という青いボタンが出てきて、「npmパッケージ」というものを追加することができます。

真ん中は、ファイルリストで選択されているファイルの中身が表示されます。こちらのコードを編集していきます。

一番右側は、プレビュー画面です。真ん中のファイルを選択すると、プレビュー画面が自動で更新されます。Ctrl+Sで保存もできます。

なお、あらかじめGitHubアカウントを作成しておき、画面右上の、「Sign in with GitHub」をクリックしてログインすると、Ctrl+Sで作成したアプリを保存(無料)することもできます。

2. index.htmlの編集

画面左側のリストで、index.htmlを選択すると、以下のようになります。

こちらを、以下のコードに書き換えて、CSSフレームワークBulmaが利用できるようにします。(<!– cssライブラリの読み込み –>を含んだ3行を追加します。)

(変更後)

3. src/App.vueの編集

次に、画面左側のファイルリストで、srcをクリックして、ドロップダウンで出てくる、App.vueを選択すると、以下のような画面になります。

こちらを、以下のコードに書き換えます。

(変更後)

参考:https://blog.capilano-fw.com/?p=2499

参考2:data property in component must be a function

https://stackoverflow.com/questions/42396867/how-to-get-data-to-work-when-used-within-a-component-and-axios?rq=1

参考3:Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

https://tech.moiraibusiness.com/?p=153

https://www.tomcky.net/entry/2018/02/27/000853

作成中

少し変更したバージョン

https://codesandbox.io/s/oo199w7km5

Vue.jsでクイズアプリのリンク

https://blog.capilano-fw.com/?p=2499
2018年11月21日 投稿者: SUKOHI
初心者向き!VueJS で3択クイズゲームをつくってみよう

https://www.raymondcamden.com/2018/01/22/building-a-quiz-with-vuejs

https://codeburst.io/create-a-quiz-with-vue-js-ed1e8e0e8294

https://github.com/TakahiRoyte/quiz-vue