YouTubeの「プログラミングチュートリアル」チャンネルの動画を参考に、Reactでログインフォームを作ってみました。今回はフロント部分のみで、バックエンドとのAPI連携はしていません。ゴールとしては、「ユーザー名」「メールアドレス」「パスワード」を入力し、ログインできるようにします。その際にバリデーションチェックを行い、入力誤りがあればエラーを表示させます。<a href="https://www.youtube.com/watch?v=HB3kZKfMm-s" target="_blank" rel="noopener noreferrer">動画URL</a><h2 id="h48162eced8">使用技術</h2>React - 18.2.0HTMLCSS<h2 id="h0b18e049c9">ファイル構成</h2><pre><code>- node_modules
- public
- src 
 -- App.css
 -- App.js
 -- index.css
 -- index.js
- packge.json
- gitinore
- yarn.look</code></pre><h2 id="h6e69ed5281">全体のコード（App.js）</h2><pre><code>// App.js

import { useState } from "react";
import "./App.css";


function App() {
 const initialValues = { username: "", mailAddress: "", password: "" };
 const [formValues, setFormValues] = useState(initialValues);
 //配列だと値しか入っていかない。objectならキーと値を入れることができる
 const [formErrors, setFormErrors] = useState({});
 // ログインボタンをクリックしたかどうか
 const [isSubmit, setIsSubmit] = useState(false);


 const handleChange = (e) =&gt; {
 const { name, value } = e.target;
 setFormValues({ ...formValues, [name]: value });
 setIsSubmit(true);
 };


 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 //ログイン情報を送信する
 //バリデーションチェックをする
 setFormErrors(validate(formValues));
 };


 //どの値をバリデーションチェックするのか→引数が必要
 const validate = (values) =&gt; {
 const errors = {};
 const regex =
 /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
 if (!values.username) {
 errors.username = "ユーザー名を入力してください";
 }
 if (!values.mailAddress) {
 errors.mailAddress = "メールアドレスを入力してください";
 } else if (!regex.test(values.mailAddress)) {
 errors.mailAddress = "正しいメールアドレスを入力してください";
 }
 if (!values.password) {
 errors.password = "パスワードを入力してください";
 } else if (values.password.length &lt; 4) {
 errors.password = "4文字以上15文字以下のパスワードを設定してください";
 } else if (values.password.length &gt; 15) {
 errors.password = "4文字以上15文字以下のパスワードを設定してください";
 }
 return errors;
 };


 return (
 &lt;div className="App"&gt;
 &lt;form onSubmit={(e) =&gt; handleSubmit(e)}&gt;
 &lt;h1&gt;ログインフォーム&lt;/h1&gt;
 &lt;hr /&gt;
 &lt;div className="uiForm"&gt;
 &lt;div className="formField"&gt;
 &lt;label&gt;ユーザー名&lt;/label&gt;
 &lt;input
 type="text"
 placeholder="ユーザー名"
 name="username"
 onChange={(e) =&gt; handleChange(e)}
 /&gt;
 &lt;/div&gt;
 &lt;p className="errorMsg"&gt;{formErrors.username}&lt;/p&gt;
 &lt;div className="formField"&gt;
 &lt;label&gt;メールアドレス&lt;/label&gt;
 &lt;input
 type="text"
 placeholder="メールアドレス"
 name="mailAddress"
 onChange={(e) =&gt; handleChange(e)}
 /&gt;
 &lt;/div&gt;
 &lt;p className="errorMsg"&gt;{formErrors.mailAddress}&lt;/p&gt;
 &lt;div className="formField"&gt;
 &lt;label&gt;パスワード&lt;/label&gt;
 &lt;input
 type="text"
 placeholder="パスワード"
 name="password"
 onChange={(e) =&gt; handleChange(e)}
 /&gt;
 &lt;/div&gt;
 &lt;p className="errorMsg"&gt;{formErrors.password}&lt;/p&gt;
 &lt;button className="submitButton"&gt;ログイン&lt;/button&gt;
 {/* エラー文の数が0個なら */}
 {Object.keys(formErrors).length === 0 &amp;&amp; isSubmit &amp;&amp; (
 &lt;div className="msgOk"&gt;ログインに成功しました&lt;/div&gt;
 )}
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre> <h2 id="h2591ec88d6">コード解説</h2><h3 id="ha4abfe896f">onChangeで入力情報を取得する</h3><pre><code>// App.js 

&lt;div className="formField"&gt;
 &lt;label&gt;ユーザー名&lt;/label&gt;
 &lt;input
 type="text"
 placeholder="ユーザー名"
 name="username"
 onChange={(e) =&gt; handleChange(e)}
 /&gt;
&lt;/div&gt;</code></pre>input への入力があった場合、onChange={(e) =&gt; handleChange(e)} で入力情報を取得する。<pre><code> const initialValues = { username: "", mailAddress: "", password: "" };
 const [formValues, setFormValues] = useState(initialValues);</code></pre>ReactHooksのuseState を 使用して、inputへ入力された文字列を格納する状態変数を設定する。useStateの初期値は、initialValues のオブジェクトを設定する。formValues の文字列をinputへ入力されたタイミングで、username へ格納していく必要がある。なので、inputタグにonChange={(e) =&gt; handleChange(e)}を設定する。<pre><code>// handleChange関数 

const handleChange = (e) =&gt; {
 const { name, value } = e.target;
 setFormValues({ ...formValues, [name]: value });
 setIsSubmit(true);
 };</code></pre>inputタグへ入力があるたびに、handleChange 関数が発火して、useState の formValue へ文字列が格納される。usename ・ mailAddress ・ password を見分ける必要があるため、分割代入を使用し、const {name, value} = e.target でnameとvalueを取得する。その後、スプレッド構文を使用して、formValues へ name と value を格納し、 useState の setFormValues へセットする。 <h3 id="hbf8070ca09">ログインボタンをクリックしたら、ログイン情報を送信する</h3><pre><code>// App.js

&lt;form onSubmit={(e) =&gt; handleSubmit(e)}&gt;</code></pre>form タグへ onSubmit を設定し、ログインボタンがクリックされる度に、handleSubmit が発火される。<pre><code>// App.js 

 //配列だと値しか入っていかない。objectならキーと値を入れることができる
 const [formErrors, setFormErrors] = useState({});

const handleSubmit = (e) =&gt; {
 e.preventDefault();
 //ログイン情報を送信する
 //バリデーションチェックをする
 setFormErrors(validate(formValues));
 };</code></pre> e.preventDefault() でクリック時の更新をなくす。バリデーションチェックするために、空の配列 [formErrors, setFormErrors] を準備して、その中にエラーを格納していく。オブジェクトにすることで、値だけでなく、キーと値を格納することができる。setFormErrors で validate 関数を呼び出す。<pre><code>// App.js 

//どの値をバリデーションチェックするのか→引数が必要
 const validate = (values) =&gt; {
 const errors = {};
 const regex =
 /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
 if (!values.username) {
 errors.username = "ユーザー名を入力してください";
 }
 if (!values.mailAddress) {
 errors.mailAddress = "メールアドレスを入力してください";
 } else if (!regex.test(values.mailAddress)) {
 errors.mailAddress = "正しいメールアドレスを入力してください";
 }
 if (!values.password) {
 errors.password = "パスワードを入力してください";
 } else if (values.password.length &lt; 4) {
 errors.password = "4文字以上15文字以下のパスワードを設定してください";
 } else if (values.password.length &gt; 15) {
 errors.password = "4文字以上15文字以下のパスワードを設定してください";
 }
 return errors;
 };</code></pre> 複数のパターンを const errors = {} でオブジェクトに格納することで、汎用性が上がる。(!value.username) ユーザー名に入力がなかった場合。(!value.mailAddress) メールアドレスに入力がなかった場合、また、regex へメールアドレスの正規表現を格納し、正しい表記で入力されなかった場合もエラーを表示させる。パスワードは、入力がなかった場合と4文字以下の時、15文字以上の時にエラーを表示させる。<h3 id="h3bc4a1f213">ログインに成功したかどうか</h3><pre><code>//App.js

 // ログインボタンをクリックしたかどうか
 const [isSubmit, setIsSubmit] = useState(false);

 {/* エラー文の数が0個なら */}
 {Object.keys(formErrors).length === 0 &amp;&amp; isSubmit &amp;&amp; (
 &lt;div className="msgOk"&gt;ログインに成功しました&lt;/div&gt;
 )}</code></pre> ログインが成功する条件としては、エラーが0個 かつ ログインボタンをクリックしたか をクリアした時に成功となる。エラーの keys の数を数えて0個ならOK（エラー文の数）。isSubmit でログインボタンをクリックしたかをチェックするが、初期値は false を設定し、handleSubmit が実行されたときに、true になる。<h2 id="h3bcda3e6b0">最後に</h2>今回はログインフォームのフロント部分のみを学習の一環として制作をしました。今後は、バックエンドのAPIと連携させていく方法も学んでいきたいと思います。

YouTubeの「プログラミングチュートリアル」チャンネルの動画を参考に、Reactでログインフォームを作ってみました。今回はフロント部分のみで、バックエンドとのAPI連携はしていません。

Frontend Engineer Tech Blog

React

Reactでログインフォームを実装（フロントのみ）

React

GSAP

CSS

jQuery

Javascript