Phoenix + Reactでチャットアプリを作ろう（Intro）

Elixir・PhoenixのWebsocketとReactのHooksで遊んでみた。

前から気になっていたElixir言語のPhoenixフレームワークを使ってチャットアプリを作ってみたので、そのプロセスをまとめてみた。

elixirのtutorialとちょっと古いRailsの知識でできるところまでWebsocket付きAPIを作って、ウェブ側もReactのHooksに初挑戦した。

結果、できたのがChatterアプリ。

まだ勉強中なので、「こうやった方がよくない？」などのコメントがあったらwelcomeです。

開発に入る前に、アプリの内容を簡単に説明すると、

データモデルは、

• Group：いわゆるチャットルーム。複数のチャットルームを作成することができ、Groupには複数のMessageが追加できる。
• Message：Group内で作成されるコメント。MessageはGroupとUserに結びつけられる。
• User：アプリのユーザ。認証・認可がないので、Messege作成時に作成者のユーザ名も送る必要がある。

画面は３つ：

左からグループ一覧画面、グループ詳細画面、グループ新規作成画面

グループ一覧画面（Group List）

• グループ名一覧：グループ名をクリックするとグループ詳細画面に遷移
• 新規作成ボタン：ボタンをクリックすると新規グループ作成画面に遷移

グループ詳細画面（Group Detail）

• メッセージ一覧：表示のみ
• 新規メッセージフォーム：ユーザー名とメッセージ分を入力して、Sendボタンで送信できる

グループ新規作成画面（New Group）

・グループ名を入力して、Createボタンで送信できる

みたいな感じ。

それでは、プロジェクトのディレクトリを作成して開発Start!

mkdir chatter
cd chatter

以下の順番に開発します。（Websocket目的で始めたのに、Part 3までWebsocketの開発に入れないのが残念だ。。。）

Part 1：Phoenixを使ったGroup・MessageのREST API作成

• Rest API：Group一覧取得、Group作成、Group詳細とその紐づいたMessageの取得

Part 2： React Hooksを使ったGroupの作成・参照画面作成

• Home画面：Groupsのリスト表示
• Group詳細画面：Groupと紐づいたメッセージの表示。
• Group作成画面：Group作成フォームの表示。新規Groupの追加。

Part 3：Phoenixを使ったMessageのWebsocket channel作成

• WebSocket Channel：Messageのリアルタイム作成・取得

Part 4： React Hooksを使ったMessage作成機能の追加

• Groupの詳細画面：新規Messageのリアルタイムの追加・表示