10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/28] – [FirebaseのRTDBのobjectをarrayに変換する] adash333 | 10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/31] (現在) – [0.用意するもの(開発環境)] adash333 | ||
---|---|---|---|
行 39: | 行 39: | ||
< | < | ||
CodeSandbox | CodeSandbox | ||
- | Firebase | + | Firebase |
Vue 2.5.2 | Vue 2.5.2 | ||
Vuetify | Vuetify | ||
行 346: | 行 346: | ||
今回のコードで、一番難しいところ。 | 今回のコードで、一番難しいところ。 | ||
ここは、https:// | ここは、https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
< | < | ||
行 373: | 行 379: | ||
</ | </ | ||
+ | |||
+ | 以下のコードでもよい? | ||
+ | https:// | ||
+ | |||
+ | < | ||
+ | < | ||
+ | <ul v-for=" | ||
+ | < | ||
+ | <button type=" | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | created: function() { | ||
+ | this.database = firebase.database(); | ||
+ | this.uid = firebase.auth().currentUser.uid; | ||
+ | this.todosRef = this.database.ref(" | ||
+ | |||
+ | var _this = this; | ||
+ | // データに変更があると実行されるfunction | ||
+ | this.todosRef.on(" | ||
+ | this.todos = snapshot.val(); | ||
+ | }); | ||
+ | }, | ||
+ | | ||
+ | </ | ||
+ | |||
+ | |||
==== FirebaseのRTDBのobjectをarrayに変換する ==== | ==== FirebaseのRTDBのobjectをarrayに変換する ==== | ||
行 413: | 行 448: | ||
これを、listという配列arrayに変換する。 | これを、listという配列arrayに変換する。 | ||
+ | |||
+ | <wrap hi> | ||
+ | (間違っていたらすみません、、、) | ||
+ | |||
+ | https:// | ||
+ | Object.keys()メソッドについて | ||
+ | |||
+ | Object.keys(object1)で、連想配列object1のキーkeyの配列arrayを得ます。 | ||
+ | |||
+ | < | ||
+ | const object1 = { | ||
+ | a: ' | ||
+ | b: 42, | ||
+ | c: false | ||
+ | }; | ||
+ | |||
+ | console.log(Object.keys(object1)); | ||
+ | // expected output: Array [" | ||
+ | </ | ||
+ | |||
+ | ==== forEach文 ==== | ||
+ | |||
+ | |||
+ | https:// | ||
+ | 【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ! | ||
+ | 2016年 by マサト | ||
+ | |||
+ | ==== forEach文のコールバック関数 ==== | ||
+ | |||
+ | < | ||
+ | array.forEach( function( value, index, array ) { | ||
+ | |||
+ | // 繰り返し処理を書く | ||
+ | |||
+ | }); | ||
+ | </ | ||
+ | |||
+ | value:配列データの値 | ||
+ | index:配列のインデックス番号 | ||
+ | array:現在処理している配列 | ||
+ | |||
+ | https:// | ||
+ | @nantekkotai | ||
+ | 2014年02月21日に更新 | ||
+ | JSのObjectをforEachで処理する方法 | ||
+ | |||
+ | https:// | ||
+ | 2016-06-21 | ||
+ | Javascript 連想配列(オブジェクト)をforEachでループさせたい。 | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
10.vue.jsとfirebaseでランキングつき連打ゲーム/index.html.txt · 最終更新: 2018/12/31 by adash333