07.vue.jsでクイズアプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
07.vue.jsでクイズアプリ:index.html [2018/12/11] – 作成 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:// | ||
+ | |||
+ | ===== 方針をたてる ===== | ||
+ | 今回作成するチャットアプリは、 | ||
+ | |||
+ | -3択クイズ | ||
+ | -文字のみ | ||
+ | -3問 | ||
+ | -最終ページで正解数を表示 | ||
+ | |||
+ | となります。 | ||
+ | |||
+ | -クイズ結果データは保存せずに、リロードで破棄する | ||
+ | |||
+ | ものとします。ランキング機能つきクイズアプリについては、次回以降、記載したいと思います。 | ||
+ | |||
+ | 今回は、[[https:// | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | これから作るもの | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== 0.用意するもの(開発環境) ==== | ||
+ | パソコン\\ | ||
+ | Windowsパソコンでも、Macでも、かまいません。 | ||
+ | |||
+ | Chrome(くろーむ、WEBブラウザの一つ)\\ | ||
+ | オンラインエディタであるCodeSandboxを利用するために、[[https:// | ||
+ | |||
+ | また、GitHubアカウントを作成(無料)していると、CodeSandboxで作成したアプリを保存できます。 | ||
+ | |||
+ | ==== 1.CodeSandboxでVue.jsアプリを作成 ==== | ||
+ | |||
+ | -https:// | ||
+ | {{: | ||
+ | -Vue をクリック | ||
+ | {{: | ||
+ | すると、以下のような画面になり、ログイン無しで、Vue.jsアプリをの開発環境が整います。 | ||
+ | {{: | ||
+ | |||
+ | |||
+ | 一番左側には、ファイル名が並びます。さらに下に行くと、「Add Dependency」という青いボタンが出てきて、「npmパッケージ」というものを追加することができます。 | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 真ん中は、ファイルリストで選択されているファイルの中身が表示されます。こちらのコードを編集していきます。 | ||
+ | {{: | ||
+ | |||
+ | 一番右側は、プレビュー画面です。真ん中のファイルを選択すると、プレビュー画面が自動で更新されます。Ctrl+Sで保存もできます。 | ||
+ | {{: | ||
+ | |||
+ | なお、あらかじめGitHubアカウントを作成しておき、画面右上の、「Sign in with GitHub」をクリックしてログインすると、Ctrl+Sで作成したアプリを保存(無料)することもできます。 | ||
+ | |||
+ | |||
+ | |||
+ | ==== 2. index.htmlの編集 ==== | ||
+ | 画面左側のリストで、index.htmlを選択すると、以下のようになります。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | こちらを、以下のコードに書き換えて、CSSフレームワークBulmaが利用できるようにします。(< | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | |||
+ | ==== 3. src/ | ||
+ | 次に、画面左側のファイルリストで、srcをクリックして、ドロップダウンで出てくる、App.vueを選択すると、以下のような画面になります。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | こちらを、以下のコードに書き換えます。 | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | 参考:https:// | ||
+ | |||
+ | 参考2:data property in component must be a function | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 参考3: | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 作成中 | ||
+ | |||
+ | ===== 少し変更したバージョン ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ===== Vue.jsでクイズアプリのリンク ===== | ||
+ | |||
+ | |||
+ | https:// | ||
+ | 2018年11月21日 投稿者: SUKOHI | ||
+ | 初心者向き!VueJS で3択クイズゲームをつくってみよう | ||
https:// | https:// | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
07.vue.jsでクイズアプリ/index.html.1544523617.txt.gz · 最終更新: 2018/12/11 by adash333