こんにちは、KOUKIです。Reactで画面開発を行なっています。
前回は、ルーティング処理を実装しました。
今回は、ユーザー登録処理を実装します。
尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!
前回
事前準備
フォルダ/ファイル
1 2 |
mkdir react-admin/src/models touch react-admin/src/models/user.ts |
モジュールのインストール
1 2 3 |
cd react-admin # package.jsonが存在するディレクトリ内で実行 npm i axios |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
{ "name": "react-admin", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "axios": "^0.21.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/react-router-dom": "^5.1.7" } } |
ユーザー登録処理
登録画面からユーザー情報をAPI側へ送信して、ユーザーを登録できるようにしましょう。
画面の作成
まずは、画面の作成からです。
前回作成したpages/Register.tsxファイルに、ユーザー登録画面の実装を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
// pages/Register.tsx import React, {Component, SyntheticEvent} from "react"; class Register extends Component { firstName = '' lastName = '' email = '' password = '' passwordConfirm = '' // SyntheticEvent // https://ja.reactjs.org/docs/events.html submit = (e: SyntheticEvent) => { // formのデフォルトの挙動をキャンセルする // https://ja.reactjs.org/docs/handling-events.html e.preventDefault() } render() { return ( <main className="form-signin"> <form onSubmit={this.submit}> <h1 className="h3 mb-3 fw-normal">Please register</h1> <div className="form-floating"> <input className="form-control" placeholder="First Name" onChange={e => this.firstName = e.target.value} /> <label>First Name</label> </div> <div className="form-floating"> <input className="form-control" placeholder="Last Name" onChange={e => this.lastName = e.target.value} /> <label>Last Name</label> </div> <div className="form-floating"> <input type="email" className="form-control" placeholder="name@example.com" onChange={e => this.email = e.target.value} /> <label>Email address</label> </div> <div className="form-floating"> <input type="password" className="form-control" placeholder="Password" onChange={e => this.password = e.target.value} /> <label>Password</label> </div> <div className="form-floating"> <input type="password" className="form-control" placeholder="Password Confirm" onChange={e => this.passwordConfirm = e.target.value} /> <label>Password Confirm</label> </div> <button className="w-100 btn btn-lg btn-primary" type="submit">Submit</button> </form> </main> ) } } export default Register |
「docker-compose up」でコンテナを立ち上げた後、「http://localhost:3000/register」にアクセスしてください。

画面が表示されれば、OKです。
データ送信
登録画面の「Submit」ボタンを押下することで、APIへデータを送信し、ユーザー情報をDBに登録できるようにします。
まずは、Userモデルを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// models/user.ts export class User { first_name: string last_name: string email: string password: string password_confirm: string constructor( first_name: string, last_name: string, email: string, password: string, password_confirm: string) { this.first_name = first_name this.last_name = last_name this.email = email this.password = password this.password_confirm = password_confirm } } |
プロパティとして設定したフォーマットは、ユーザー登録API(http://localhost:8000/api/admin/register)へ送信するJSONのフォーマットに合わせておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
first_name: string last_name: string email: string password: string password_confirm: string ↓になるイメージ { "first_name": "...", "last_name": "...", "email": "...", "password": "...", "password_confirm": "..." } |
先ほど実装した「submit」の中身を実装します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
// pages/Register.tsx import {Component, SyntheticEvent} from "react"; import axios from "axios" import {User} from '../models/user' import {Redirect} from 'react-router-dom' class Register extends Component { ... registerUrl = 'http://localhost:8000/api/admin/register' state = { redirect: false } // SyntheticEvent // https://ja.reactjs.org/docs/events.html submit = async (e: SyntheticEvent) => { // formのデフォルトの挙動をキャンセルする // https://ja.reactjs.org/docs/handling-events.html e.preventDefault() const user = new User( this.firstName, this.lastName, this.email, this.password, this.passwordConfirm ) // フォーマットが合っていればクラスをそのまま渡せる await axios.post(this.registerUrl, user) // 送信に成功したらリダイレクトフラグを立てる this.setState({ redirect: true }) } render() { // ログイン画面へリダイレクト if (this.state.redirect) { return <Redirect to={'/login'} /> } return ( ... ) } } export default Register |
APIへのPOSTリクエストは、axiosで行っています。面白いことに、パラメーターのフォーマットが合っていれば、インスタンス化したUserデータをそのまま渡すことができます。
また、Stateにはリダイレクトフラグを入れています。送信に成功したら、自動的にログイン画面に遷移するように実装しました。
検証
まずは、Dockerコンテナを立ち上げます。
※立ち上がっていない場合
1 |
docker-compose up |
以下のパラメータを入れて、検証してみましょう。

パスワードはなんでもいいです。入力が完了したら、「Submit」ボタンを押下します。

ログイン画面に戻りました!データが登録されているはずです。

OKですね。
次回
次回は、ログイン画面の実装をしましょう。
Reactまとめ
参考書籍
ソースコード
ここまで実装したソースコードを下記に記載します。
Register.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
// pages/Register.tsx import {Component, SyntheticEvent} from "react"; import axios from "axios" import {User} from '../models/user' import {Redirect} from 'react-router-dom' class Register extends Component { firstName = '' lastName = '' email = '' password = '' passwordConfirm = '' registerUrl = 'http://localhost:8000/api/admin/register' state = { redirect: false } // SyntheticEvent // https://ja.reactjs.org/docs/events.html submit = async (e: SyntheticEvent) => { // formのデフォルトの挙動をキャンセルする // https://ja.reactjs.org/docs/handling-events.html e.preventDefault() const user = new User( this.firstName, this.lastName, this.email, this.password, this.passwordConfirm ) // フォーマットが合っていればクラスをそのまま渡せる await axios.post(this.registerUrl, user) // 送信に成功したらリダイレクトフラグを立てる this.setState({ redirect: true }) } render() { // ログイン画面へリダイレクト if (this.state.redirect) { return <Redirect to={'/login'} /> } return ( <main className="form-signin"> <form onSubmit={this.submit}> <h1 className="h3 mb-3 fw-normal">Please register</h1> <div className="form-floating"> <input className="form-control" placeholder="First Name" onChange={e => this.firstName = e.target.value} /> <label>First Name</label> </div> <div className="form-floating"> <input className="form-control" placeholder="Last Name" onChange={e => this.lastName = e.target.value} /> <label>Last Name</label> </div> <div className="form-floating"> <input type="email" className="form-control" placeholder="name@example.com" onChange={e => this.email = e.target.value} /> <label>Email address</label> </div> <div className="form-floating"> <input type="password" className="form-control" placeholder="Password" onChange={e => this.password = e.target.value} /> <label>Password</label> </div> <div className="form-floating"> <input type="password" className="form-control" placeholder="Password Confirm" onChange={e => this.passwordConfirm = e.target.value} /> <label>Password Confirm</label> </div> <button className="w-100 btn btn-lg btn-primary" type="submit">Submit</button> </form> </main> ) } } export default Register |
user.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// models/user.ts export class User { first_name: string last_name: string email: string password: string password_confirm: string constructor( first_name: string, last_name: string, email: string, password: string, password_confirm: string) { this.first_name = first_name this.last_name = last_name this.email = email this.password = password this.password_confirm = password_confirm } } |
Users.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// pages/Users.tsx import Nav from '../components/Menu' import Menu from '../components/Menu' const Users = () => { return ( <div> <Nav /> <div className="container-fluid"> <div className="row"> <Menu /> <main className="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div className="table-responsive"> <table className="table table-striped table-sm"> <thead> <tr> <th scope="col">#</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> </tr> </thead> <tbody> <tr> <td>1,001</td> <td>random</td> <td>data</td> <td>placeholder</td> <td>text</td> </tr> </tbody> </table> </div> </main> </div> </div> </div> ) } export default Users |
コメントを残す
コメントを投稿するにはログインしてください。