ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

FirebaseをちらりとみたりReact書いたりしてた #334

毎日技術日誌

Firebase

名前だけ聞いたことがあったのですが、今作っているアプリケーションに活かせるかもと思ってみてみた。

私が使いたいのはRealtime database。JSON形式のデータを呼んだり書いたりということをクライアントから行えて、その上変更をサブスクリプションできるのでチャットアプリ的なリアルタイムさが求められる用途にも使えるらしい。(あとは、クライアントがオフラインになっても利用を継続できて、オンラインになったときに同期を取ってくれるみたいな機能もあるらしい)

とても良さげだとは思ったのですが、すでに書きかけだけど自前でゴリゴリ書いたサーバー側があることに加えて、ユーザー認証的な機能をつけようとすると、別途Firebase Authenticationというやつをつかってあげないといけなかったり、今回作ろうとしているものにはちょっとオーバーなので採用は見送りました。

(Authenticationの方はGoogle・GitHub・Twitterといったサービスを使ったログインや、通常のパスワードとIDを使ったログイン・電話番号認証つきのログインなどを実装できるプラットフォームのようです。自前でユーザーの情報を管理しなくてもいいのはかなり良さげですね。)

React

てなわけで、Firebaseの採用は見送ってゴリゴリとフロントエンドを書いてました。

今回作ろうとしているアプリケーションはリアルタイム通信が必要だったので、ちょっとレガシーかなと思いつつもSocket.ioを採用してみました。

そして、フロント側で以下のようなUtilを作って叩くようにしてみました。

export default class Api {
  public socket: any;

  constructor() {
    this.socket = io('http://localhost:8000');
  }

  async join(name: string) {
    this.socket.emit('Join', name);
    return new Promise<User>(resolve => {
      this.socket.on('Joined', (user: User) => {
        resolve(user);
      });
    });
  }
}

(一部抜粋)

叩く側からはWebSocket使っていることを意識しなくて済む…と思ったんですが、上のコードに示したような処理なら普通にAPI立てればそれで済んだ気がしてきた。

リアルタイム性が求められる情報だけをsocket使ってやりとりした方がコード綺麗だったのでは…。

雑談

ボルダリングはいいぞ。

というかFirebaseすごいっすね。(超今更)こういうものがあるって知らなきゃ使えないし、常にアンテナ張っておくのは大事なことなんだなと思いました。