TERUSIの技術勉強まとめ(コーディング編)


My github

技術垢

実際に新規登録してTodoのページに遷移する

作成日: 2023-10-08T15:43:58.468Z

はじめに

前回はログイン部分の画面を作成しました。今回は実際にバックエンドと連携して新規登録をしてみたいと思います。

事前準備

事前準備として以前に作ったバックエンドのローカルサーバーを立ち上げておきましょう。
立ち上げておかないとリクエストすら送れない状態になります。

完成イメージ


既に登録されているユーザであればアラートが出て

まだ登録されていないユーザを登録してみると、

このように登録した名前が出力される。

コーディング開始

1 文言の追加

signup:{
        title:"新規登録",
        instruction:"名前、メールアドレス、パスワードを入力してください。",
        validationCheck:{
            required:"この項目は必須です",
            email:"メールアドレスの形式が違います",
            password:"パスワードが短いです"
        },
        attribute:{
            name:{
                labelName:"name",
            },
            email:{
                labelName:"email",
                typeName:"email",
            },
            password:{
                labelName:"password",
                typeName:"password",
            }
        },
        buttonTitle:"新規登録する",
        gobackBotton:"ホームに戻る",
        alradyHaveAccount:"データはもうすでにあります",/*追加*/
    },

2 URLの追加

APIのURLをlinkName.tsに追加します。

signupApi:"http://localhost:8080/auth/signup",

3 型定義

以下の型を追加します。

//新規登録でのレスポンスの型
export type resAuthData={
    name:string;
    email:string;
    password:string;
    id:string;
}

4 APIを叩くコードおよびユーザ情報の取得

ではAPIを取得するコードを書いていきます。「api」フォルダの中にauth.tsを作りましょう。
処理の流れとしては、

  1. APIを叩く
  2. レスポンスをjson形式に直す
  3. 「データはもうすでにあります」というレスポンスが返ってきたら空の配列を渡す
  4. それ以外ならユーザ情報を返す

です。実際のコードを見ていきましょう。

import ja from "@/shared/ja";
import linkName from "@/shared/linkName";
import { resAuthData, signupType } from "@/shared/type";
//signupのAPI送信
export const signup=async(data:signupType)=>{
    const res=await fetch(linkName.signupApi,{
        method:"POST",
        headers:{
            'Content-Type':'application/json'
        },
        body:JSON.stringify(data)
    });
    const resJson=await res.json()
    if(resJson.data===ja.signup.alradyHaveAccount){
        return [];
    }else{
        return resJson.data as resAuthData[];
    }
}

APIを叩くときはfetch関数を使います。こいつは非同期処理になるのでasync/awaitを使いましょう。
後は上記の処理のままのコードを書いています。

5 遷移先のページを簡単に作っておく

遷移先はtodoのページになるため「app」フォルダに「todo」を作っておきpage.tsxに以下のコードを書いておきます。

'use client'
import { useSearchParams } from "next/navigation";
const Todo = () => {
    const searchParams=useSearchParams();
    const name=searchParams.get('name');
    const id=searchParams.get('id');

    return (
        <div>
            こんにちは。{name}さん。
        </div>
    );
}

export default Todo;

ここのコードではqueryパラメータを読み取っています。idとnameをqueryパラメータとここではしています。queryパラメータというのはよくGoogle検索に使われているやつです。APIで送られてきたユーザ情報を受け取ってidとnameをqueryパラメータとして渡しそれを受け取って入力した名前を画面に出力します。本来であればJWTというものを使ったりuseContextなどを使って管理したりとするのですが、今回はゆるゆるのセキュリティですがこのやり方でいきたいと思います。

6 APIを取得して処理するコードを書く

「signup」フォルダの「signupForm」フォルダのindex.tsxにてonSubmit関数が存在すると思うがそこを書き換える。
以下のように書き換える。

const onSubmit=async(data:signupType)=>{
        const res:resAuthData[]=await signup(data);
        if(res.length===0){
            alert(ja.signup.alradyHaveAccount)
        }else{
            router.push(`/todo?id=${res[0].id}&name=${res[0].name}`)
        }
    };

処理としては

  1. APIを叩く関数を呼び出す。
  2. 返ってきた配列の長さが0の場合はアラートでメッセージを出す。
  3. それ以外の場合はidとnameをqueryパラメータとしてページ遷移する

です。
これで上記画像のような結果になるのではないでしょうか？
APIとの連携はどうでしたか？
このようにフロントとバックエンドの繋ぎの部分をやっていくとバックエンドの方が何をしているのかがわかってくるはずです。
ということで次回はログインの方をやっていきましょう。

次回

実際にログインしてみる。