チャットアプリ

GitHub:https://github.com/piny940/clubroom

1. はじめに

discordのようにグループトークができるチャットアプリを開発したのでその記録を記します。

2. 作ったアプリについて

2-1 アプリの概要
 2-2 アプリの3つの特徴
 2-3 アプリの画面

2-1 アプリの概要

このチャットアプリは部活動やサークルで使われることを想定して制作しました。部活ごとに「グループ」を作成し、グループごとに複数のトークルームを作ることができます。

アプリ画面

2-2 アプリの3つの特徴

1. グループごとにトークルームを整理できる
 2. トークルームに簡単に招待ができる
 3. レスポンシブデザイン

1. グループごとにトークルームを整理できる

このアプリは、LINEにおいて1つのサークルで「学園祭用のグループ」や「合宿用のグループ」「団体戦用のグループ」など複数のグループチャットを作成してトークルームがごちゃついてしまうという問題を解消するという目的で作成しました。
このアプリでは、グループごとに複数のトークルームを作ることができ、トークルームをわかりやすく整理することができます。

1枚目: サッカー部のグループ、2枚目: 3年1組のグループ

2. トークルームに簡単に招待ができる

LINEなどではグループチャットにクラスのメンバーを招待するために全員を招待する手間が必要でした。
このアプリでは、複数のメンバーをグループやトークルームに手軽に招待できるよう、1つの招待リンクを使って複数の友達を招待できるようにしました。

たくさんの友達を招待したい時は、招待リンクを渡すだけで招待ができます！

左: グループ設定画面、右: トークルーム招待画面
グループ招待

3. レスポンシブデザイン

スマートフォンから見てもレイアウトが崩れないよう工夫しました。
スマホ画面

2-3 アプリの画面

メイン画面
左のトークルーム一覧からトークルームを選択し、グループトークをすることができます。
トーク設定画面
トークルーム名の右の歯車を押すとトークルーム設定を開くことができ、招待リンクをコピーすることができます。

グループ新規作成
右上のグループ名をクリックするとグループ新規作成ができます。グループを作った人は自動的にそのグループの管理者となり、新規メンバーの招待・グループの削除をする権限が付与されます。
グループ設定画面
右上のアイコンを押すとグループ設定を開くことができ、招待リンクをコピーすることができます。

3. 開発の流れ

2022年7月〜11月で要件定義・開発を行いました。開発全体を通して設計・実装を全て1人で行いました。

時期	内容
7月	要件定義・設計
8〜11月	開発

使用技術

バックエンド

Rails

フロントエンド

Next.js(React.js)
Typescript
テスト: jest・cypress

4. プロジェクトを通して学んだこと

4-1. 多対多構造を持つデータベース

今回のアプリでは、「ユーザーとグループ」と「ユーザーとトークルーム」が多対多の関係になります。また、ユーザーは属している各グループにおいて管理者か一般メンバーかが決まっており、その情報も保持する必要があります。

そこで、本アプリではユーザーとグループの間に中間テーブルjoiningsを定義し、ロールに関する情報をjoiningsテーブルに保持する設計にしました。

この開発を通して、中間テーブルを通した多対多構造の扱い方、has_many :throughの扱いなどを学ぶことができました。

多対多構造のER図

4-2. Reactコードの設計

このアプリでは、バックエンドとの通信などの含めた複雑なフロントエンドを扱う必要がありました。そのため、ステートを扱うコンポーネントと見た目を扱うコンポーネント等、コンポーネントごとの役割を明確化してコードを整理する勉強ができました。