ホームページ > ウェブフロントエンド > jsチュートリアル > NgSysV: Firestore CRUD テンプレート

NgSysV: Firestore CRUD テンプレート

Linda Hamilton
リリース: 2024-12-04 05:31:15
オリジナル
946 人が閲覧しました

NgSysV: Firestore CRUD templates

この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。

最終レビュー日: 2024 年 11 月

導入

Firestore の CRUD (作成、読み取り、更新、削除) 手順に関する Google の広範なオンライン ドキュメントは、日常的に使用するには詳細すぎる可能性があります。ここでは、最も重要な Firestore 機能のテンプレートを示します。これらをそのまま切り取って貼り付け、変数名の「my」という単語を、対象とするコレクション名の適切な短縮形に置き換えることをお勧めします。たとえば、「Lecture_events」というコレクションへの参照は、「lecEvtsCollRef」としてコード化される可能性があります。

書類の作成

自動的に生成された ID を持つ myDocData オブジェクトを含むドキュメントを作成するには:

let myDocData =  .... create an object containing your data item properties .....
const myCollRef = collection(db, "myCollectionName");
const myDocRef = doc(myCollRef);
await setDoc(myDocRef, myDocData);
ログイン後にコピー
ログイン後にコピー

紛らわしいことに、「データの追加」に関する Google ドキュメントでは setDoc の代わりに addDoc 関数を参照していることに注意してください。 setDocis が推奨される理由については、以下の追記を参照してください。

上記のコード スニペットでは、myDocRef= ステートメントが auto-id が割り当てられるポイントです。割り当てられた値を見つける必要がある場合は、myDocRef.id で見つかります。この点の詳細については、以下の追記を参照してください。

データ項目を識別子として使用してドキュメントを作成するには:

let myDocData =  .... create a data object  ..... 
let myDocumentIdentifier = .... create your identifier ....
const myDocRef = doc(db, "myCollectionName", myDocumentIdentifier)
await setDoc(myDocRef, myDocData);
ログイン後にコピー
ログイン後にコピー

文書を読む

ドキュメント ID を使用して 個々の ドキュメントを取得するには:

const myDocRef = doc(db, "myCollectionName", myDocId);
const myDoc = await getDoc(myDocRef);  
if (myDoc.exists()) {
  console.log("Document data:", myDoc.data());
} 
ログイン後にコピー
ログイン後にコピー

選択および順序付け基準を使用してドキュメントの選択を取得するには (例):

const myCollRef = collection(db, "myCollectionName");
const myQuery = query(myCollRef, where("myField1Name", "==", myField1Value), orderBy("myField2Name", "asc"));
const mySnapshot = await getDocs(myQuery);
mySnapshot.forEach((myDoc) => {
  console.log(myDoc.id, " => ", myDoc.data());
});
ログイン後にコピー
ログイン後にコピー

スナップショットの forEach 内では、ドキュメントのデータは myDoc.data() として使用でき、ドキュメントの docRef は myDoc.ref で、その docId は myDoc.id として使用できます。選択基準に一致するドキュメントの存在を判断することだけに興味がある場合、便利な方法は、mySnapshot.size.

がゼロ以外であるかどうかを確認することです。

スナップショット配列内の個々のドキュメントを参照したい場合は、n 番目のエントリのデータが mySnapshot.docs[n].data() にあり、その ID が mySnapshot.docs[n] にあります。 id

orderBy フィールドを指定しない場合、ドキュメントは docId の昇順で返されることに注意してください。また、複数の where フィールドを含める場合は、(複合) インデックスを作成する必要があります。ここではブラウザ検査ツールが役に立ちます。 「インデックスが必要です」エラー メッセージ内のリンクをたどるだけで済みます。 Firestore データベースでは、個々のフィールドに自動的にインデックスが付けられます。

コレクション内のドキュメントのすべてを取得するには:

const myCollRef = collection(db, "myCollectionName");
const myQuery = query(myCollRef);
const mySnapshot = await getDocs(myQuery);
mySnapshot.forEach((myDoc) => {
  console.log(myDoc.id, " >= ", myDoc.data());
});
ログイン後にコピー
ログイン後にコピー

Firestore 比較演算子は「==」、「>」です。 、「<」、「<=」、「>=」、「!=」に加えて、興味深い配列メンバーシップ演算子もいくつかあります。

コレクションの階層内のドキュメントのすべてを取得し、その後何かを実行します:

コレクションのマルチレベル階層の処理が終了したに特定のアクションを実行する場合は注意が必要です。コードにネストされた foreach ステートメントが多数含まれており、それぞれに await 命令が含まれている場合、セット全体がいつ終了したかを個々の await が通知することに依存できません。これらの各待機は別個のスレッドを占有し、有用な方法で相互に直接通信することはありません。

この問題を解決する 1 つの方法は、スナップショットで forEachs ではなく従来の for ループを使用することです。以下は、アクションを実行する前にサブコレクション内のすべての子をターゲットにする例です

let myDocData =  .... create an object containing your data item properties .....
const myCollRef = collection(db, "myCollectionName");
const myDocRef = doc(myCollRef);
await setDoc(myDocRef, myDocData);
ログイン後にコピー
ログイン後にコピー

ここでは、待機が厳密な順序で実行されることに依存でき、ループの終わりに到達すると、依存するアクションを自信を持って続行できることがわかります。ただし、これによって生じるパフォーマンスへの影響は重大である可能性があるため、次の配置に興味があるかもしれません:

forEach ループ内の await によって起動された個々の Promise を配列に格納することで、それらのハンドルを取得できます。次に、この配列に await Promise.all 命令を適用して、そのすべてのメンバーの Promise がいつ完了するかを確認できます。すべての状況に適合する単純なテンプレートをここで提供することは不可能ですが、以下は大まかな原則を示す「スケッチ」です。

ここでは、2 つの別々のコレクション (親と子) を含む 2 レベルの階層が、共通のparentsId フィールドによってリンクされています。 2 つのコレクションはメモリに読み取られて、集計の分析が可能になります。これは、すべての子が読み取られた場合にのみ実行できます。

let myDocData =  .... create a data object  ..... 
let myDocumentIdentifier = .... create your identifier ....
const myDocRef = doc(db, "myCollectionName", myDocumentIdentifier)
await setDoc(myDocRef, myDocData);
ログイン後にコピー
ログイン後にコピー

ドキュメントの更新

例 - ドキュメントの myDocData コンテンツの myField プロパティの値を変更する

const myDocRef = doc(db, "myCollectionName", myDocId);
const myDoc = await getDoc(myDocRef);  
if (myDoc.exists()) {
  console.log("Document data:", myDoc.data());
} 
ログイン後にコピー
ログイン後にコピー

例 - ドキュメント myDocId のコンテンツ全体を、myField プロパティのみを含む新しいオブジェクトに置き換えます

const myCollRef = collection(db, "myCollectionName");
const myQuery = query(myCollRef, where("myField1Name", "==", myField1Value), orderBy("myField2Name", "asc"));
const mySnapshot = await getDocs(myQuery);
mySnapshot.forEach((myDoc) => {
  console.log(myDoc.id, " => ", myDoc.data());
});
ログイン後にコピー
ログイン後にコピー

上記の例の {myField: myFieldValue} ビットを、変更するフィールドを含むオブジェクトに置き換えることで、複数のフィールドに同時に変更を適用できます。

文書の削除

const myCollRef = collection(db, "myCollectionName");
const myQuery = query(myCollRef);
const mySnapshot = await getDocs(myQuery);
mySnapshot.forEach((myDoc) => {
  console.log(myDoc.id, " >= ", myDoc.data());
});
ログイン後にコピー
ログイン後にコピー

トランザクション内の CRUD 操作

トランザクション内では、上で紹介したパターンは変更されませんが、setDoc コマンドは次のように修正されます。

runTransaction(db, async (transaction) => { ... }).catch(); 内関数:

  • getDoc は、transaction.get() に置き換えられます。
  • setDoc は、transaction.set() に置き換えられます。
  • deleteDoc は、transaction.delete() に置き換えられます。

追記

  1. 上で述べたように、Google は setDoc() と並行してドキュメントの作成と更新を行うための addDoc() 関数と updateDoc() 関数を提供しています。しかし、setDoc が両方の操作を実行できる場合、これは不必要に混乱を招くように思えます。また、トランザクションに関しては、addDoc() は自動 ID を持つドキュメントの作成にのみ使用できます。実際には、どこでも setDoc を使用するだけのほうが簡単に思えます。

  2. Firestore ドキュメント識別子を作成する doc(myCollRef) 呼び出しには待機がないことに気づいたかもしれません。これは、実際にコレクションにアクセスして、すでに使用されているものを確認することなく、Firestore が何らかの方法でこれを実行していることを示しています。これをどのように管理するかについて興味がある場合は、StackOverflow でのディスカッションをチェックしてみてください。

Google ドキュメントのリファレンス

  • Cloud Firestore にデータを追加する: https://firebase.google.com/docs/firestore/manage-data/add-data

  • Cloud Firestore でデータを読み取る: https://firebase.google.com/docs/firestore/query-data/get-data

  • Cloud Firestore からデータを削除する: https://firebase.google.com/docs/firestore/manage-data/delete-data

SDK ドキュメントは次の場所にあります:

  • https://firebase.google.com/docs/reference/js/firestore_ と
  • https://firebase.google.com/docs/reference/js/firestore_.transaction

以上がNgSysV: Firestore CRUD テンプレートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート