===== 07.Vue.jsでクイズアプリ ===== クイズアプリを作ってみたいと思います。 前回に続き、Javascriptのフレームワーク（便利なものがつまった一式）であるVue.jsというものを、[[https://codesandbox.io/|CodeSandbox]]上で、使用していきます。 ===== 方針をたてる ===== 今回作成するチャットアプリは、 -3択クイズ -文字のみ -3問 -最終ページで正解数を表示 となります。 -クイズ結果データは保存せずに、リロードで破棄する ものとします。ランキング機能つきクイズアプリについては、次回以降、記載したいと思います。 今回は、[[https://blog.capilano-fw.com/?p=2499|こちらのサイト]]のソースコードを利用させていただこうと思います。 ソースコード https://codesandbox.io/s/68rnrr893 これから作るもの ==== 0.用意するもの（開発環境） ==== パソコン\\ Windowsパソコンでも、Macでも、かまいません。 Chrome（くろーむ、WEBブラウザの一つ）\\ オンラインエディタであるCodeSandboxを利用するために、[[https://www.google.co.jp/chrome/|Chrome]]というWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。[[https://www.google.co.jp/chrome/|こちらのページ]]からインストールできます。 また、GitHubアカウントを作成（無料）していると、CodeSandboxで作成したアプリを保存できます。 ==== 1.CodeSandboxでVue.jsアプリを作成 ==== -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック {{:07.vue.jsでクイズアプリ:pasted:20181213-083656.png}} -Vue　をクリック {{:07.vue.jsでクイズアプリ:pasted:20181213-083907.png}} すると、以下のような画面になり、ログイン無しで、Vue.jsアプリをの開発環境が整います。 {{:07.vue.jsでクイズアプリ:pasted:20181213-084052.png}} 一番左側には、ファイル名が並びます。さらに下に行くと、「Add Dependency」という青いボタンが出てきて、「npmパッケージ」というものを追加することができます。 {{:07.vue.jsでクイズアプリ:pasted:20181213-085122.png}} {{:07.vue.jsでクイズアプリ:pasted:20181213-085202.png}} 真ん中は、ファイルリストで選択されているファイルの中身が表示されます。こちらのコードを編集していきます。 {{:07.vue.jsでクイズアプリ:pasted:20181213-085456.png}} 一番右側は、プレビュー画面です。真ん中のファイルを選択すると、プレビュー画面が自動で更新されます。Ctrl+Sで保存もできます。 {{:07.vue.jsでクイズアプリ:pasted:20181213-085833.png}} なお、あらかじめGitHubアカウントを作成しておき、画面右上の、「Sign in with GitHub」をクリックしてログインすると、Ctrl+Sで作成したアプリを保存（無料）することもできます。 ==== 2. index.htmlの編集 ==== 画面左側のリストで、index.htmlを選択すると、以下のようになります。 {{:07.vue.jsでクイズアプリ:pasted:20181213-090931.png}} こちらを、以下のコードに書き換えて、CSSフレームワークBulmaが利用できるようにします。（を含んだ3行を追加します。） (変更後) {{:07.vue.jsでクイズアプリ:pasted:20181213-091113.png}} ==== 3. src/App.vueの編集 ==== 次に、画面左側のファイルリストで、srcをクリックして、ドロップダウンで出てくる、App.vueを選択すると、以下のような画面になります。 {{:07.vue.jsでクイズアプリ:pasted:20181213-091253.png}} こちらを、以下のコードに書き換えます。 (変更後) {{:07.vue.jsでクイズアプリ:pasted:20181213-093451.png}} 参考：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 で３択クイズゲームをつくってみよう 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