見出し画像

firebase uid プロパティ〜要素を指定し、かつ特定の属性値を持つ要素を選択する【プログラミング学習】

uidとは

uidは、Firebase Realtime Database内のユーザーデータの特定のキーに対応します。

以下の例では、user1、user2がuidのキーになります。

また、uidには、以下のuse1またはuser2のいずれかが渡されるということです。
use1、user2があり、その下にデータが並んでいます。
{
"user1":{
"nicknae":"John",
"age":25,
"gender":"male"
}
"user2":{
"nicknae":"Emily",
"age":20,
"gender":"female"
}
}

プロパティの値を取得

dbdata.rooms[currentRoomName]でdbdata.roomsオブジェクトから、currentRoomNameプロパティの値を取得できます。

JavaScriptでのオブジェクトとプロパティ学習の延長です。

dbdata.users[currentUID]は、usersプロパティの値がオブジェクトとなっています。
このオブジェクトから、currentUIDで指定したプロパティを取得します。

以下の文もオブジェクトをセットしている例です。
.set({
  nickname:
  createdAt:
  updatedAt:
});
つまりは、nickname、createdAt、updatedAtという3つのプロパティを持つオブジェクトをセットしています。

$('<a>', {…})形式について

$('<a>', {…})は、新たに要素を作成する方法であり、$( )の引数にセレクタを指定する方法と異なります。

$('<a>', {…})の後に、text( )メソッドを使用してテキストを追加するのであれば、第2引数の{ }内にオブジェクトを渡して、href属性やclass属性などを設定することができます。

rooNameは、頻出

チャットの部屋を示すroomNameは、コードで頻出します。

roonNameの定義部分を見返すと、roomSnapshot.keyの値を代入しています。

また、$('<a>', {…})を利用して、href属性やclass属性などを設定しています。

roomNameも同様に頻出

roomNameも同様に頻出するため、コードをまとめておきます。

const roomName = decodeURIComponent(hash.substring(1));

要素を指定し、かつ特定の属性の値を持つ要素を選択する

例えば、
$(`.room-list__link[href='#${roomName}']`)では、

room-list__linkクラスを持ち、かつhref属性の値が`#{roomName}`である要素を選択することができます。

【firebase】Creating a button that increments a number each time it is clicked



この記事が気に入ったらサポートをしてみませんか?