NestとReactを使った簡易版twitterの作成-フロントエンド編
1.開発準備
2.ディレクトリ、ファイルの作成
3.App.tsx (ページ遷移制御)
4.Signup.tsx (サインアップ画面)
5.Login.tsx （ログイン画面）
6.Home.tsx (Tweet 投稿・表示画面)
6.最後に
開発準備
はじめに
ここではフロントエンド編の作成に取り組んでいきます。フロントエンドって聞いてぱっとしない方もいると思いますが要は見た目部分をぱぱっと作ってしまおう編です。
今回は 2 月に学んでもらった React を使ってフロントエンドを実装してもらう訳ですが、React を開発したのはかの有名な Facebook です。バックエンド編でザッカーバーグが出てきたのは実は伏線だったのかもしれませんね。
バックエンド同様質問は受け付けます。Slack で質問お願いします。
React アプリの起動
ターミナルを開いて、for-spring-training 上でコンテナ起動
docker-compose up
http://localhost:3000を開き以下の初期画面になっていたら正常です。
初期画面の変更
実際にフロントエンド開発をしていきましょう！
今回作るアプリの仕様
作るもの：簡易版 Twitter
今回のページ構成は以下の様になります
- ログイン
- ユーザー登録
- ツイート機能
ディレクトリファイルの作成
今回の frontend のディレクトリ構造は、このようになっています。
src
├── pages
│ ├── Signup.tsx
│ ├── Login.tsx
│ └── Home.tsx
├── App.tsx
└── index.tsx
ページ遷移制御
frontend/src/App.tsx に下記のコードをコピーして下さい。
App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Home from "./pages/Home";
import Login from "./pages/Login";
import Signup from "./pages/Signup";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/login' element={<Login/>}/>
<Route path='/signup' element={<Signup/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
解説
App.tsx では、React Router を用いて、ページの遷移を設定しています。 今回は、Homeが tweet 実行、表示画面、Login がログイン画面Signupがサインアップ画面です。
サインアップ画面
Signup 画面を作成していきます。
まずは、frontend/src/pages/Signup.tsx に下記のコードをコピーして下さい。
Signup.tsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
MDBBtn,
MDBContainer,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBRow,
MDBCol,
MDBInput,
MDBCheckbox,
} from "mdb-react-ui-kit";
import axios from "axios";
// サインアップ処理
function SignUp() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const handleSignUp = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
//axiosでpostを送る部分
try {
const response = await axios.post("http://localhost:3002/users/create", {
name: name,
email: email,
password: password,
});
sessionStorage.setItem("id", response.data.id);
sessionStorage.setItem("name", response.data.name);
navigate("/");
} catch (error) {
console.error(error);
}
};
return (
<MDBContainer className="my-5">
<MDBCard>
<MDBRow className="g-0 d-flex align-items-center">
<MDBCol md="4">
<MDBCardImage
src="https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg"
alt="phone"
className="rounded-t-5 rounded-tr-lg-0"
fluid
/>
</MDBCol>
<MDBCol md="8">
<MDBCardBody>
<form onSubmit={handleSignUp}>
<MDBInput
wrapperClass="mb-4"
label="name"
id="form1"
type="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<MDBInput
wrapperClass="mb-4"
label="Email address"
id="form1"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<MDBInput
wrapperClass="mb-4"
label="Password"
id="form2"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<MDBBtn className="mb-4 w-100">Sign up</MDBBtn>
<div className="d-flex justify-content-between mx-4 mb-4">
<a href="/login">Already have an account?</a>
</div>
</form>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>
</MDBContainer>
);
}
export default SignUp;
解説
次に、Signup.tsx のコードを説明していきます。
const handleSignUp = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
//axiosでpost
const response = await axios.post("http://localhost:3002/users/create", {
name: name,
email: email,
password: password,
});
//sesionStrageにidとnameを保存
sessionStorage.setItem("id", response.data.id);
sessionStorage.setItem("name", response.data.name);
//ページ遷移
navigate("/");
} catch (error) {
console.error(error);
s;
}
};
この handleSignUp 関数が実行されると、axios というライブラリを使用して非同期処理による HTTP 通信を行ないます。その後取得したユーザーの id と name を sessionStorage を使用してクライアント側に保存しています。
そして処理が成功した場合には、 navigate('/'); で、処理が終わった後に画面の遷移を行なっています。
Axios は、JavaScript／TypeScript で非同期 API 呼び出しを容易にするライブラリのことです。
Signup．tsx の form のコードを説明していきます。
<form onSubmit={handleSignUp}>
<MDBInput
wrapperClass="mb-4"
label="name"
id="form1"
type="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<MDBInput
wrapperClass="mb-4"
label="Email address"
id="form1"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<MDBInput
wrapperClass="mb-4"
label="Password"
id="form2"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<MDBBtn className="mb-4 w-100">Sign up</MDBBtn>
<div className="d-flex justify-content-between mx-4 mb-4">
<a href="/login">Already have an account?</a>
</div>
</form>
form onSubmit={handleSignUp} の中の onSubmit は、form の中の button(今回では、Sign up)が押された際に動くものです。従ってボタンが押された際に、上記で説明した、handleSignUp 関数が動くことになります。
ログイン画面
まずは、frontend/src/pages/Login.tsx に下記のコードをコピーして下さい。
Login.tsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
MDBBtn,
MDBContainer,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBRow,
MDBCol,
MDBInput,
} from "mdb-react-ui-kit";
import axios from "axios";
function Login() {
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSignIn = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
//axiosでpost
const response = await axios.post("http://localhost:3002/users/login", {
email: email,
password: password,
});
//sessionStrageにidとnameを保存
sessionStorage.setItem("id", response.data.id);
sessionStorage.setItem("name", response.data.name);
navigate("/");
} catch (error) {
console.error(error);
}
};
return (
<MDBContainer className="my-5">
<MDBCard>
<MDBRow className="g-0 d-flex align-items-center">
<MDBCol md="4">
<MDBCardImage
src="https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg"
alt="phone"
className="rounded-t-5 rounded-tr-lg-0"
fluid
/>
</MDBCol>
<MDBCol md="8">
<MDBCardBody>
<form onSubmit={handleSignIn}>
<MDBInput
wrapperClass="mb-4"
label="Email address"
id="form1"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<MDBInput
wrapperClass="mb-4"
label="Password"
id="form2"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<MDBBtn className="mb-4 w-100">Sign in</MDBBtn>
<div className="d-flex justify-content-between mx-4 mb-4">
<a href="/signup">Create a new account?</a>
</div>
</form>
</MDBCardBody>
</MDBCol>
</MDBRow>
</MDBCard>
</MDBContainer>
);
}
export default Login;
解説
次に、Login.tsx のコードを説明していきます。
handleSignIn 関数の説明していきます。
const handleSignIn = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
//axiosでpost
const response = await axios.post("http://localhost:3002/users/login", {
email: email,
password: password,
});
// レスポンスの中身を確認
sessionStorage.setItem("id", response.data.id);
sessionStorage.setItem("name", response.data.name);
navigate("/");
} catch (error) {
console.error(error);
}
};
handleSignIn 関数は実行されると、Signup の時と同様に、axios というライブラリを使用して非同期処理による HTTP 通信を行います。
Login．tsx の form のコードを説明していきます。
<form onSubmit={handleSignIn}>
<MDBInput
wrapperClass="mb-4"
label="Email address"
id="form1"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<MDBInput
wrapperClass="mb-4"
label="Password"
id="form2"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<MDBBtn className="mb-4 w-100">Sign in</MDBBtn>
<div className="d-flex justify-content-between mx-4 mb-4">
<a href="/signup">Create a new account?</a>
</div>
</form>
form で囲われているため、ボタンが押された際に(Sign in)、Signup.tsx で説明したのと同様に、handleSignUp 関数が動くことになります。
tweet 投稿・表示画面
次に、Tweet 投稿・表示画面画面を作成していきます。 まずは、frontend/src/pages/Home.tsx に下記のコードをコピーして下さい。
Home.tsx
import React, { useEffect, useState } from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBInput,
MDBRow,
MDBTextArea,
MDBBtn,
} from "mdb-react-ui-kit";
import { useNavigate } from "react-router-dom";
import axios from "axios";
type Tweets = {
userName: string;
content: string;
createdAt: string;
};
export default function Home() {
// 遷移するための関数
const navigate = useNavigate();
// ーーーーーツイート取得----------
// ツイートの一覧を管理するstate
const [tweetList, setTweetList] = useState<Tweets[]>([]);
// 全件のツイートを取得する処理
const getTweetList = async () => {
const response = await axios.get("http://localhost:3002/tweets");
setTweetList(response.data.tweetList);
};
useEffect(() => {
// 全件のツイートを取得する処理を呼ぶ関数
getTweetList();
}, []);
// ーーーーーツイート投稿----------
// 入力欄のツイートの内容を管理するstate
const [newTweet, setNewTweet] = useState("");
// ツイートの内容を変更する処理
const handleTweetChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setNewTweet(event.target.value);
};
// ツイートを投稿する処理
const handleTweetSubmit = async () => {
try {
if (newTweet !== "") {
await axios.post("http://localhost:3002/tweets", {
id: Number(sessionStorage.getItem("id")),
content: newTweet,
});
// ツイートを投稿したら全件のツイートを再取得する処理を呼ぶ関数
getTweetList();
}
// ツイートを投稿したらツイートの内容を空にする処理
setNewTweet("");
} catch (error) {
console.error(error);
}
};
// ーーーーー検索の処理----------
// 検索欄の内容を管理するstate
const [search, setSearch] = useState("");
// 検索欄の内容を変更をする処理
const handleSearch = (e: any) => {
setSearch(e.target.value);
};
// 検索ボタンを押した時の処理
const handleSearchPost = async (e: any) => {
e.preventDefault();
// 検索欄の内容が空の場合は全件のツイートを取得する処理を呼ぶ関数
// 検索欄の内容が空でない場合は検索結果のツイートを取得する処理を呼ぶ関数
search === "" ? getTweetList() : getSearchTweetList();
};
// 検索結果のツイートを取得する処理
const getSearchTweetList = async () => {
const res = await axios.post("http://localhost:3002/tweets/search", {
text: search,
});
setTweetList(res.data.tweetList);
};
// サインアウトの処理
const handleSignOut = () => {
sessionStorage.clear();
navigate("/login");
};
return (
<MDBContainer className="mt-5 w-screen">
<MDBBtn
color="danger"
rounded
className="float-start w-2"
onClick={handleSignOut}
>
sign-out
</MDBBtn>
<MDBRow className="justify-content-center w-100">
<MDBCol md="8" lg="6">
<MDBCard
className="shadow-0 border"
style={{ backgroundColor: "#f0f2f5" }}
>
<MDBCardBody>
{/* 検索部分 */}
<form className="mb-6" onSubmit={handleSearchPost}>
<MDBInput
wrapperClass="mb-2"
placeholder={"ツイートを検索"}
value={search}
label="Search"
onChange={handleSearch}
/>
<MDBBtn className="float-end" type="submit">
検索
</MDBBtn>
</form>
<div
className="mb-4"
style={{ maxHeight: "400px", overflow: "scroll" }}
>
{/* tweet表示部分 */}
{tweetList.map((data: Tweets, index: number) => (
<MDBCard className="mb-4" key={index}>
<MDBCardBody>
<p className="float-end">{data.createdAt}</p>
<div className="d-flex justify-content-between mb-3">
<div className="d-flex flex-row align-items-center pl">
<MDBCardImage
src="https://cdn.w3.org/thumbnails/200/avatars/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp"
alt="avatar"
width="25"
height="25"
/>
<p className="small mb-3 ms-2">{data.userName}</p>
</div>
</div>
<p className="">{data.content}</p>
</MDBCardBody>
</MDBCard>
))}
</div>
<p className="border-top pt-2">message</p>
<MDBTextArea
style={{ backgroundColor: "#fff" }}
className="text-dark"
color="primary"
contrast
id="textAreaExample"
label="message"
value={newTweet}
rows={4}
onChange={handleTweetChange}
></MDBTextArea>
<MDBBtn
color="primary"
rounded
className="float-end mt-2"
onClick={handleTweetSubmit}
>
Send
</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
最後に
お疲れ様でした。以上で春休み課題は終了です！正常に動作するか確認してみてください！
何かわからないことがあればいつでも質問お待ちしております！