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

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

ユーザ用ツール

サイト用ツール


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


差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/28]
adash333 [Vue.jsではgetElemetByIdの代わりにデータバインディング{{msg}}を用いる]
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
行 312: 行 312:
 </code> </code>
 これに気付くのに、Ionic3の時代からあわせて1年くらいかかりました。。。 これに気付くのに、Ionic3の時代からあわせて1年くらいかかりました。。。
 +
 +===== Vuetifyでテーブル =====
 +最初は、かなりややこしい感じがしますが、慣れれば割と簡単に降順に記載したりできるようです。
 +
 +
 +https://commis.hatenablog.com/entry/2018/05/29/102606
 +20180529
 +VuetifyのData tableを指定列の降順で初期表示する
 +
 +https://jsbin.com/gedaqud/edit?html
 +
 +公式ドキュメント
 +https://vuetifyjs.com/ja/components/data-tables
 +
 +===== javascriptの配列とオブジェクト =====
 +
 +配列について
 +
 +http://proengineer.internous.co.jp/content/columnfeature/8632
 +JavaScriptの配列オブジェクトの使い方
 +20180730
 +
 +http://proengineer.internous.co.jp/content/columnfeature/8841
 +JavaScriptの配列要素の値を追加/削除する方法
 +20180817
 +
 +連想配列(オブジェクト)について
 +
 +http://proengineer.internous.co.jp/content/columnfeature/8887
 +JavaScriptの連想配列を使ってみよう!
 +20180820
 +
 +今回のコードで、一番難しいところ。
 +ここは、https://qiita.com/renowan/items/b8222f2b873cc29a462d のコードをコピペしたのですが、詳しいところはさっぱりわかりません。
 +
 +
 +
 +
 +
 +
 +
 +<code>
 +
 +   listen: function() {
 +      firebase
 +        .database()
 +        .ref("gameScores/")
 +        .on("value", snapshot => {
 +          // eslint-disable-line
 +          if (snapshot) {
 +            const rootList = snapshot.val();
 +            let list = [];
 +            Object.keys(rootList).forEach((val, key) => {
 +              rootList[val].id = val;
 +              list.push(rootList[val]);
 +            });
 +            this.list = list;
 +            //スコア順に並び替え
 +            this.list.sort(function(a, b) {
 +              return a.score > b.score ? -1 : 1;
 +            });
 +          }
 +        });
 +    },
 +
 +
 +</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ドキュメント
 +https://firebase.google.com/docs/database/admin/retrieve-data
 +
 +<code>
 +// Import Admin SDK
 +var admin = require("firebase-admin");
 +
 +// Get a database reference to our posts
 +var db = admin.database();
 +var ref = db.ref("server/saving-data/fireblog/posts");
 +
 +// Attach an asynchronous callback to read the data at our posts reference
 +ref.on("value", function(snapshot) {
 +  console.log(snapshot.val());
 +}, function (errorObject) {
 +  console.log("The read failed: " + errorObject.code);
 +});
 +
 +</code>
 +
 +スナップショットの val() / getValue() を呼び出すと、データの言語固有のオブジェクト表現が返されます。
 +
 +とのことです、、、console.log(snapshot.val())の中身をコンソール画面で確認するしかなさそうです。
 +
 +
 +<code>
 +        const rootList = snapshot.val();
 +            let list = [];
 +            Object.keys(rootList).forEach((val, key) => {
 +              rootList[val].id = val;
 +              list.push(rootList[val]);
 +            });
 +</code>
 +
 +rootListが、firebaseから受け取ったobject
 +
 +これを、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でループさせたい。
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +https://ilikekillnerds.com/2017/05/convert-firebase-database-snapshotcollection-array-javascript/
 +Convert A Firebase Database Snapshot/Collection To An Array In Javascript
 +Last updated: March 8, 2018
 +
 +
 +
 +
 +
 +
 +
 +
  
  


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