差分

このページの2つのバージョン間の差分を表示します。

--- 07.vue.jsでクイズアプリ:index.html [2018/12/11] – [Vue.jsでクイズアプリのリンク] adash333
+++ 07.vue.jsでクイズアプリ:index.html [2018/12/13] (現在) – [3. src/App.vueの編集] adash333
@@ 行 1: / 行 1: @@
-===== 07.vue.jsでクイズアプリ =====
+===== 07.Vue.jsでクイズアプリ =====
+クイズアプリを作ってみたいと思います。
+前回に続き、Javascriptのフレームワーク（便利なものがつまった一式）であるVue.jsというものを、[[https://codesandbox.io/|CodeSandbox]]上で、使用していきます。
+===== 方針をたてる =====
+今回作成するチャットアプリは、
+  -3択クイズ
+  -文字のみ
+  -3問
+  -最終ページで正解数を表示
+となります。
+  -クイズ結果データは保存せずに、リロードで破棄する
+ものとします。ランキング機能つきクイズアプリについては、次回以降、記載したいと思います。
+今回は、[[https://blog.capilano-fw.com/?p=2499|こちらのサイト]]のソースコードを利用させていただこうと思います。
+ソースコード
+https://codesandbox.io/s/68rnrr893
+これから作るもの
+<html>
+<iframe src="https://codesandbox.io/embed/68rnrr893" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
+==== 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が利用できるようにします。（<!-- cssライブラリの読み込み -->を含んだ3行を追加します。）
+<html>
+<script src="https://gist.github.com/adash333/cb984b0dd205a15f5fea3ede2c4f05cf.js"></script>
+</html>
+(変更後)
+{{:07.vue.jsでクイズアプリ:pasted:20181213-091113.png}}
+==== 3. src/App.vueの編集 ====
+次に、画面左側のファイルリストで、srcをクリックして、ドロップダウンで出てくる、App.vueを選択すると、以下のような画面になります。
+{{:07.vue.jsでクイズアプリ:pasted:20181213-091253.png}}
+こちらを、以下のコードに書き換えます。
+<html>
+<script src="https://gist.github.com/adash333/6193d1a8cfccb5387164679bcd078ee7.js"></script>
+</html>
+(変更後)
+{{: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でクイズアプリのリンク =====