Angular の for ループ

テンプレートで使うAPIは2種類に分かれます。AngularJSではng-repeatを使い、現代のAngularでは、その構文に対応するバージョンで@forブロックを使えます。アプリケーションのロジック内でJavaScriptの配列を処理するには、forループまたはforEachを使います。これらはデータを処理するもので、単独でテンプレート要素を描画するものではありません。

ループを選ぶ前にAngularのバージョンを確認する

まず、プロジェクトで使っているフレームワークを確認します。古いフレームワークであるAngularJSでは、ng-repeatディレクティブを使ってコレクションの各項目を描画します。現代のAngularは別のテンプレートシステムを使います。プロジェクトのAngularバージョンが@forに対応していれば、このブロックでコレクションを描画できます。追加する前に、プロジェクトのバージョンで使える構文を確認してください。

値の計算、変換、その他の処理が必要な場合は、JavaScriptのforループやforEachをコンポーネントまたはコントローラーのロジック内で使います。コレクションを描画するには、フレームワークに合ったテンプレートAPIを使います。

AngularJSでng-repeatを使ってリストを描画する

AngularJSのテンプレートでは、ng-repeat="item in items"を指定すると、itemsの各値について要素のコピーが1つ作られます。たとえば、テンプレートの<ul><li ng-repeat="item in items">{{ item }}</li></ul>という部分は、コントローラーまたはスコープから渡されたコレクションをリストとして描画します。itemsに['Apple', 'Banana', 'Cherry']が設定されていれば、ページには果物ごとにリスト項目が1つずつ表示されます。これはAngularJSのディレクティブであり、現代のAngularの構文ではありません。

現代のAngularで@forを使ってリストを描画する

@forブロックに対応するバージョンの現代のAngularプロジェクトでは、リスト要素の中でテンプレートに@for (item of items; track item.id) { <li>{{ item.name }}</li> }と記述できます。ここでitemsはコンポーネントのコレクション、itemは現在のレコードです。track item.idを指定すると、コレクションが変化しても、Angularが各レコードを安定して識別できます。データ内の一意なキーを使い、プロパティ名はコンポーネントに合わせてください。この記事では構文だけを示しており、Angularプロジェクトで実行していません。使用しているバージョンとテンプレートの設定で確認してください。

JavaScriptのforとforEachで配列を処理する

アプリケーションのロジック内で値を計算または変換する場合は、JavaScriptの命令型ループを使います。次の例では、複数の価格を合計します。これは単独で動作するJavaScriptの例で、この記事では実行していません。

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

このループは各項目を読み取り、その価格をtotalに加算します。最後の行では、書式を整えた金額をJavaScriptのコンソールに出力します。配列の各要素に処理を行う方法として、items.forEach(item => console.log(item.name))のようにforEachのコールバックを使うこともできます。データ処理にはどちらの方法も使えます。テンプレート内に要素を描画する場合は、ng-repeatまたは対応バージョンの@forブロックを使います。

タスクに合ったループ方法を選ぶ

テンプレートのディレクティブやブロックは、コレクションのデータを描画要素に結び付けます。JavaScriptのループはアプリケーションのロジックを実行します。データを変更する場合は、テンプレートが参照しているコンポーネントまたはコントローラーの状態を通じて変更してください。

Angularのループに関するよくある質問

現代のAngularでng-repeatは使えますか？

ng-repeatはAngularJSのディレクティブです。現代のAngularでは独自のテンプレート構文を使い、対応するバージョンでは@forを利用できます。

Angularのコンポーネント内でJavaScriptのforループを使えますか？

はい。計算やその他の配列処理には、コンポーネントのロジック内で使えます。ただし、テンプレート要素は作成しません。処理結果をテンプレートにバインドし、そのテンプレートの描画構文を使ってください。

forEachはどのような場合に使いますか？

配列の各項目にコールバックを実行する場合に使います。反復処理を明示的に制御したいロジックでは、通常のforループを選べます。どちらもテンプレート描画用のディレクティブではありません。

表示中のコレクションに項目を追加するにはどうすればよいですか？

コンポーネントまたはコントローラーが保持するコレクションを更新し、対応するテンプレート構文で現在の値を描画します。具体的な更新方法は、アプリケーションで状態をどのように管理しているかによって異なります。