質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1690閲覧

Reactチャットアプリで相手の名前を取得する方法

21212121

総合スコア61

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/04/06 04:29

イメージ説明

ChatJS

1import React, { useState, useEffect } from "react"; 2import Input from "../../components/UI/ChatUI/Input/Input"; 3import MessagesChat from "../../../src/components/UI/ChatUI/Messages/Messages"; 4import "./Chat.css"; 5import Sidebar from "../../components/UI/Sidebar/Sidebar"; 6import Midlebar from "../../components/UI/ChatUI/Midlebar/Midlebar"; 7import { Col, Row } from "react-bootstrap"; 8// import axios from "../../axios"; 9import ScroolToBottom from "react-scroll-to-bottom"; 10import { css } from "glamor"; 11 12const Chat = () => { 13 const [Message, setMessage] = useState(""); 14 const [Name, setName] = useState(""); 15 const [messages, setMessages] = useState([]); 16 17 const submitHandler = event => { 18 event.preventDefault(); 19 addIngredientHandler({ name: Name, text: Message }); 20 }; 21 22 useEffect(() => { 23 const name = localStorage.getItem("name"); 24 setName(name); 25 }, []); 26 27 useEffect(() => { 28 fetch("https://react-hooks-update-676a6.firebaseio.com/ingredients.json") 29 .then(response => response.json()) 30 .then(responseData => { 31 console.log(responseData); 32 const loadedIngredients = []; 33 for (const key in responseData) { 34 loadedIngredients.push({ 35 id: key, 36 name: responseData[key].name, 37 text: responseData[key].text 38 }); 39 } 40 setMessages(loadedIngredients); 41 }); 42 }, []); 43 44 const ROOT_CSS = css({ 45 height: 600, 46 width: 650 47 }); 48 49 const addIngredientHandler = text => { 50 fetch("https://react-hooks-update-676a6.firebaseio.com/ingredients.json", { 51 method: "POST", 52 body: JSON.stringify(text), 53 headers: { "Content-Type": "application/json" } 54 }) 55 .then(response => { 56 return response.json(); 57 }) 58 .then(responseData => { 59 setMessages(prevIngredients => [ 60 ...prevIngredients, 61 { id: responseData.name, ...text } 62 ]); 63 }); 64 }; 65 66 return ( 67 <div> 68 <Row style={{ width: "100%" }}> 69 <Col md={3}> 70 <div style={{ paddingLeft: "30px" }}> 71 <Sidebar /> 72 </div> 73 </Col> 74 <Col md={3}> 75 <div> 76 <Midlebar /> 77 </div> 78 </Col> 79 <Col md={6}> 80 <div style={{ textAlign: "right" }}> 81 <div className="chatContainer"> 82 <ScroolToBottom className={ROOT_CSS}> 83 <MessagesChat messages={messages} /> 84 </ScroolToBottom> 85 <form onSubmit={submitHandler}> 86 <Input 87 Message={Message} 88 setMessage={setMessage} 89 submitHandler={submitHandler} 90 /> 91 </form> 92 </div> 93 </div> 94 </Col> 95 </Row> 96 </div> 97 ); 98}; 99export default Chat; 100

MessagesJS

1import React from "react"; 2import "./Messages.css"; 3const Messages = ({ messages }) => ( 4 <div> 5 {messages.map(i => ( 6 <div key={i}> 7 <div className="messageContainer justifyEnd"> 8 <div className="messageBox backgroundBlue"> 9 <p className="messageText colorWhite">{i.text}</p> 10 </div> 11 <p className="sentText pr-10">{i.name}</p> 12 </div> 13 <div className="messageContainer justifyStart"> 14 <p className="sentText pl-10 ">相手</p> 15 <div className="messageBox backgroundLight"> 16 <p className="messageText colorDark">久美子よ</p> 17 </div> 18 </div> 19 </div> 20 ))} 21 </div> 22); 23export default Messages; 24

現在Firebaseを使ってチャットアプリを作っているのですが、相手の名前をどうしても取得することができません。
自分の名前に関しましては、signup時にLocalStorageに保管してそれをとってきて取得できるのですが本来チャットアプリを開発する際はどのようにして相手の名前を取得することができるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

本来チャットアプリを開発する際はどのようにして相手の名前を取得

「本来」がどうだかは分かりませんが、多くの場合、メッセージ取得の際に名前など表示に必要な情報を一通り含んだデータを取得するように思います。
たとえばTwitterなどは(チャットとは少し違いますが)ツイートを取得するAPIを叩くと、ツイート1つ1つに発言者のアカウント情報をかなり事細かに付与した姿で値を返してきます。

投稿2020/04/06 06:27

thyda.eiqau

総合スコア2982

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

21212121

2020/04/07 09:20

なるほどです。 フロント側の問題ではなくサーバー側の問題なんですね! バックエンド担当者と話し合ってみます。 ご回答ありがとうございます。
thyda.eiqau

2020/04/07 18:22

「サーバー側の問題」というのは含蓄のある表現だと思いますが、フロントが必要とする値を返すようにバックエンドがデザインされているのにもかかわらずデザイン通り動いていないのであればバックエンド側の修正が必要です。 そもそも適切にデザインされていないのであればデザインが悪いので、仕様書を作った人と、仕様書を読んでもその問題に気づかなかったコーダーの問題です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問