HTML

【図解付き】HTML5のフォームバリデーションの使い方

どうも、つよぽんです!

今回はHTML5から追加されたフォームバリデーション機能の使い方について説明します。

今回の記事は次のような方に向けて書きました。

想定読者
  • バリデーションが何か知らない方
  • HTMLのフォームバリデーションのやり方を知らない方
  • HTMLで用意されているフォームバリデーションの種類を知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLのフォームバリデーションの使い方を覚えるユーザーの入力した情報が意図したものか確認するための方法としてバリデーションというものがあります。そしてHTMLにはフォームバリデーションという機能が備え付けれられおり、簡単なデータ検証であればHTMLの属性を追加するだけで実装可能です。...

今回の内容は以下のとおりです。

今回の内容
  • バリデーションとは
  • HTML5から用意されたフォームバリデーションを使ってみる
  • 利用できるHTMLフォームバリデーションの種類

バリデーションとは

HTML5からHTMLレベルで使えるようになったフォームバリデーション機能。

そもそもバリデーションとは一体なんなのでしょうか?

英語だと「validation」といい、「確認」「検証」といった意味になります。

つまり、フォームバリデーションとは

フォームに入力されたデータが正しいものであるか確認・検証すること

ということになります。

バックエンド側でデータの最終チェックを行う

実際の開発では、フロントエンド側で入力されたデータは不正に書き換えることも可能なので、バックエンド側、つまりユーザーが関与できない部分でデータ検証が行われます。

バックエンド側で動いているプログラムでデータ検証を行うため、このときはPHPRubyなどを使って検証します。

フロントエンド側でデータ検証を行う意味

しかし、悪意を持たず純粋に入力を誤ったデータも全てバックエンドで検証する場合次のようなデメリットがあります。

  • 失敗すると事前にわかっているのに一連のデータのやり取りが終わるまでユーザーを待たせることになる
  • 失敗すると事前にわかっているのにサーバーにリクエストを投げる(無駄にサーバーに負荷をかける)

上記で書いた「失敗すると事前にわかっているの」の部分に注目してください。

例えば次のような場合は事前に入力ミスがわかる内容になります。

  • 入力必須項目なのにデータが入力されていない
  • 最低5文字以上入力しないといけないのに4文字しか入力されていない

これをバックエンドにデータを送る前にフロントエンドで入力ミスがあることをユーザーに知らせれば、サーバーと無駄な通信をしなくても済みます。

結果、ユーザーに「一連のデータのやり取りの完了(通信の完了)」を待たせることを防げるのです。

フロントエンド側でデータ検証を行う方法

従来は、フロントエンド側のバリデーション方法はJavaScriptを行った方法のみでした。

しかし、HTML5から用意された「フォームバリデーション機能」を使うことで、プログラミングをせずともデータの検証を行うことが出来るようになりました。

HTML5から用意されたフォームバリデーションを使ってみる

プログラミングをする子ども

利用できるフォームバリデーションの種類は色々ありがますが、ここでは次の2つバリデーションの使い方と挙動についてに静止画・アニメーション画像を使って説明します。

説明するバリデーション例
  1. 入力が必須なバリデーション
  2. 5文字以上入力が必須なバリデーション

入力が必須なバリデーション

入力必須なバリデーションにはrequired属性をつける入力必須なバリデーションにはrequired属性をつける

上の画像の実際に挙動は以下のアニメーション画像から確認できます。

入力必須エラー時の挙動入力必須エラー時の挙動

上の2つの画像の通り、inputタグrequired属性をつけるだけで入力必須バリデーションの実装が可能となります。(プログラミングを必要としない)

今回はinputタグを利用していますが、その他のユーザーにデータを入力・選択してもらうタグである「textarea」「select」タグなどにもrequired属性をつけることが出来ます。

5文字以上入力が必須なバリデーション

minlength属性を使って最低文字数を指定minlength属性を使って最低文字数を指定

上の画像の実際に挙動は以下のアニメーション画像から確認できます。

5文字以上入力するまでエラーが出ている様子5文字以上入力するまでエラーが出ている様子

上の2つの画像の通り、minlength属性をセットして値に入力して欲しい最低文字数をセットするだけで、指定した文字数を入力しないとエラーになる機能を実装することが出来ました。(プログラミングを必要としない)

利用できるHTMLフォームバリデーションの種類

1つ前の章では、「入力必須バリデーション」「最低入力文字数バリデーション」の2つのフォームバリデーション機能を実例を交えて解説しました。

この2つ以外にも利用できるフォームバリデーションがまだまだあります。

ここでは、どんなフォームバリデーションが用意されているのか簡単にまとめていきます。

用意されている機能
  • required : 入力必須項目のチェック
  • minlength : 入力できる最低文字数のチェック
  • maxlength : 入力できる最大文字数のチェック
  • min : 入力できる最低の数値のチェック
  • max : 入力できる最大の数値のチェック
  • pattern : 正規表現を使った文字列パターンチェック

上記のフォームバリデーション機能は全てHTMLで用意されているものなので、JavaScriptを使ってプログラミングをしなくても実装できる機能になります。

なお、紹介したフォームバリデーションについてもっと詳しく知りたい方は以下のMDNのドキュメントを参照していただけたらと思います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • バリデーション自体の意味を解説
  • フロントエンドとバックエンドのバリデーションの役割
  • 実例を使ったバリデーション機能の挙動確認
  • HTMLで用意されているフォームバリデーションの種類

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのフォームバリデーションの使い方を覚えるユーザーの入力した情報が意図したものか確認するための方法としてバリデーションというものがあります。そしてHTMLにはフォームバリデーションという機能が備え付けれられおり、簡単なデータ検証であればHTMLの属性を追加するだけで実装可能です。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTA にて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、主に「【学習コンテンツ】Web開発」を使って学習を進めていただきます。

あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Web白熱教室の学習コンテンツをメインに、指定した教材を使って学習する (学習プランに沿って学習を進めていただきます。)
  2. 学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
  7. 不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)

1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます

1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。

  1. コードを添削してもらえる
  2. 学習したことのアウトプットに対してフィードバックしてもらえる
  3. いつでも質問出来る
  4. 週1のオンライン講義に参加できる
  5. 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
  6. 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
  7. 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)

学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。

【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。

プログラミングスクールとの比較

プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。

プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。

10万円50万円100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。

オススメの学習方法

個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。

10万円50万円100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。

そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。

それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。

注意点

ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。

値上げする理由は次の以下の理由となります。

  • 値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
    • 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
    • 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です