日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - カートアプリケーション

こんにちは、将来のプログラマーたち！今日は、AngularJSを使ってショッピングカートアプリケーションを作成する興奮する旅に出発します。あなたの近所の親切なコンピュータサイエンスの先生として、私はこのプロセスをガイドするのが楽しみです。プログラミングが完全に初めてであっても大丈夫です。コーヒー（またはお気に入りの飲み物）を手に取り、一緒に潜りましょう！

AngularJS - Cart Application

AngularJSとは？

カートアプリケーションの構築を始める前に、AngularJSとは何か簡単に説明しましょう。AngularJSは、動的なWebアプリケーションを作成するための強力なJavaScriptフレームワークです。Web開発者にとってはスイスアーミーナイフのように、生活を楽にし、コードをより整理されたものにするツールを提供します。

プロジェクトの設定

ステップ1: HTML構造の作成

まず、ショッピングカートアプリケーションの基本的なHTML構造を作成しましょう。HTMLに慣れていない場合でも心配ありません。各部分を説明しながら進めます。

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>私のショッピングカート</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CartController">
<h1>私のショッピングカート</h1>
<!-- 後でここに更多信息を追加します -->
</body>
</html>

このHTML構造では、以下の重要なことを行っています：

  1. AngularJSライブラリをCDNリンクを使ってインクルードしました。
  2. 自分のJavaScriptファイル(app.js)をリンクしました。これから作成します。
  3. <html>タグにng-app="cartApp"を追加し、AngularJSにこの要素がアプリケーションのルート要素であることを伝えました。
  4. <body>タグにng-controller="CartController"を追加し、カートのロジックを管理するために使用します。

ステップ2: AngularJSアプリケーションの作成

次に、app.jsファイルを作成し、AngularJSアプリケーションを設定します：

var app = angular.module('cartApp', []);

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

以下に解説します：

  1. AngularJSモジュール名'cartApp'を作成します。
  2. CartControllerというコントローラーを定義します。
  3. コントローラー内で、アイテムの空の配列と合計変数を設定します。
  4. アイテムを追加する、アイテムを削除する、合計を計算する関数を作成します。

ユーザーインターフェースの構築

ステップ3: アイテムリストの作成

HTMLを更新して、カート内のアイテムを表示します：

<body ng-controller="CartController">
<h1>私のショッピングカート</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">削除</button>
</li>
</ul>
<p>合計: ${{total}}</p>
</body>

ここでは、以下のAngularJSディレクティブを使用しています：

  • ng-repeatでアイテムをループ表示
  • {{}}でデータバインディングしてアイテムのプロパティを表示
  • ng-clickでボタンをクリックしたときにremoveItem関数を呼び出す

ステップ4: 新しいアイテムの追加

ユーザーが新しいアイテムを追加できるフォームを追加します：

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="アイテム名" required>
<input type="number" ng-model="newItem.price" placeholder="価格" required>
<button type="submit">カートに追加</button>
</form>

このフォームでは以下を使用しています：

  • ng-submitでフォームを送信したときにaddItem関数を呼び出す
  • ng-modelで入力値をnewItemオブジェクトにバインド

アプリケーションの強化

ステップ5: アイテムの数量を追加

アイテムの数量を管理するようにアプリケーションを修正します：

app.controller('CartController', function($scope) {
// ...前のコード...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity);
}, 0);
};
});

HTMLも更新します：

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">削除</button>
</li>

結論

おめでとうございます！AngularJSを使って機能的なショッピングカートアプリケーションを作成しました。基本的なAngularJSアプリケーションの設定、コントローラーの作成、データバインディングとイベント処理のためのディレクティブの使用、そしてアイテムの数量管理などのより高度な機能までをカバーしました。

コードを学ぶことは旅であり、これはまだ始まりです。続けて練習し、実験し、最も重要なのは、楽しむことです！

以下に、私たちが使用した主要なAngularJSコンセプトの表を示します：

コンセプト 説明 例
モジュール アプリケーションの異なる部分のためのコンテナ angular.module('cartApp', [])
コントローラー アプリケーションの一部のためのビジネスロジック app.controller('CartController', function($scope) {...})
スコープ アプリケーションモデルを指すオブジェクト $scope.items = []
ディレクティブ HTMLをカスタム属性や要素で拡張 ng-repeat, ng-click, ng-submit
データバインディング モデルとビュー間でデータを同期 {{item.name}}

引き続きコードを書き続け、覚えておいてください：すべての専門家もかつては初心者でした。あなたは素晴らしい成果を上げています！

Credits: Image by storyset

前のチュートリアル:
AngularJS - ドラッグアプリケーション
次のチュートリアル:
AngularJS - 翻訳アプリケーション