[JS] 疑似買い物アプリ

タグ :

これまでの基礎知識を結集して簡易アプリを作成するシリーズです。
今回は買い物アプリを作成してみます。サンプルなので実際に買い物はできません。

アプリ概要

買い物アプリといっても非常に簡単なものです。
商品名のチェックボックスにチェックを入れると、買い物かごリストに商品名と値段が追加され、買い物の合計値を算出して表示する、というものです。

以下のような仕様とします。

商品一覧を表示
 - 各商品にそれぞれのチェックボックスを配置する
選択商品の買い物カゴリストを表示
 - チェックされた商品がリストに追加される
 - チェックを外すとリストから削除される
各商品には値段があり、選択商品の合計値を表示
 - チェックすると加算、外すと減算する

必要となる処理は以下になります。

  • チェックボックスのクリック動作
  • チェックボックスのON/OFF判定
  • チェックボックスの要素取得
  • リスト部の要素変更(追加・削除)
  • 合計値の算出

作成したサンプル

処理の流れとコードは以下になります。

[ 動作フロー ]
js_shop_flow
[ コード ]
$(function() {
	$(".items :checkbox").click(function() {
		$(".list table tbody tr:not(:first)").remove();
		var $checked = $('.items :checked');
		var vals = $checked.map(function(index, el) {
			return $(this).val();
		});
		if(vals.length) {
			var out,calc = 0;
			var str = new Array();
			$.each(vals, function() {
				str = this.split(" ");
				out = "<tr><td>";
				out += str[0];
				out += "</td><td>";
				out += str[1] + "円";
				out += "</td></tr>";
				$(".list table tbody").append(out);
				calc += parseInt(str[1]);
			});
			out = "<tr><td>合計</td><td>";
			out += calc + "円";
			out += "</td></tr>";
			$(".list table tbody").append(out);
		}
	});
});
<h4>疑似買い物アプリ</h4>
<div class="items">
	<p>欲しい商品をチェックしてね。</p>
	<table>
	<tr><td><input type="checkbox" value="パソコン 100000"> パソコン</td>
	<td>100,000円</td></tr>
	<tr><td><input type="checkbox" value="HD 30000"> HD</td>
	<td>30,000円</td></tr>
	<tr><td><input type="checkbox" value="メモリ 20000"> メモリ</td>
	<td>20,000円</td></tr>
	<tr><td><input type="checkbox" value="キーボード 3000"> キーボード</td>
	<td>3,000円</td></tr>
	<tr><td><input type="checkbox" value="マウス 1000"> マウス</td>
	<td>1,000円</td></tr>
	</table>
</div>
<div class="list">
	<p>[買い物カゴの中身]</p>
	<table>
	<tr><th>商品名</th>
	<th>値段</th></tr>
	</table>
</div>
body { margin-left: 20px; }
.items { margin-top: 10px; }
.items table td { width: 110px; }
.items table td:nth-child(2),
.list table td:nth-child(2) { text-align: right; }
.list { margin-top: -150px; margin-left: 270px; }
.list table,
.list th,
.list td {border: 1px #888 solid; }
.list table th,
.list table td { width: 100px; height: 30px; }
.list table tr:first-child,
.list table tr:last-child { background: #eee; }
.list table td { text-align: center; }
.list table tr:last-child { font-weight: bold; }
詳しい説明は後述します。
各チェックボックスをクリックすると、その商品名がリストに追加されます。チェックを外すとリストから削除されます。
同時に合計値も算出しており、リストの一番下に表示されています。
このくらいの商品数なら処理速度は気にならない程度で動作します。

コード解説

jQuery、HTML のコードの説明をします。

[ jQuery の説明 ]
[ 2行目 クリックイベント ]
$(".items :checkbox").click(function() {

商品一覧要素内にあるチェックボックスのクリック時の動作になります。
セレクターの指定ではフィルターで「:checkbox」を指定します。

[ 3行目 リストの初期化 ]
$(".list table tbody tr:not(:first)").remove();

リストの商品部分を削除する動作です。
リスト先頭の項目行は削除する必要は無いので、それ以外を削除するようにセレクターで指定します。指定の仕方は「table の 最初の tr 以外」という指定になります。

[ 4行目〜8行目 ON/OFF判定&要素取得 ]
$(".list table tbody tr:not(:first)").remove();

まずこの処理でチェックボックスの ON だけを取得してきます。

var vals = $checked.map(function(index, el) {
	return $(this).val();
});

選択されたチェックボックスの要素情報を取得しています。

if(vals.length) {

この分岐処理にて ON のチェックボックスが無かった場合には何もせずに終了するようにしています。

[ 11行目〜20行目 リストへ商品を追加 ]
$.each(vals, function() {

このループ処理にてチェックのある商品をリストへ追加する処理を行っています。

str = this.split(" ");

取得した要素内の value には、商品名と値段がスペース区切りで格納されているので、split() メソッドにより商品名と値段を分割しています。分割したものを変数 str に格納し、str[0] で商品名、str[1] で値段を格納しています。

$(".list table tbody").append(out);

リスト部分のテーブルへ行を追加しています。変数 out に tr 要素を格納し、append() メソッドによって表の最終行に追加されるようにしています。

calc += parseInt(str[1]);

ループ内で同時に合計値の算出も行っています。取得した値段は文字列なので parseInt() メソッドにて整数値に変換してから変数 calc に加算するようにしています。

[ 21行目〜24行目 合計値を追加 ]
$(".list table tbody").append(out);

リストに追加と同じ要領で合計値も追加します。

[ HTML の説明 ]
[ 2行目〜16行目 商品一覧 ]

商品一覧の表示部分です。チェックボックス、商品名、値段が含まれます。
各商品の要素内の value 値に商品名と値段を格納させておきます。
この value 値は jQuery の処理内で使用します。

[ 17行目〜23行目 買い物カゴリスト ]

最初は項目行のみを表示しておきます。この状態が初期状態となります。
このテーブル内へ商品が追加されていくようにします。

まとめ

今回の買い物アプリは、基礎知識の応用で作成してみました。苦労したのは、チェックボックスの要素取得処理とセレクター指定部分くらいです。

基礎ではまとめていないメソッドを多用しちゃいましたが、その辺は調べて対応してください。。。

買い物アプリとありますが、買い物以外にも様々な用途で使えそうです。チェックボックスの部分がちょっと使い難そうですが、画像やテキストのクリックで動作するように変更したりすれば、もっと使い易くなるかも。

こんな感じで色々なアプリを作っていきたいと思います。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed