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

ログインの画面を作成する(前回の内容が分かってれば今回は楽勝)

作成日: 2023-10-08T09:59:47.887Z

はじめに

前回は新規登録画面を作成しました。
今回はログイン画面です。ですが、前回の内容がわかっていればほとんどこの記事を見なくてもいけるでしょう。
わからない方は前回の記事を見ながら試行錯誤してみてください。
今回はほとんど解説をしないのでご了承ください。

完成の画面

前回とほとんど変わりませんね。
今回はコードを羅列していくだけにします。

コーディング

1 文言ファイル

login:{
        title:"ログイン",
        instruction:"メールアドレスとパスワードを入れてください。",
        validationCheck:{
            required:"この項目は必須です",
            email:"メールアドレスの形式が違います",
            password:"パスワードが短いです"
        },
        attribute:{
            email:{
                labelName:"email",
                typeName:"email",
            },
            password:{
                labelName:"password",
                typeName:"password",
            }
        },
        buttonTitle:"ログイン！！！",
        gobackBotton:"ホームに戻る"
    }

2 型定義のファイル

//ログインの時の型
export type loginType={
    email:string;
    password:string;
}

3 validation rulesファイル

// ログインのバリデーションチェック
export const loginValidation = yup.object({
    email: yup
        .string()
        .required(ja.signup.validationCheck.required)
        .email(ja.signup.validationCheck.email),
    password: yup
        .string()
        .required(ja.signup.validationCheck.required)
        .min(8, ja.signup.validationCheck.password)
});

4 loginFormの実装

「login」フォルダの下に「loginForm」フォルダを作成してください。
.tsxは以下の通り。

'use client'
import { loginValidation } from "@/shared/rules";
import { loginType } from "@/shared/type";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import styles from "./style.css";
import InputForm from "@/app/components/inputForm";
import ja from "@/shared/ja";
import SubmitButton from "@/app/components/submitButton";
import RoutingButton from "@/app/components/routingButton";
import linkName from "@/shared/linkName";

const LoginForm = () => {
    const { register, 
        handleSubmit,
        formState:{errors}
    } = useForm<loginType>({
        resolver: yupResolver(loginValidation),
    });
    const onSubmit=async(data:loginType)=>{
        console.log(data);
    };
    return (
        <div>
            <div className={styles.inputText}>
                <InputForm
                    labelName={ja.login.attribute.email.labelName}
                    register={register('email')}
                    error={'email' in errors}
                    helperText={errors.email?.message} 
                    typeName={ja.login.attribute.email.typeName}                
                />
            </div>
            <div className={styles.inputText}>
                <InputForm
                    labelName={ja.login.attribute.password.labelName}
                    register={register('password')}
                    error={'password' in errors}
                    helperText={errors.password?.message} 
                    typeName={ja.login.attribute.password.typeName}                
                />
            </div>
            <div className={styles.inputButton}>
                <SubmitButton
                    submitEvent={handleSubmit(onSubmit)}
                    buttonTitle={ja.login.buttonTitle}
                />
            </div>
            <div className={styles.inputButton}>
                <RoutingButton
                    linkName={linkName.home}
                    linkTitle={ja.login.gobackBotton}
                />
            </div>
        </div>
    );
}

export default LoginForm;

styleは以下の通り。

import { style } from "@vanilla-extract/css";

const styles={
    inputText:style({
        margin:"20px"//ボタンとボタンの間を20pxくらい開けておく。marginBottomでも良いかも。
    }),
    inputButton:style({
        margin:"25px"//ボタンとボタンの間を20pxくらい開けておく。marginBottomでも良いかも。
    }),

}
export default styles;

5 page.tsxおよびstyle.css.tsの作成

TextField等は共通のcomponentとして作っているので実装する必要はありません。
最後に上2つのファイルを実装して終わりです。

import LoginTitle from "@/app/components/loginTitle";
import styles from "./style.css";
import ja from "@/shared/ja";
import LoginForm from "./loginForm";

const Login = () => {
    return (
        <main className={styles.containar}>
            {/*ログイン画面のタイトル*/}
            <LoginTitle
                title={ja.login.title}
                instruction={ja.login.instruction}
            />
            <LoginForm/>
        </main>
    );
}

export default Login;

styleを最後にふります。

import { style } from "@vanilla-extract/css";

const styles={
    containar:style({
        width:"75%",//長さはブラウザの横の75% 
        margin:"150px auto",// 上に50pxで以外は中央よせに,
        textAlign:"center",//文字を中央に寄せる(デフォルトは中央添え)
    }),
}
export default styles;

流れるように飛ばしてしまいましたが、何度も言う通り前回のコードとほとんど差異はありません。
前回のコードを理解上で実施することを強くお勧めします。

次回

APIを叩いてログイン機能を作成する。