ReactとFirebaseて作ったチャットアプリケーションの紹介とどうやって作ったのか

ReactとFirebaseを使ってチャットアプリケーションを作ったので、どうやって作ったのかを書きたいと思う、

作ったチャットアプリケーション

作ったものはTwichatなので、よかったら遊んでみてください。部屋を作ってその中でチャットをすることができます。

ログインはTwitterのみです。

どうやって作ったか

まずは、AdobeXDで大まかなデザインを決める

AdobeXDはAdobeのUXデザインツールですね。

画面遷移等も簡単に作って見ることができるので、最初に軽く案を作るのにはいいんじゃないかと思います。スタータープランは無料のようなので、使ってみるのもいいんじゃないかな。

フロントはReactを使用

フロントはReactを使用。なぜReactを使ったのかというと、使いたかったから。ちなみにReduxは使っていない。使おうかと思ったけど、ReduxのRead MeにYou Might Not Need Reduxっていうリンクがあるんだよね。まあ、Reduxこれぐらいの規模ならいらないんじゃね？とか思ってやめた。 次Reactで何か作る時あったら挑戦しようかな。

バックエンドはFirebase

バックエンドは、Firebaseを使いました。今まで、Mysqlを使ってきたような自分にとってNoSQLのデータベースは新鮮。特定の場所にあるデータが追加されたか、削除されたかを監視することができるのが便利。

プランは3段階に分かれている。

無料プランがあるので、気軽に手を出すことができるのが素敵ですよね。

コード管理はGitLab

「無料のプライベートリポジトリを使いたいなあ」と思ったので、GitLabを使用。GithuubとはUIが違うので最初は戸惑うかもしれないけど、gitでコミットしてプッシュして、とGithubと同じ要領で使うことができる。

CIもGitLab

GitLabにはCIも付いているので、それを使いました。これも無料です、素晴らしい。

開発の流れ

流れとしては、コードを管理しようと思ってからは自分のMacでコードを書いてGitLabにPushします。

Pushしたら、GitLabCIがlintとbuildとfirebaseへのデプロイするように設定。順番に実行されるようにして、どれかが失敗したらデプロイしません。

まとめ

Firebaseを使えば、確かに楽な部分はあるかもしれないけど、リレーショナルデータベースじゃないからちょっと使いづらいかも・・・なんていう時もあると思います。簡単なアプリケーションであればいいかもしれないけど、複雑なものだとDBが苦しくなりそうです。といえ、フロントに集中して開発することができるのは素敵ですね。