未分類

チャットアプリ

投稿日:

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

コンポーネント

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

css

今日はcssのデザインに苦戦していました。今までcssを使ったデザインの設計をしてこなかったのでどのように見本のようにデザインを作ればいいのかあたふたしていました。午前中はモチベーションが上がらずまず …

no image

面接練習

 今日は本をほとんど見ていません。朝から面談が入り、昼からも面談がありました。夕方に一社面接を受けたのですが、微妙でした。でも昼に面談した方が面白かったので書きます。その会社さんはベンチャー企業なので …

no image

typescriptの配列

今日は午前中ずっとコンポーネントへどのように配列として値を渡すのかを考えていました。配列で値を渡さなくてもデータを渡すことができるのですが、記述が助長になり、可読性が低くなってしまいます。可読性が低く …

no image

人はなぜ戦争をするのか

 今日は「人はなぜ戦争をするのか」を読みました。この本は物理学者のアインシュタインが今やりとりしたい人は誰でどんなことを聞きたいかというイベントでアインシュタインが心理学者のフロイトに人はなぜ戦争をす …

no image

美術の話

 今日は朝は求人関係の作業で終わり、昼過ぎに面接を受け、そのあとはダラダラしていました。本は「片隅の美術と文学の話」を読んでいます。これは芸術家がどんな姿勢で作品と向き合ったいるのかを作家と画家、詩人 …