typescript ・react・redux toolkit・connected-react-router・bootstrap5・firestore・firebase authenticationを使う。成果物URL: https://qiita-chat.netlify.app





reduxをすっきり書けるredux toolkitを触った。
んでアウトプットに匿名チャットを作った。

firebase authenticationを使って匿名ログイン
firestoreonSnapshotでデータベースの変更を検知して
新しいチャットデータを反映させる方式です。

成果物


https://qiita-chat.netlify.app


リポジトリ


https://github.com/yuzuru2/qiita-chat


firestore セキュリティルール


rules_version = '2';
service cloud.firestore {
  function isAuthenticated() {
    return request.auth != null;
  }

  function isValidBoardSchema(board) {
    return board.size() == 4
      && 'uid' in board && board.uid is string
      && 'message' in board && board.message is string
      && 'createdAt' in board && board.createdAt is timestamp
      && 'updatedAt' in board && board.updatedAt is timestamp
  }

  function isValidBoardData(board) {
    return 1 <= board.message.size() && board.message.size() <= 150
  }

  match /databases/{database}/documents {
    match /boards/{boardId} {
      allow list: if request.query.limit <= 100;
    }

    match /boards/{boardId} {
      allow create: if isAuthenticated() && request.resource.data.uid == request.auth.uid && isValidBoardSchema(request.resource.data) && isValidBoardData(request.resource.data);
    }
  }
}

物理名 論理名 備考
uid 名前 string 必須
message メッセージ string 必須・150 文字以内
createdAt 作成時間 Date 必須・timestamp
updatedAt 更新時間 Date 必須・timestamp

uidfirebase authenticationで得るuid


参考 URL


https://qiita.com/subaru44k/items/a88e638333b8d5cc29f2 https://qiita.com/keitakn/items/7433c89ce52073e861a1


ワイの成果物


https://qiita.com/yuzuru2/items/b5a34ad07d38ab1e7378

① コード共有サイト(SPA) React
https://code.itsumen.com

② 画像共有サイト(SPA) React
https://gazou.itsumen.com

③ チャット(SSR) Nuxt.js
https://nuxtchat.itsumen.com

④ チャット(SPA) React
https://chat4.itsumen.com

⑤ 掲示板(SSR) Next.js
https://board.itsumen.com

⑥ 掲示板(SPA) Vue
https://board.itsumen.com

⑦ レジの店員を呼ぶスマホアプリ(Android)
https://play.google.com/store/apps/details?id=com.itsumen.regi&hl=ja

⑧ ブログ(静的サイトジェネレータ) Hugo
https://yuzuru.itsumen.com

ホームへ