今回のアプリではまず最初にユーザーのニックネームをフォームに入れて「はじめる」を押すとチャットの画面に遷移します。そのチャット画面の中でメッセージとしてテキストフィールドにメッセージを送るとチャット画面にユーザー名とテキストが表示されます。他のユーザーがチャットにメッセージを送っても同様に表示されるように実装します。
コンポーネント
Reactコンポーネント要素の構成を説明します。まずindex.jsファイルでhtmlのidがrootのDOMの要素にAppコンポーネントを組み込むように記述します。このAppコンポーネントが各コンポーネントの一番親になります。続いてそのコンポーネントにHooksのuseStateとしてユーザーのニックネームのデータを格納します。フックとはreactの新しくできた概念で関数コンポーネントの中でもstateとして値を保持することができるようになりました。使い方はreactからuseStateをimportしてconst [name, setName] = useState(”);という形でuseState関数の引数にデフォルトの値を入れて、returnで返ってくる配列の一つ目の要素にその現在stateに格納されている値、二つ目の要素に一つ目の要素の値を変更する関数を返します。なので上のように定数を二つセットで代入して使います。AppコンポーネントにuseStateでユーザーの名前を格納できるようにすることでそのuseStateのstateのnameに値が入っているかいないかで表示させるページを変更させることができます。もしユーザーがニックネームを入れて「はじめる」ボタンを押すとuseStateのnameにニックネームが格納されてチャットページが表示させるようにします。具体的には最初のニックネームを入力するページをsignInコンポーネントで管理し、チャットのページをMainコンポーネントで管理させるようにし、if分でuseStateのnameに値が空だった場合にSignInコンポーネント、値が入っていた場合にMainコンポーネントを表示させるようにします。次にMainコンポーネントですが、その中でチャットで表示させるメッセージを表示させるMessageListコンポーネントとメッセージを入力させるMessageInputFieldコンポーネントを作成します。さらにMessageInputFieldコンポーネントの中にもテキストを入力させるフォームのMessageFieldコンポーネントと送信ボタンであるMessageSubmitButtonコンポーネントを作成しました。
なぜこんなにコンポーネントを分けるのか
今回実際にコンポーネントを分けて作成してみて部品をつなぎ合わせて作っていきました。コンポーネントを分けて作成した場合のことを考えてみるとコードが長くなってしまい今どの部分を作っているのかわからなくなってしまいます。もっと複雑なものを作るとなると余計そうなると思います。そこで各コンポーネントをそれに適した名前をつけて管理することでわかりやすくなります。Reactは各コンポーネント間のデータの受け渡しが簡単にできるのでこの仕組みを使わないてはないです。もし各コンポーネント間で同じデータを使いたい場合はそれらの親のコンポーネントにstateを持たせることによって簡単に実装することができます。
