Firebase の Realtime Databaseにてデータを降順で並び替える方法

Firebase の Realtime Database を使用した際に**　orderByChild　**では**昇順**でしか並び替えることができず困ったため、見つけた解決方法を投稿しようと思います。まだまだ初心者のため表現方法等は誤っているかもしれませんが、下記コードは一度実行し動作確認しております。


## 使用環境

-　AWS　Cloud9
-　Firebase　Realtime Database

## Realtime Database のデータ構造

![359d80029c93ae3eea1c88cc59859156.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422081/1f9434ea-d5d0-a6a7-b489-68533c3db7c5.png)

## コード

### HTML
Firebase の設定等の部分は省略します

```HTML
  <button id="order">昇順</button>
  <button id="reverse">降順</button>
  <button id="reset">リセット</button>
    
  <div id="list"></div>
```
### JavaScript（データ出力部分）
```JavaScript
const createDiv = function(firebaseData) {
  // 取得データに下記処理を実行
  firebaseData.on("child_added", function(snapshot) {
    
    // "name","count"の値を代入
    const getName = snapshot.child("name").val();
    const getCount = snapshot.child("count").val();
    
    // 新しい div 要素を作成
    const newDiv = document.createElement("div");
    // 新しい div の内容を作成
    const divContent = document.createTextNode(getName + " : " + getCount);
    // 上記で作成した内容を div 要素に追加
    newDiv.appendChild(divContent); 
    // 内容を追加した div を list IDの中に追加
    document.getElementById('list').appendChild(newDiv);
  });
};
```
なお、HTMLのデータ出力に関しては[こちら](https://developer.mozilla.org/ja/docs/Web/API/Document/createElement)を参考にしております。

### JavaScript（昇順）

```JavaScript
document.getElementById("order").onclick = function() {
  
  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    .orderByChild("count");
  
  // 取得したデータを使い、出力する
  createDiv(firebaseData);
  
};
```

普通に出力するとデータが
![31c3bb872fc415e37a1034c500e2251a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422081/59c7fe66-04cb-1c0b-2a2b-1523dc0287f3.png)

となりますが、こちらをアルファベット順にしようとする場合、**count(Realtime Database の値)** の値が**降順**になるようにしなければなりません。
そこで下記のように、

### JavaScript（降順）

```JavaScript
document.getElementById("reverse").onclick = function() {
  
  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    // + 値の場合昇順になってしまうので、 - をつける
    .orderByChild("-count");
  
  // 取得したデータを使い、出力する
  createDiv(firebaseData);

};
```

内容はほとんど変更がありませんが、一カ所Firebaseよりデータを取得する際に、**　マイナス（-）　**を **count(Realtime Database の値)** に入れています。
これにより先ほどとはデータを取得する順序が変更され、
![465af2f015b996e72f30d060a8453f55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422081/ace46829-8cb2-ff39-c5b9-19246ddb9853.png)

1. name : AAA　count : 3（-3）
2. name : BBB　count : 2（-2）
3. name : CCC　count : 1（-1）
と**count(Realtime Database の値)** が**降順**で出力されるようになりました。

### JavaScript（全体）

```JavaScript
/* jshint curly:true, debug:true */

const createDiv = function(firebaseData) {
  // 取得データに下記処理を実行
  firebaseData.on("child_added", function(snapshot) {
    
    // "name","count"の値を代入
    const getName = snapshot.child("name").val();
    const getCount = snapshot.child("count").val();
    
    // 新しい div 要素を作成
    const newDiv = document.createElement("div");
    // 新しい div の内容を作成
    const divContent = document.createTextNode(getName + " : " + getCount);
    // 上記で作成した内容を div 要素に追加
    newDiv.appendChild(divContent); 
    // 内容を追加した div を list IDの中に追加
    document.getElementById('list').appendChild(newDiv);
  });
};

// 昇順
document.getElementById("order").onclick = function() {
  
  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    .orderByChild("count");
  
  // 取得したデータを使い、出力する
  createDiv(firebaseData);
  
};

// 降順
document.getElementById("reverse").onclick = function() {
  
  // Firebaseよりデータを取得
  const firebaseData = firebase
    .database()
    .ref("list")
    // + 値の場合昇順になってしまうので、 - をつける
    .orderByChild("-count");
  
  // 取得したデータを使い、出力する
  createDiv(firebaseData);

};

// リセット
document.getElementById("reset").onclick = function() {

  document.getElementById("list").innerHTML = "";
  
};
```

### 追記
こちら以外の解決方法やコードの書き方等ございましたら、勉強のために是非お教えいただければと思います。この投稿が、少しでも悩んでいる誰かの助けになれば幸いです。