サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/28]
adash333 [FirebaseのRTDBのobjectをarrayに変換する]
10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/31] (現在)
adash333 [0.用意するもの(開発環境)]
行 39: 行 39:
 <code> <code>
 CodeSandbox CodeSandbox
-Firebase+Firebase (real time databse)
 Vue 2.5.2 Vue 2.5.2
 Vuetify Vuetify
行 346: 行 346:
 今回のコードで、一番難しいところ。 今回のコードで、一番難しいところ。
 ここは、https://qiita.com/renowan/items/b8222f2b873cc29a462d のコードをコピペしたのですが、詳しいところはさっぱりわかりません。 ここは、https://qiita.com/renowan/items/b8222f2b873cc29a462d のコードをコピペしたのですが、詳しいところはさっぱりわかりません。
 +
 +
 +
 +
 +
 +
  
 <code> <code>
行 373: 行 379:
  
 </code> </code>
 +
 +以下のコードでもよい?
 +https://ueqareer.net/2770/3
 +
 +<code>
 +   <!-- todoの一覧表示 -->
 +    <ul v-for="(todo, key) in filteredTodos" :key="todo.id">
 +      <li><input class="toggle" type="checkbox" v-model="todo.isComplete" v-on:click="updateIsCompleteTodo(todo, key)">{{ todo.name }}</li>
 +      <button type="submit" v-on:click="deleteTodo(key)">削除</button>
 +    </ul>
 +</code>
 +
 +<code>
 +
 +  created: function() {
 +    this.database = firebase.database();
 +    this.uid = firebase.auth().currentUser.uid;
 +    this.todosRef = this.database.ref("todos/" + this.uid);
 + 
 +    var _this = this;
 +    // データに変更があると実行されるfunction
 +    this.todosRef.on("value", (snapshot) => {
 +      this.todos = snapshot.val(); // 再取得してtodosに格納する
 +    });
 +  },
 +  
 +</code>
 +
 +
  
 ==== FirebaseのRTDBのobjectをarrayに変換する ==== ==== FirebaseのRTDBのobjectをarrayに変換する ====
行 413: 行 448:
  
 これを、listという配列arrayに変換する。 これを、listという配列arrayに変換する。
 +
 +<wrap hi>結局、object{ }の中身のvalueを並べて、[ ]でくくった配列arrayにしているのだと解釈しました。</wrap>
 +(間違っていたらすみません、、、)
 +
 +https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
 +Object.keys()メソッドについて
 +
 +Object.keys(object1)で、連想配列object1のキーkeyの配列arrayを得ます。
 +
 +<code>
 +const object1 = {
 +  a: 'somestring',
 +  b: 42,
 +  c: false
 +};
 +
 +console.log(Object.keys(object1));
 +// expected output: Array ["a", "b", "c"]
 +</code>
 +
 +==== forEach文 ====
 +
 +
 +https://www.sejuku.net/blog/20257
 +【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ!
 +2016年 by マサト
 +
 +==== forEach文のコールバック関数 ====
 +
 +<code>
 +array.forEach( function( value, index, array ) {
 + 
 +  // 繰り返し処理を書く
 + 
 +});
 +</code>
 +
 +value:配列データの値
 +index:配列のインデックス番号
 +array:現在処理している配列
 +
 +https://qiita.com/nantekkotai/items/6c603b40ac2264e9f6f6
 +@nantekkotai
 +2014年02月21日に更新
 +JSのObjectをforEachで処理する方法
 +
 +https://chaika.hatenablog.com/entry/2016/06/21/085000
 +2016-06-21
 +Javascript 連想配列(オブジェクト)をforEachでループさせたい。
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  


10.vue.jsとfirebaseでランキングつき連打ゲーム/index.html.1546000959.txt.gz · 最終更新: 2018/12/28 by adash333