【jQuery】ちょっと勉強してみたjQueryでパスワード入力覧の表示/非表示を実装してみました。

はじめに

某プログラミングスクールのチーム開発でユーザー新規会員登録周りの実装を担当する事になりました。
並行して勉強していたjQueryの知識を利用してパスワード入力覧の表示/非表示の切替実装できないかな？と思って挑戦。
やってみたら実装できたので、せっかくなので記事にしてみました。

実装した内容

Railsにて実装してます。
よくみるやつです↓

「パスワードを表示する」にチェックすると

表示されるあれです。

実装内容

View(hamlです）

new.html.haml

-#該当そのソースコード抜粋
= f.password_field :password, type: "password", autocomplete: "new-password",placeholder: "7文字以上の半角英数字",class: "SinUpInputForm",id: "PWForm",minlength: "7"
-# 他の要素と規則性を持たせる事ができなかった為、IDを指定 
%span#SignUpPassWordCaution
 ※英字と数字の両方を含めて設定してください
.ContentSignUp__Infomation__CommonEntry__Confirm
 %input{name: "example", type: "checkbox", value: "サンプル",id: "CheckPW"}
  パスワードを表示する

jsファイル

password_switch.js

$(document).on('turbolinks:load', function() {
  $("#CheckPW").change(function(){
    if($(this).prop('checked')){
      $('#PWForm').attr('type','text');
    }else{
      $('#PWForm').attr('type','password');
    }
  });
});

View(haml)の解説

jquery(js)に、「viewのパスワード入力フォーム対してinput typeを"password"から"text"にしますよ」という記述を書いてあげてます。
ただ、どれだけ賢いjQueryさんも処理をする対象がわからないと何したらいいわからないですよね。
・・・もし空気読めたら最強です。が、空気読めないjqueryさんもいたら大変なので、そこは我儘言わないでこっちでしっかり提示してあげます。

なので、haml側で実装している"パスワード入力フォーム"タグと"チェックボックス"タグそれぞれにIDを付与しています。
これでjquery側がパスワード入力フォームとチェックボックスを認識する事ができるようになります！
この実装ではpassword入力覧にPWFormというID、チェックボックスにCheckPWというIDを設定しています。
こうする事で、仮にそれぞれのフォームが画面上に複数あったとしてもしっかり判断できます
※IDはユニーク（他と被らない）で命名しないといけないから同姓同名はいないはずなので、jQueryが処理する対象を間違う事はないはずです。

jQueryの解説

まず1行目。

1行目.js

$(document).on('turbolinks:load', function() {

これはrails 5.2系以上の場合に必要な記述らしいです。
（ごめんなさいまだ詳しく追って無いです）

続いて2行目

2行目.js

  $("#CheckPW").change(function(){

.change()メソッドは、主にviewのinput,select,textarea,checkboxなど、要素の中身が変更された時にイベント処理を実行することができるメソッドです。
先頭の$('')に囲まれた要素を対象とするので、これを日本語にすると

「CheckPWって名前のチェックボックスの状態が変わったら{}の中に書かれた内容を処理するで」
という意味になります。

3行目

3行目.js

    if($(this).prop('checked')){

条件分岐の代名詞、if文が登場です。
中身を見てみます。
propメソッドが使われています。
これは引数で指定している（ここではchecked）の状態と一致しているか一致していないか。を、
trueかfalseで返してくれるメソッド君です。0か1かの男です。
人間界では多少融通が効いてくれた方がいいですが、プログラミング界でははっきりしているやつの方がモテますね。（謎）

つまり、日本語訳すると「これ（#CheckPW")がチェック状態（checked)だったら？」となります。

4行目

4行目.js

      $('#PWForm').attr('type','text');

4行目は、checked状態。つまりpropさんが「こいつぁチェックが入っている状態ですぜ。アニキ！trueですぜ！」と教えてくれた時の処理です。
例のごとく&('') で指定されている人に対して、.attr('type','text')の処理を実行します。
今回はパスワードを入力する覧#PWFormを指定しています。このフォームに対してattrしちゃうみたいです。

~attr()メソッド~
これは、指定したHTML（ここでいうと#PWFormのIDが設定されている入力フォーム）の属性（inputタグのtype=""）をtextにするぞ。という事を書いています。
このパスワード入力フォームが、●●●●となっていたのは何故でしょうか？
そうです。inputタグのタイプが"password"になっているからです。
じゃあどうすれば表示できるのか・・・。
そうです。inputタイプを"text"にしてしまえば、入力した内容がそのまま表示される。といった訳です。

つまり、4行目を日本語にすると
「もし"CheckPW"っていう名前のチェックボックスにチェックが入っていたら、"PWForm"って名前がついた入力フォームを"パスワード入力フォーム"から"テキスト入力フォーム"にかえちまうぜ」
といっています。

5行目

5行目.js

    }else{

elseですね。日本語でいうと
「そうじゃなかったら」
ですね。「チェックが入っていなかったら」とはちょっと違います。今回の場合は結果としては同じですけど。

6行目

6行目.js

      $('#PWForm').attr('type','password');

5行目の「そうじゃなかったら」の場合に実行する処理です。
ここでいう「そうじゃなかったら」は詰まる所「チェックボックスにチェックが入っていなかったら」になりますよね。
うっすーーーくチェックが入っている。とか、間違ってナイキのマークが入っている。とかは無いはず。
・・・あ、でも仮にナイキのマークが入っていても「チェックが入っていたら」を満たせていないので6行目を実行しちゃいますね（笑

ここでやっている事は2行目でやっている事と変わりません。
attr()メソッドで指定している内容をpassword入力フォームに切り替えようぜに書き換えているだけです。
仮にこの1文がないと、チェックを外してもパスワードが非表示状態になってくれません。
ので、元に戻す。という観点でも実装が必要です。

7行目

7行目.js

    }

閉じ忘れにご注意を。

これで終わりです。お疲れ様でした！

最後に

まだまだjs,jqueryは勉強し始めたばかりなので、試行錯誤です。
知ってる人からしてみればこんな事わざわざ記事にするなよ。と思うかもしれませんが・・・許してください。自己満足の為です（笑

「もっといい実装方法がある」、「この方法はちょっとイケてない。」などあれば是非ともコメントいただけますと幸いです！
有識者様の知識を吸収して成長できるのもQiitaのいい所だと先輩がいっていました。
ですので、どうぞよろしくお願いいたしますm(_ _)m

それでは、駄文にお付き合いいただきありがとうございました！