JavaScript でユーザー権限管理を実装する

はじめに

このプロジェクトでは、JavaScript と jQuery を使ってユーザー権限管理システムを実装する方法を学びます。このプロジェクトでは、非同期でユーザーデータを取得し、それをユーザー権限テーブルにレンダリングし、ユーザーと管理者のリストの間でユーザーを移動させる機能を提供し、それに応じてユーザー権限を更新します。

👀 プレビュー

ユーザー権限管理デモ

🎯 タスク

このプロジェクトでは、以下のことを学びます。

JSON ファイルから非同期でユーザーデータを取得し、それをユーザー権限テーブルにレンダリングする方法
ユーザーと管理者のリストの間でユーザーを個別に、または一括で移動させる機能を実装する方法
左右のリストにあるユーザーに基づいてユーザー権限テーブルのユーザー権限を更新する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

AJAX を使って非同期でデータを取得する
jQuery を使って DOM を操作してユーザーインターフェイスを更新する
ウェブアプリケーションにおいて権限管理機能を実装する

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下のとおりです。

├── css
├── js
│    ├── index.js
│    ├── jquery-3.6.0.min.js
│    └── userList.json
└── index.html

その中で：

css はスタイルフォルダです。
js/index.js はコードを完成させる必要がある JS ファイルです。
js/jquery-3.6.0.min.js は jQuery ファイルです。
js/userList.json は要求するデータファイルです。
index.html はメインページです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

初期の効果

非同期データの取得とレンダリング

このステップでは、ユーザーデータを非同期で取得し、それをユーザー権限テーブルにレンダリングする方法を学びます。

js/index.js ファイルを開きます。

getData() 関数を実装して、AJAX を使って js/userList.json ファイルからユーザーデータを取得します。

function getData() {
  // TODO
  $.ajax("./js/userList.json").then((res) => {
    res.forEach((item) => {
      $("#userList tbody").html(
        $("#userList tbody").html() +
          ` <tr name=${item.name}>
               <td>${item.name}</td>
               <td>${item.right ? "Administrator" : "User"}</td> 
           </tr>`
      );
    });
  });
}

$(function () {... }) ブロックの最初で getData() 関数を呼び出して、ユーザー権限テーブルを初期化します。
```
$(function () {
  getData();
  // ボタンにイベントを追加
  //...
});
```

このステップを完了すると、ページが読み込まれたときにユーザー権限テーブルに js/userList.json ファイルのデータが表示されます。効果は以下のとおりです。

AJAX を通じてデータを取得した後の効果

リスト間でのユーザーの移動

このステップでは、左と右のリスト間でユーザーを移動させる機能、およびすべてのユーザーを反対側に移動させる機能を実装します。

js/index.js ファイルを開き、$(function () {... }) ブロックの中にコードを追加します。

選択されたユーザーを左のリストから右のリストに移動させるための $("#add") クリックイベントハンドラを実装します。

$("#add").click(function () {
  // TODO
  let option = $("#leftSelect option:selected");
  option.each((index, item) => {
    $(`#leftSelect option[value=${item.value}]`).remove();
    $("#rightSelect")[0].add(new Option(item.value, item.value));
  });
});

すべてのユーザーを左のリストから右のリストに移動させるための $("#addAll") クリックイベントハンドラを実装します。

$("#addAll").click(function () {
  // TODO
  let option = $("#leftSelect option");
  option.each((index, item) => {
    $(`#leftSelect option[value=${item.value}]`).remove();
    $("#rightSelect")[0].add(new Option(item.value, item.value));
  });
});

選択されたユーザーを右のリストから左のリストに移動させるための $("#remove") クリックイベントハンドラを実装します。

$("#remove").click(function () {
  // TODO
  let option = $("#rightSelect option:selected");
  option.each((index, item) => {
    $(`#rightSelect option[value=${item.value}]`).remove();
    $("#leftSelect")[0].add(new Option(item.value, item.value));
  });
});

すべてのユーザーを右のリストから左のリストに移動させるための $("#removeAll") クリックイベントハンドラを実装します。

$("#removeAll").click(function () {
  // TODO
  let option = $("#rightSelect option");
  option.each((index, item) => {
    $(`#rightSelect option[value=${item.value}]`).remove();
    $("#leftSelect")[0].add(new Option(item.value, item.value));
  });
});

このステップを完了すると、左と右のリスト間でユーザーを移動させることができ、またすべてのユーザーを反対側に移動させることもできるようになります。

ユーザー権限の更新

このステップでは、左と右のリストにあるユーザーに基づいて、ユーザー権限テーブルのユーザー権限を更新する機能を実装します。

js/index.js の changeAccess 関数を探します。

ユーザー権限テーブルの権限を更新するための changeAccess() 関数を実装します。

function changeAccess(right, changeList) {
  changeList.each((index, item) => {
    $(`#userList tr[name=${item.value}] td:last`).html(right);
  });
}

changeAccess() 関数は、ユーザーをリスト間で移動させるボタンのクリックイベントハンドラの最後で呼び出されます。

$("#add").click(function () {
  // TODO
  //...
  changeAccess("Administrator", option);
});

$("#addAll").click(function () {
  // TODO
  //...
  changeAccess("Administrator", option);
});

$("#remove").click(function () {
  // TODO
  //...
  changeAccess("User", option);
});

$("#removeAll").click(function () {
  // TODO
  //...
  changeAccess("User", option);
});

このステップを完了すると、ユーザーが左と右のリスト間で移動するときに、ユーザー権限テーブルのユーザー権限が自動的に更新されます。効果は以下のとおりです。

ユーザー権限更新デモ