投票アプリケーションの構築 - インタラクティブなウェブ開発チュートリアル

はじめに

このプロジェクトでは、ユーザーが投票オプションを作成・管理し、必要に応じて削除できる投票アプリケーションを構築する方法を学びます。また、アプリケーションには複数選択のサポートと公開投票結果の機能も備えています。

👀 プレビュー

Voting app demo gif

🎯 タスク

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

投票アプリケーションの HTML 構造を初期化する方法
新しい投票オプションを追加する機能を実装する方法
投票オプションを削除する機能を実装する方法
アプリケーションをテストして機能が期待通りに機能することを確認する方法

🏆 成果

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

投票アプリケーションの基本的な HTML 構造をセットアップする
JavaScript を使ってアプリケーションから投票オプションを動的に追加・削除する
「オプションを追加」ボタンや削除アイコンをクリックするなどのユーザーインタラクションを処理する
アプリケーションをテストして要件を満たしていることを確認する
HTML、CSS、JavaScript を使ってインタラクティブな Web アプリケーションを構築する

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

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

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

├── css
|   ├── style.css
|   └── bootstrap.min.css
├── images
|   ├── x.svg
|   └── plus-square.svg
├── js
│   └── jquery.min.js
└── index.html

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

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

unfinished project structure

オプション追加機能を実装する

このステップでは、アプリケーションに新しい投票オプションを追加する機能を実装します。

index.html ファイルで、ファイルの下部にある <script> セクションを見つけます。
<script> セクションの中で、まず itemNumber と renderList を追加します。追加後のコードは以下のようになります。

let itemNumber = 2; // 初期データ数は 2
let initRender = (txt) => {
  return `<div class="mb-3 row">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
         </div>
      </div>`;
};
// 削除ボタン付きで HTML をレンダリングするための関数
let renderList = (txt) => {
  return `<div class="mb-3 row item">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
          </div>
          <div class="col-sm-1">
              <img class="del-icon" src="./images/x.svg" alt="">
          </div>
      </div> `;
};

これらの関数は、投票オプションの HTML 構造を生成するために使用されます。

<script> セクション内の次のコードブロックを見つけます。

$(
  (function () {
    // 初期化時に、以下の 2 つのデータが削除シンボルなしで表示される
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // プラス記号をクリックすると
    $(".add").click(function () {
      // TODO: ここのコードを完成させる
    });
  })()
);

$(".add").click(function () {... }) ブロックの中に、以下のコードを追加します。

$(".list").html("");
itemNumber++;
for (let index = 0; index < itemNumber; index++) {
  let list = renderList(`Option${index + 1}`);
  $(".list").append(list);
}

このコードは、既存のオプションをクリアし、itemNumber 変数をインクリメントし、その後 renderList 関数を使って新しいオプションをレンダリングします。

このコードが追加されると、ユーザーが「オプションを追加」ボタンをクリックすると、新しい投票オプションがリストに追加されます。

削除機能を実装する

このステップでは、アプリケーションから投票オプションを削除する機能を実装します。

index.html ファイルの <script> セクション内で、次のコードブロックを見つけます。

// x 削除ボタンをクリックすると、リストが 2 つ未満の場合、削除アイコンは表示されなくなります
$(document).on("click", ".del-icon", function () {
  // TODO: ここのコードを完成させる
});

このコードブロックの中に、次のコードを追加します。

$(".list").html("");
itemNumber--;
if (itemNumber <= 2) {
  for (let index = 0; index < itemNumber; index++) {
    let list = initRender(`Option${index + 1}`);
    $(".list").append(list);
  }
} else {
  for (let index = 0; index < itemNumber; index++) {
    let list = renderList(`Option${index + 1}`);
    $(".list").append(list);
  }
}

このコードは、既存のオプションをクリアし、itemNumber 変数をデクリメントし、その後オプションの数に応じて適切な関数 (initRender または renderList) を使って残りのオプションをレンダリングします。

このコードが追加されると、ユーザーが投票オプションの横にある「x」アイコンをクリックすると、そのオプションがリストから削除されます。

アプリケーションをテストする

index.html ファイルを保存し、ブラウザで index.html ページを更新します。
初期の 2 つの投票オプションが削除アイコンなしで表示されていることを確認します。
「オプションを追加」ボタンをクリックし、新しい投票オプションがリストに追加され、削除アイコンが表示されることを確認します。
投票オプションの 1 つの横にある削除アイコンをクリックし、そのオプションがリストから削除されることを確認します。
投票オプションを追加・削除してアプリケーションを継続的にテストし、機能が期待通りに動作することを確認します。

完成した結果は以下の通りです。

Voting app final result

おめでとうございます！投票アプリケーションの実装を完了しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。