質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

700閲覧

記事の公開/非公開切り替え時のFirestoreのsetとupdateの使い分け方とtimestampの扱い方

Sagami_yyy

総合スコア8

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/09/22 02:17

前提

  • ユーザーが記事を書いて投稿するサービスをFirebaseを使って作成しています
  • 記事は公開/非公開を切り替えることができます
  • 記事の公開/非公開はユーザードキュメントのサブコレクションでそれぞれ管理しています
  • 記事の作成時は/postページで行ない、更新時は/{articleID}/editページで行ないます
  • 記事の作成時にcreatedAtを作成し、記事の更新時にupdateAtを作成します
  • 非公開の記事は作成時も更新時もcreatedAtとupdateAtが不要です
  • Firestoreの構造は現状下記の通りです([]がコレクションで{}が変数です)
[users] - {uid} - uid: string - name: string - [public] 公開記事のコレクション - {articleID} - title: string - body: string - createdAt: timestamp - updateAt: timestamp - [draft] 非公開記事のコレクション - {articleID} - title: string - body: string - createdAt: timestamp - updateAt: timestamp
  • 記事の作成または更新時の処理は下記ケース別に処理しています。
- 記事作成時:[public]または[draft]にset - 記事更新時 - 公開 → 非公開:[public]の該当ドキュメントをdelete、[draft]にset  - 非公開 → 公開:[draft]の該当ドキュメントをdelete、[public]にset - 公開/非公開を変えず、記事の内容のみを変える:同じドキュメントにset

該当のソースコード

  • Reactを使用しています
  • 下記のようなカスタムフックにまとめています

javascript

1type EditType = "post" | "edit"; // 記事作成時="post"、記事更新時="edit" 2type SaveType = "public" | "draft"; // 記事を保存するとき="public"、記事を非公開にするとき="draft" 3 4const useEdit = (editType: EditType) => { 5 6const [currentArticle, setCurrentArticle] = useState({title: "", body: ""}) 7useEffect(() => { 8 // 記事更新時ならFirestoreから記事データ取得 9 if(editType !== "edit") return; 10 const articleData = ... 11 setCurrentArticle(articleData); 12}, []) 13 14const save = (saveType: SaveType) => { 15 ... 16 const userDocRef = doc(collection(db, "users"), user.uid); 17 const del = saveType === "public" ? "draft" : "public"; 18 const setRef = doc( 19 collection(userDocRef, saveType), 20 articleID 21 ); 22 const delRef = doc( 23 collection(userDocRef, del), 24 articleID 25 ); 26 const batch = writeBatch(db); 27 const articleObj = 28 editType === "post" 29 ? { 30 ...currentArticle, 31 authorUid: user.uid, 32 articleID: articleID, 33 createdAt: serverTimestamp(), 34 } 35 : { 36 ...currentArticle, 37 updateAt: serverTimestamp(), 38 }; 39 editType === "post" ? batch.set(setRef) : batch.update(setRef); 40 batch.delete(delRef); 41 ... 42}

発生している問題

  • 作成/更新するオブジェクトのプロパティの種類に差異があり、かつsetメソッドを使っているため、公開/非公開を切り替えると消えるプロパティと増えるプロパティが発生します。

作成/更新時に作成するarticleObjの中身を統一すればよいかもしれませんが、その場合authorUidやarticleIDなどの更新する必要が無いプロパティもupdateすることになるのと、元のcreatedAtのtimestampの値が取得できません。
timestampはクライアントでは使えないっぽいので、stringに変換しています。
stringからtimestampに変換できればこの方法でよいと思いますが、調べたところ無理そうでした。
また、createdAtのみstringに変換してDBに保存すれば、update時に元のcreatedAtとしてプロパティに含めることができそうですが、stringにしてしまうとcreatedAtを使ったソートができなくなるっぽいのでこの方法はとれないです。

  • 公開/非公開を変更しない更新時にsetメソッドを使っています。

updateメソッドの方がふさわしいと思いますが、updateの代わりにsetを使っても大きなデメリットが無いようであれば、setのままでもよいと考えています。

  • 作成/更新のケース別に生成するオブジェクトとメソッドを切り替えるとよい気がしましたが、煩雑になりそうです。

思いつく限り、下記のパターンがあります。

ケースcreatedAtupdateAtコレクションとメソッド
公開記事作成不要publicにset
非公開記事作成不要不要draftにset
公開記事内容のみ更新不要publicにupdate
非公開記事内容のみ更新不要不要draftにupdate
公開→非公開不要不要publicにdelete、draftにset
非公開→公開不要publicにset、draftにdelete

上記のパターンでそれぞれオブジェクトとメソッドを切り替えることができるかは分かりません。

実現したいこと

  • できればsetupdateを適切な形で使い分けたいです
  • createdAtとupdateAtをtimestampのままDBに保存したいです(orderbyで使用するため)
  • できるだけシンプルな処理にしたいです

「こういったFirestoreの構造にすれば簡潔になる」ということがあれば構造の変更はいとわないです。

補足情報(FW/ツールのバージョンなど)

  • Firebase v9

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問