未分類

チャットアプリ

投稿日:

今回のアプリではまず最初にユーザーのニックネームをフォームに入れて「はじめる」を押すとチャットの画面に遷移します。そのチャット画面の中でメッセージとしてテキストフィールドにメッセージを送るとチャット画面にユーザー名とテキストが表示されます。他のユーザーがチャットにメッセージを送っても同様に表示されるように実装します。

コンポーネント

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を持たせることによって簡単に実装することができます。

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

zoomなう

中学の友達とzoomでオンライン飲み会をしています。三人でやっているのですが、相手の二人は一緒にいてスマブラをやっています。画面では二人がスマブラに夢中になっている映像がさっきから流れていて、中学校の …

no image

創造性とは何か

今日は「武士道」のまとめと、読んでいる「創造性とは何か」について書きます。 武士道 どんな本? 著者の新渡戸稲造が日本の精神性を武士道を通して海外に発信している本です。文章は堅く、読みづらかったのです …

no image

typescript、電気

今日は昨日学習したtypescriptの復習と今日読んだ本の内容について書いていこうと思います。 抽象メソッド abstract class クラス名で抽象クラスを定義し、その中で抽象メソッドを定義し …

no image

創造性とは何か(続)

創造性とは 創造性とはここではただ単にものを生み出すという意味ではなく、その生み出したものによってどのような問題を解決することができるのかまでを創造性と呼んでいます。ここまで人間が文化を発達させ、生き …

no image

進化しすぎた脳2

 今日は面接を2社受けました。一社目はなんか可愛らしい感じのかたで内定をもらえそうな感じでした。2社目の方は単調な質問ばかりで足がガクガクふるえていました。対極な感じでいい経験ができたと思います。明日 …