未分類

チャットアプリ

投稿日:

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

コンポーネント

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

引越し前夜

今日はとてもいい日でした。最後のバイトでしたし、引越し先での色々な準備も今のところ順調にいっています。おまけに焼肉に食べにいきましたし。ではここらで気分転換に少々書きます。気分はいつもとあまり変わらず …

no image

歌舞伎3

 今日は歌舞伎の動画を見ました。20分くらいでしたが、ちゃんと見たことがなかったので面白い体験で、心がゾクっと震える場面がありました。歌舞伎の本も読んでみたのでなお楽しめたのかも分かりません。どこの場 …

no image

資本主義とは

 今日は面接がなかったので本を読もうという日でした。「死なないやつら」を読み終わりまして、これのことをかこうと思います。この本はものすごく面白かったです。なのでスイスイ読むことができてあっという間でし …

no image

kind of blue

 ジャズの名盤です。これについて書きたいと思います。このアルバムはマイルスデイヴィスがリーダーの1959年にリリースされました。ここからいわゆるモードジャズの始まりと言われています。既存のリズム感や即 …

no image

ダラダラと

今日は昨日のたてたスケジュール通りダラダラしていました。このダラダラという言葉はいったいどこからダラダラと名付けられたのでしょうか。ちょっと考えてみれば不思議です、なぜダラダラという言葉が、というかダ …