# ログイン機能の作成1 次にログイン機能を作成します。 `feature/login-func`にて作業します。 ```bash git switch -c feature/login-func ``` まず、フォームの入力値をstateにて管理できるようにします。loginInfoというオブジェクトのステートを定義します。その際に、型宣言を別ファイルにて行いimportするようにします。 `src`配下に`types`ディレクトリを作成し、その中に`login.ts`を作成します。その中に`LoginInfoType`を宣言します。

export type LoginInfoType = {
  email: string
  password: string
}

そしてこの型を使用してstateを定義します。

import { useState } from "react"
import { Input } from "../atoms/Input"
import { PrimaryBtn } from "../atoms/PrimaryBtn"
import { LoginInfoType } from "../../types/login"

export const LoginPage = () => {
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  })

  return (
    <div className="w-[500px] bg-white rounded-lg shadow-lg py-10">
      <form className="flex flex-col justify-center items-center gap-10">
        <h1 className="text-3xl text-lime-800 font-bold text-center">
          ログイン
        </h1>
        <div className="w-[80%]">
          <Input
            type="text"
            placeholder="email"
          />
        </div>
        <div className="w-[80%]">
          <Input
            type="password"
            placeholder="password"
          />
        </div>
        <PrimaryBtn onClick={() => null}>ログイン</PrimaryBtn>
      </form>
    </div>
  )
}

このstateを変更する関数を作成しましょう。

import { ChangeEvent, useState } from "react";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { LoginInfoType } from "../../types/login";

export const LoginPage = () => {
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  });

  const changeLoginInfo = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target
    setLoginInfo({ ...loginInfo, [name]: value })
  }

  return (
    <div className="w-[500px] bg-white rounded-lg shadow-lg py-10">
      <form className="flex flex-col justify-center items-center gap-10">
        <h1 className="text-3xl text-lime-800 font-bold text-center">
          ログイン
        </h1>
        <div className="w-[80%]">
          <Input
            type="text"
            placeholder="email"
          />
        </div>
        <div className="w-[80%]">
          <Input
            type="password"
            placeholder="password"
          />
        </div>
        <PrimaryBtn onClick={() => null}>ログイン</PrimaryBtn>
      </form>
    </div>
  );
};

ではinputタグにてstateが変更できるように、`name`、`value`、`onChange`をセットします。

...
  return (
    <div className="w-[500px] bg-white rounded-lg shadow-lg py-10">
      <form className="flex flex-col justify-center items-center gap-10">
        <h1 className="text-3xl text-lime-800 font-bold text-center">
          ログイン
        </h1>
        <div className="w-[80%]">
          <Input
            name="email"
            type="text"
            placeholder="email"
            value={loginInfo.email}
            onChange={changeLoginInfo}
          />
        </div>
        <div className="w-[80%]">
          <Input
            name="password"
            type="password"
            placeholder="password"
            value={loginInfo.password}
            onChange={changeLoginInfo}
          />
        </div>
        <PrimaryBtn onClick={() => null}>ログイン</PrimaryBtn>
      </form>
    </div>
  );
...

次にログインボタンを押した際に、ログインするようにします。実際にはここでログイン用のAPIを叩きますが、今回はAPIを模した関数を作成します。 `src`配下に`api`ディレクトリを作成し、その中に`login.ts`を作成します。login.tsの中には以下のような関数を作成します。こちらの関数は、`loginInfo`のstateを受け取り、`email`が`test@example.com`で`、password`が`password`の場合に、`id`と`name`を返却し、それ以外はエラーとなるようにします。返却値に関しては、`types/login.ts`に宣言しましょう。

export type LoginInfoType = {
  email: string
  password: string
}

export type LoginReturnType = {
  id: number
  name: string
}

import { LoginInfoType, LoginReturnType } from "../types/login"

export const login = (info: LoginInfoType): LoginReturnType => {
  const { email, password } = info
  if (email === "test@example.com" && password === "password") {
    return { id: 1, name: "sample太郎" }
  } else {
    throw new Error()
  }
};

そして、ボタンを押した際の関数を作成します。今回formタグのonSubmitにセットしますので、デフォルトの挙動をキャンセルするため、`event.preventDefault()`を実行します。そして先ほどの`login`関数を呼び出します。この際に、`email`もしくは`password`に誤りがある場合は例外が発生し、`catch`文に入ります。エラー時は、`errorMessage`というstateにて管理し、errorMessageに文字が入っている場合は画面に表示するようにしましょう。

import { ChangeEvent, FormEvent, useState } from "react";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { LoginInfoType } from "../../types/login";
import { login } from "../../api/login";

export const LoginPage = () => {
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  })
  const [errorMessage, setErrorMessage] = useState("");

  const changeLoginInfo = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target
    setLoginInfo({ ...loginInfo, [name]: value })
  }

  const handleLogin = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setErrorMessage("")
    try {
      login(loginInfo)
    } catch {
      setErrorMessage("ログインに失敗しました");
    }
  };

  return (
    <div className="w-[500px] bg-white rounded-lg shadow-lg py-10">
      <form className="flex flex-col justify-center items-center gap-10" onSubmit={handleLogin}>
        <h1 className="text-3xl text-lime-800 font-bold text-center">
          ログイン
        </h1>
        {errorMessage !== "" && (
          <div className="p-5 bg-red-500 text-white w-[80%] rounded-lg">
            {errorMessage}
          </div>
        )}
        <div className="w-[80%]">
          <Input
            name="email"
            type="text"
            placeholder="email"
            value={loginInfo.email}
            onChange={changeLoginInfo}
          />
        </div>
        <div className="w-[80%]">
          <Input
            name="password"
            type="password"
            placeholder="password"
            value={loginInfo.password}
            onChange={changeLoginInfo}
          />
        </div>
        <PrimaryBtn onClick={() => null}>ログイン</PrimaryBtn>
      </form>
    </div>
  );
};

これで`test@example.com`と`password`と入力することで、ログインが成功し、それ以外はエラーメッセージが表示されるかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: ログインフォームをstateにて管理できるようにし、ログイン失敗時のエラーハンドリングを追加 ``` としましょう。