0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Discord likeなチャットアプリを作成した話

Posted at

目次

1. はじめに
2. 作ったアプリについて
3. 開発の流れ
4. プロジェクトを通して学んだこと

1. はじめに

discordのようにグループトークができるチャットアプリを開発したのでその記録を記します。
制作したのは1年近く前になりますが、過去の開発記録を残すために記事を作成しました。

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

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

2-1 アプリの概要

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

アプリ画面

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

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

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

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

画面例
1枚目: サッカー部のグループ、2枚目: 3年1組のグループ
サッカー部のグループ
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コードの設計

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?