未分類

チャットアプリ

投稿日:

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

コンポーネント

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

Nordic Escapes

 今日このアルバムを聴いてとても感動したので書かせてもらいます。クリスチャン・ヤルヴィンというエストニア生まれの指揮者の方が手掛けたアルバムで、クラシックとジャズとアンビエントをミックスした音楽です。 …

no image

java

 javaを勉強しています。今日やった内容はjavaの考え方の基本となるオブジェクト思考について学びました。オブジェクト志向とは、開発者が楽でわかりやすく、楽しく開発を進めるために考えられた概念で、コ …

no image

引越し前夜

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

no image

明日はphpやります

 メルカリで購入したphpの参考書が届いたので少しやりました。明日バイトも何もないので進めたいと思います。さて今日はあさに統計の本を読み終わったのでそれについて書くのと、バイト前に読んだプログラミング …