【初級編DAY17】よくあるアニメーションを自在に作れるようになろう②

最終問題「フォームに入力された値をアラートに表示しよう」を見ていきます。

フォームに入力された値をアラートに表示しよう

jQuery("#js-form-name").on("submit", function (e) {

  e.preventDefault();

  const nameInput = jQuery("#js-input-name");

  const yourName = nameInput.val();

  if (!yourName) {

    nameInput.next(".error-message").text("必須項目です");

    return;

  }

  nameInput.next(".error-message").text("");

  alert(`${yourName}さん、こんにちは`);

  return false;

});

解説

1. jQuery("#js-form-name").on("submit",
   .on("submit"…　はフォームの内容が送信されたらという意味
   フォームに関するイベントアクションなのでidはフォームのidをしてしている
2. ・・・function (e) {
   通常イベントメソッドにはそれぞれデフォルトのアクションが存在する。submitの場合は「フォームの送信」がデフォルトのアクションとなる。デフォルトのアクションが動いてしまうと更新が行われてしまうため、下記3にてその動きを止めたい。その為にまずは「フォームの送信イベント」をfunctionの引数(e)に格納している。
3. e.preventDefault();
   引数e　に「フォームの送信イベント」が格納されている。それを.preventDefaultで送信イベントをキャンセルしている。それにより、ページの更新は行われない。
4. const nameInput = jQuery("#js-input-name")
   nameInputに"#js-input-name"の情報を取得
   const yourName = nameInput.val()
   yourNameに上記のフォームに入力されている値を取得※.val()は値を指定
   ※一括でconst nameInput = jQuery("#js-input-name").val()で書くことも可能である※別々にすることで別で使用する際の利便性が生まれる
5. if (!yourName) 
   もし、変数yourNameが空だったらを意味をする。下記にて解説する。
   (!yourName)の！の意味は「反転の意」という。！を一つつけると、値が存在すればfalse、存在しなければtrueを返す。そのため、yourName内が空の場合はtrue、何か文字が入っていればfalseで次の項目へと進む。
6. {nameInput.next(".error-message").text("必須項目です");
   
   まずtrue(真)の場合(この場合はyourNameが空だったとき）。変数nameInputの次の兄弟要素の(".error-message")を選択し、そのtextを変更している。変数nameInputには要素の情報が入っているので、これがもし項目４で値の情報のみとしていた場合はこの式がなりたたず、「trueの次の(".error-message")要素＝エラー」となってしまうので要注意。その時は(".error-message")を直接指定すると良い。
7.     return;}
   処理を抜ける。これを書かないと続けて次の処理（false)へ進んでしまう。
8.   nameInput.next(".error-message").text("");
     alert(`${yourName}さん、こんにちは`);
   一度空欄でsubmitをしていた場合、項目6で行った「必須項目です」が残っている場合がある。false（値が有る）となった場合はコチラは消したいので、空欄にしておく。アラートにyourNameに取得している値を表示させる。
9.   return false;
   古いブラウザではpreventDefault();が正しく機能しないためにreturn false;の記述を行っていたが現在は必要ないそう

新しく覚えたいこと

■デフォルトイベントのキャンセル（preventDefault）■

.on("submit",function (e) {
 e.preventDefault();

引数eに「フォームの送信イベント」が格納されている。
それを.preventDefaultで送信イベントをキャンセルしている。それにより、ページの更新は行われない。
※.on("submit"・・・に限らず、それぞれのデフォルトイベントがあります。

■反転の意(!変数)■

「変数yourNameが空だったら」を意味をする。！の意味は「反転の意」という。！を一つつけると、値が存在すればfalse、存在しなければtrueを返す。そのため、yourName内が空の場合はtrue、何か文字が入っていればfalseで次の項目へと進む。

---

実務に近い処理となってきたように感じます・・

一口に変数と言っても色々な使い方があることがわかりますね。

しっかりと理解を深めながら進めていきましょう♫

今日はここまで٩( ''ω'' )وお疲れ様でした。