【Next.js】useStateとformを使ったログイン画面 | ポートフォリオ開発記録#2

まえがき

第1回ではルーティングについてやりました。
今回は画面上の情報を取得するための方法について書いていきます。
JSをいちいち書かなくていいので、このuse○○がReactの使いやすさの一つというかJSではできないことという印象ですね。

本文

この記事の対象者

ここも第1回と同じですね。
要するに、完全未経験を除いた初心者です。

前提

以下インストール済(インストール方法は省略)
・React 19.0.0
・Next.js 16.0.0
・App Router

1.formタグ

HTMLやJSPの経験者ならわかると思いますが、Submit系のイベントをやるためのタグです。
buttonを押下時にデータを送信するためには必要です。
これはReactでも変わりません。
※Reactの場合はformタグなしでも動かせるようですが……

function Login(){
    (※1)
return (
    (※2)
)
}

export default Login

前回にも書きましたが、※1には変数や関数が必要です。
仮にhandleLogin()とすると、※2については以下のようなものが必要です。

<`form onSubmit={handleLogin}>

さて、当然ながら<`/form>タグで後ろをくくってあげます。

※「`」はマークダウンで表示させるために追記したもので、本来は不要です。
　マークダウン、全然慣れない……

formタグの使い方はこれだけです。

2.useState

次に、入力情報の処理です。

まず、functionの宣言の前に以下のような記述をします。

import { FormEvent, useState } from 'react'

これでuseStateを呼び出す準備ができました。
※FormEventは後で使います。

次に※1で以下のようなものを宣言します。

  const [userId, setUserId] = useState('')

useStateはReactが提供している関数コーポネントで、
()の中の引数が初期値になります。
つまり、これは初期値が""(空文字)である訳です。
あと命名規則は○○、set○○であれば基本的に自由です。
※これを使う場合はtsxファイル先頭に「"use client"」をつけることでブラウザ側で動く設定にする必要があります。

これをJavaでたとえると、フィールドとそれのSetterです。

たとえば、ユーザIDのテキストエリアを以下のように設定します。

            <input
              type="text"
              value={userId}
              onChange={(event) => setUserId(event.target.value)}
            />

最低限の情報だとこうなりますね。

さて、value={userId}でここの入力値が先述宣言したuserIdとなり、
onChange={(event) => setUserId(event.target.value)}で
フォーム要素（ここでいうとinputタグの中身）が変わったらすぐに反映されます。

※このeventは

  const handleLogin = async (event: FormEvent<HTMLFormElement>) => {

で宣言済み

だから、

<button type="submit">登録</button>

上記のようなボタンを設定したうえで

  const handleLogin = async (event: FormEvent<HTMLFormElement>) => {
   alert(userId);
  }

と記述すれば入力値がアラートで表示されます。

3.ヴァリデーション

ですが、入力項目について重要なことが残っています。
そう、ヴァリデーションです。

もちろん、バックエンドでもやりますけど、
フロントエンドでチェックできたらそこが一番はやい訳です。

さて、以下のようにすれば少なくとも必須かどうか、桁数の最大と最小は決められます。

            <input
              type="text"
              value={userId}
              onChange={(event) => setUserId(event.target.value)}
              minLength={8}
              maxLength={16}
              required
            />

8～16桁で必須となります。

Submit時にもっと詳しくチェックしたいなら、
以下のように設定します。

  const handleLogin = async (event: FormEvent<HTMLFormElement>) => {
    const userIdRegex = /^[!-~]{8,16}$/;

    if (!userIdRegex.test(userId)) {
      alert("ユーザIDは8文字以上16文字以内の半角英数字と記号で入力してください。");
      return;
    }

今回は8文字以上16文字以内の半角英数字と記号を対象としたものですが、
正規表現を使えばもっといろんなチェックを使えます。

あとがき

さて、これで入力された値をチェックしたのち取得もできました。
が、ログイン画面なのでDBに問い合わせてユーザIDとパスワードがちゃんとあるか確認したいです。

こういった処理はバックエンドに任せているので、APIが必要となります。
次回はAPIを用いてJava/Spring Bootと通信するものとなります。