無限∞Todo+他人のTodoが見れるWebアプリをReactとFirebaseで作った

作ったもの

TodoのTodoのTodo...が作れ、他人のTodoが見れるTodoリスト
夢叶えるツールLisTodon

使ったもの

• React
• React-Router
• Material-UI
• Firebase
  • Authentication
  • Realtime Database
  • Hosting

データはローカルストレージに保存
他の端末からも見れるようにと、他人のTodoを見れたら面白いかと思いFirebaseのAuthとDBを使った。

学んだこと

Firebaseを初めて使ってみた

• めちゃめちゃ楽だった
• これが全て無料なのはすごい
  • AWSも無料枠はあるけど、個人で使うならFirebaseの方が上限が決まっているので安心感がある
• ReactやVueなどのSPAとの相性は抜群だと思った
  • 「ホスティング、認証、データ保存」Firebaseだけで完結する
    • ※Node.jsが使える環境で静的ファイルのみ
• Authentication
  • アプリ側でTwitter用、Facebook用などを作る必要がなくキーをFirebaseで設定するだけだった
  • 認証ユーザーだけ書き込み許可するやり方も簡単（後述の「Realtime Databaseのルール」を記述するだけ）
  • どれだけ簡単にできるのかサンプルを作った
    • 10分でできるReact+FirebaseのGoogleAuth
• Realtime Database
  • 進化版のCloud Firestoreもあるが、まだβ版で子ノードの削除などができないため今回は見送った

Material-UIがv0からv1になっていた

• v1は、基本的にstyleを細かく指定する必要がありReact Nativeの使い方に近くなった
• 個人的にそういう細かい設定はしたくないので、v0のデフォルトのまま使える仕様が好きだった

設定したFirebase Realtime Databaseのルール

{
  "rules": {
    ".read": true,
      "todos": {
      "$user_id": {
        ".write": "$user_id === auth.uid"
      }
    },
    "latests": {
      ".write": "auth !== null",
    },
    "tags": {
      ".indexOn": "count",
      ".write": "auth !== null",
    },
    "forks": {
      ".indexOn": ".value",
      ".write": "auth !== null",
    }
  }
}

• 読み込みは誰でも可能、
• latests,tags,forksは認証ユーザーのみが書き込み可能
• todosは認証ユーザーで自分のみが書き込み可能
• indexOnはsortを使う時のindex

失敗したこと

• 先にアプリ名を決めたため、Firebaseのアプリ登録で、すでに使われていて登録できなかった
  • 使いたかったアプリ名「listodon」
  • Firebaseのアプリ名「listodoon」
    • listodoonで作ればよかった...
      
  • 次回からはアプリ名を登録できるか調べてから決めたい（ドメインとかも）
• Reduxを使わなかった
  • 数ページだから必要ないかと思ったけど、途中からページをまたがってデータを共有したくなった
    • 今回は無理やり感ある実装で乗り切った
    • 保守や拡張を考えるとReduxはやっぱり便利だと実感した
      • （MobXは流行るのか・・・？）
• Todoの階層化は画期的ではと思った
  • 探してみたら以外に昔からあった
  • それでもReact
    

ホスティングサーバー

• React Routerを使った場合rewriteの設定が必要になる。
• 最初にGitHub Pagesを試してみたがrewriteの設定の他に、React Routerのbasenameの設定も必要になり少し大変そうだった。
• 公式でもサイトと設定方法などが紹介されていた。
• 今回はFirebase Hostingを試してみた。下記２つの設定だけで簡単でした。

Firebase Hostingの設定

下記のfirebase initの質問をYesにするとrewriteの設定が作られる

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

公式サイトの設定方法で記述されている下記を追記

firebase.json

{
  "hosting": {
    ...
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
    ...

つまづいた点

FirebaseDBの orderByChild は foreachを使う（ snapshot.val だと sort されていない）
(参考) https://stackoverflow.com/questions/38345510/firebase-orderbychild-unexpected-results

余力や反響があれば追加したいもの

• チェックしたものをアーカイブ
• 並び替え
• 入力補完（サジェスト）
• 検索
• デザイン最適化