デモンストレーション用にログインフォームをJavaScriptで実装しよう

Voiced by Amazon Polly

ログインフォームをPHPを使ってサーバーサイドで実装する前に、前もって動作イメージをクライアントやチームで共有したい場合があります。

ここではJavaScriptを使って、デモンストレーション用の簡易ログインフォームを実装してみましょう。

目次

ログインフォームの仕様について

今回実装するデモンストレーション用のログインフォームは、以下のような仕様にしています。

  • 「ログインID」が入力されていないときは、エラーメッセージを表示する
    • パスワードチェックは省略
  • 「ログインID」の値によって、移動するページ先を変える
  • ログアウトしてログインフォームに遷移してきた場合は、「ログアウトしました」とメッセージを表示する
    • 別ページで「ログアウト」のボタン(リンク)を押して移動してきたと想定します
    • 判定のために、URLパラメーターで「?status=logout」を設定します

ログインフォームのHTMLについて

ログインフォームのHTMLは以下のようにマークアップしました。

<div class="p-loginSection">

  <div class="p-loginForm__messageLogout">
    <p>ログアウトしました。</p>
  </div>

  <p class="p-loginForm__message">ログインIDとパスワードを入力して、「ログイン」ボタンをクリックしてください。</p>

  <form action="./" class="p-loginForm__form">
    <div class="p-loginForm__container">
      <div class="p-loginForm__item p-loginForm__item--error">
        <p>ログインID、または、パスワードが正しくありません。</p>
      </div>
      <div class="p-loginForm__item">
        <div class="p-loginForm__label">ログインID</div>
        <div class="p-loginForm__inputText"><input id="inputName" type="text"></div>
      </div>
      <div class="p-loginForm__item">
        <div class="p-loginForm__label">パスワード</div>
        <div class="p-loginForm__inputText"><input id="inputPassword" type="password"></div>
      </div>
    </div>
    <div class="p-loginForm__submit">
      <input type="submit" class="c-button--submit01" value="ログイン">
    </div>
  </form>
</div>

今回、CSSについては説明を省略します。

処理の流れ

STEP
各要素を取得

フォーム、メッセージ、ログインID入力欄を取得します。

STEP
URLパラメーターを取得して、ログアウト判定

URLパラメーターを取得して、ログアウトしていることを示す値が含まれていれば、ログアウトのメッセージを表示します。

STEP
フォームにイベント監視を設定

addEventListener()メソッドで、submitイベントが通知されたとき(フォームから送信されたとき)に処理が実行されるようにします。

STEP
ログインIDの値から、移動先ページのURLを設定して、ページ遷移

ログインIDとして入力された値を判定して、対応するURLを変数に設定します。

ログインIDが未入力だった場合は、エラーメッセージのスタイルを表示状態に変更します。

処理の説明

それでは、ステップごとに説明していきます。

STEP1 各要素を取得

まず、ページの読み込みが終わった後、処理が実行されるように addEventListener()メソッドで、DOMContentLoadedイベントを監視します。

document.addEventListener('DOMContentLoaded', function() {
  // ここに処理を書く
});

続いて、処理に必要となる要素をquerySelectorgetElementByIdメソッドで取得して、それぞれ変数に格納します。

// フォーム要素を取得
var formElement = document.querySelector('.p-loginForm__form');

// エラーメッセージの要素を取得
var errorElement = document.querySelector('.p-loginForm__item--error');

// ログアウトメッセージの要素を取得
var logoutElement = document.querySelector('.p-loginForm__messageLogout');

// ログインID入力欄の要素を取得
var loginId = document.getElementById('inputName');

STEP2 URLパラメーターを取得して、ログアウト判定

ログアウトするときは、別のページにある「ログアウト」のリンクをクリックする、という仕様で実装します。

ログインフォームとは別ページを用意して、以下のようなリンクを配置します。

<a href="login.html?status=logout">ログアウトする</a>

このリンクからログインフォームに移動すると、URLにパラメーターが追加されます。このURLパラメーターの有無を判定してログアウトしてきたどうかを判定します。

URLパラメーターから値を取得

まずは、window.location.searchプロパティでURLパラメーターを取得します。

var urlParams = window.location.search;

次に、取得したURLパラメーターで「?」の部分は必要ないため、substring()メソッドで「?」より後の文字列を取得します。。

var params = urlParams.substring(1);

substring(1)とすることで、文字列の2文字より後を取得することができます。

続いて、split()メソッドで文字列として取得していたパラメーターの 「=」を区切り文字 として、配列に変換します。

var array = params.split('=');

arrayには['status', 'logout']と配列として値が格納されていますので、array[1]で判定のための値が取得できます。
これを使ってログアウトしてきたかどうかを判定します。

なお、メソッドごとに分けて記述しましたが、以下のように1行にまとめてメソッドを実行させることもできます。

var params = window.location.search.substring(1).split('=');

今回はこちらで解説を続けます。

ログアウトしてきたどうか判定

配列params[1]にlogoutが格納されていれば、別のページからログアウトして移動してきたことになります。

ifを使って判定を行い、一致すればログアウトメッセージのスタイルを変更して、ログアウトメッセージを表示します。

if ( params[1] === 'logout' ) {
  logoutElement.style.display = 'block';
}

ログアウトメッセージが表示されている状態でログインを行うと、ログインに失敗した場合にページが遷移されず、 ログアウトメッセージが表示されたままになります。

そのためelseを追加して、ログアウト以外のときはログアウトメッセージを非表示のスタイルに設定するようにします。

if ( params[1] === 'logout' ) {
  logoutElement.style.display = 'block';
} else {
  logoutElement.style.display = 'none';
}

STEP3 フォームにイベント監視を設定

イベントリスナーを設定

addEventListener()メソッドで、フォーム要素を監視して、submitされたときに処理が実行されるようにします。

formElement.addEventListener('submit', function(){
  // ここに処理を書く
}, false);

送信イベントをキャンセル

今回はフォームのデータを送信する必要がないため、preventDefault()メソッドでフォームの送信イベントをキャンセルします。

formElement.addEventListener('submit', function(event){
  event.preventDefault();

  // ここに処理を書く
}, false);

preventDefault()メソッド については、以下を参照してください。

条件分岐を設定

ログインIDを判定して、移動先を振り分ける条件分岐を設定します。

ログインID が入力されているか判定

まず、ログインIDが入力されているか判定して、未入力だった場合はエラーメッセージを表示するようにします。

ログインIDの入力欄要素は変数loginIdで取得していますので、valueプロパティで値を取得、判定できます。

if ( loginId.value ) {

} else {
  // 未入力だった場合、エラーメッセージのスタイルを変更して表示
  errorElement.style.display = 'block';
}

ログインID の値を判定して、ページを遷移

ログインIDの値に合わせて、location.hrefプロパティにURLを設定して、ページを遷移させます。
ここではログインIDがadminならば admin.htmlへ、 guestならば guest.htmlへ遷移する仕様で説明します。

ifでそれぞれログインIDに合ったページへ遷移するようにして、adminguest以外の値だった場合はエラーメッセージが表示されるようにします。

if (loginId.value === 'admin' ) {
  window.location.href = 'admin.html';
} else if (loginId.value === 'guest' ) {
  window.location.href = 'guest.html';
} else {
  errorElement.style.display = 'block';
}

実行結果

完成したJavaScriptのコードは以下のようになります。

document.addEventListener('DOMContentLoaded', function () {
  var formElement = document.querySelector('.p-loginForm__form');
  var errorElement = document.querySelector('.p-loginForm__item--error');
  var logoutElement = document.querySelector('.p-loginForm__messageLogout');
  var loginId = document.getElementById('inputName');

  var params = window.location.search.substring(1).split('=');

  if (params[1] === 'logout') {
    logoutElement.style.display = 'block';
  } else {
    logoutElement.style.display = 'none';
  }

  formElement.addEventListener('submit', function (event) {
    event.preventDefault();
    if (loginId.value) {
      if (loginId.value === 'admin') {
        window.location.href = 'admin.html';
      } else if (loginId.value === 'guest') {
        window.location.href = 'guest.html';
      } else {
        errorElement.style.display = 'block';
      }
    } else {
      errorElement.style.display = 'block';
    }
    return false;
  }, false);
});

まとめ

JavaScriptで制御しているため、正式なログインフォームとしては使えませんが、実際にフォームにログインIDを入力してページ遷移することができるので、動作イメージが掴みやすいと思います。

クライアントやチームでの齟齬を減らすため、こういったデモンストレーション用の物を作ってみるのも1つの手段です。

よかったらシェアしてね!

この記事を書いた人

Webコーダーとして日々研鑽しています。

コメント

コメントする

目次
閉じる