Angular todo リストアプリの事始め

この時点で、Angular を使用して todo リストアプリケーションの作成を開始する準備が整いました。 完成したアプリケーションには、やることのリストが表示され、機能の編集、削除、追加が含まれます。 この記事では、アプリケーションの構造を理解し、やることの基本的なリストを表示するようになります。

前提条件:

HTML、 CSS、 JavaScript に精通していること、 ターミナル/コマンドラインに関する知識があること。

目的: 基本的なアプリ構造を作成するには、to-do items のリストを表示をすることで、コンポーネント構造、コンポーネント間でのデータ共有、コンテンツの作成、ループなどの基本的な Angular の概念を理解することです。

to-do アプリケーションの構造

フレームワークを使用しない基本的なアプリケーションと同様に、Angular アプリケーションには index.html があります。 index.html の <body> タグ内で、Angular は特別な要素 <app-root> を使用してメインコンポーネントを挿入します。メインコンポーネントには、作成した他のコンポーネントが含まれます。 通常、 index.htmlに触れる必要はありません。代わりに、コンポーネントと呼ばれるアプリケーションの特殊な領域に作業を集中させます。

コンポーネントを使用して、アプリケーションの構成

コンポーネントは、Angular アプリケーションの中心的な構成要素です。 この to-do アプリケーションには、アプリケーションの基盤としてのコンポーネントと、to-do アイテムを処理するためのコンポーネントの 2 つのコンポーネントがあります。

各コンポーネントは、TypeScript クラス、HTML、および CSS で構成されています。 TypeScript は JavaScript にトランスパイルまたは変換されます。つまり、アプリケーションは最終的にプレーンな JavaScript になりますが、Typescript の拡張機能と合理化された構文を使用できるという便利さがあります。

*ngIf and *ngFor を使用して UI を動的変更

このチュートリアルでは、DOM の構造を動的に変更するための 2 つの重要な Angular ディレクティブについても説明します。 ディレクティブは、アプリケーションの変更に影響を与えるために HTML で使用できるコマンドのようなものです。

このチュートリアルで取り上げる最初のディレクティブは、Angular のイテレーター *ngFor です。 *ngFor は、配列内のアイテムに基づいて DOM 要素を動的に作成できます。

このチュートリアルで学習する 2 番目のディレクティブは *ngIf です。 *ngIf を使用して、条件に基づいて DOM に要素を追加または DOM から削除できます。 たとえば、ユーザーが to-do リストの項目を編集したい場合は、その項目を編集する手段をユーザーに提供できます。 アイテムを編集したくない場合は、編集用のインターフェイスを削除できます。

コンポーネント間でのデータの共有

この to-do アプリケーションでは、データを共有するようにコンポーネントを構成します。 to do リストに新しいアイテムを追加するには、メインコンポーネントが新しいアイテムを 2 番目のコンポーネントに送信する必要があります。 この 2 番目のコンポーネントは、アイテムを管理し、編集、完了のマーク、および個々のアイテムの削除を処理します。

@Input() および @Output() と呼ばれる特別なデコレータを使用して、Angular コンポーネント間でデータを共有します。 これらのデコレータを使用して、特定のプロパティでデータがコンポーネントに出入りできるように指定します。 @Output() を使用するには、一方のコンポーネントでイベントを発生させて、もう一方のコンポーネントが利用可能なデータがあることを認識できるようにします。

Item の定義

app ディレクトリーに、次の内容の item.ts という名前の新しいファイルを作成します。

js
export interface Item {
  description: string;
  done: boolean;
}

このファイルは後で使用するまで使用しませんが、 item が何であるかを知って記録する良い機会です。 Item interface は、アプリケーションが item が何であるかを理解できるように、 item オブジェクトモデルを作成します。この to-do リストの場合、 item は説明があり、実行できるオブジェクトです。

AppComponent にロジックを追加

item が何であるかがわかったので、TypeScript ファイル app.component.ts に追加することで、アプリケーションにいくつかのアイテムを与えることができます。 app.component.ts で、内容を次のように置き換えます。

js
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "todo";

  filter: "all" | "active" | "done" = "all";

  allItems = [
    { description: "eat", done: true },
    { description: "sleep", done: false },
    { description: "play", done: false },
    { description: "laugh", done: false },
  ];

  get items() {
    if (this.filter === "all") {
      return this.allItems;
    }
    return this.allItems.filter((item) =>
      this.filter === "done" ? item.done : !item.done
    );
  }
}

最初の行は、Angular をインポートする JavaScript インポートです。 @Component() デコレータは、 AppComponent に関するメタデータを指定します。 デフォルトのメタデータプロパティは次のとおりです。

  • selector: このコンポーネントをインスタンス化するためにテンプレートで使用する CSS セレクターの名前を示します。 これが 'app-root' です。 index.html の body タグ内で、AngularCLI はアプリケーションの生成時に <app-root></app-root> を追加しました。 すべてのコンポーネントセレクターを他のコンポーネント HTML テンプレートに追加することにより、同じように使用します。
  • templateUrl: このコンポーネントに関連付ける HTML ファイルを指定します。 これが、'./app.component.html' です。
  • styleUrls: このコンポーネントに特に適用されるスタイルのファイルの場所と名前を提供します。 これが './app.component.css' です。

filter プロパティは union 型です。つまり、 filter は all, active 又は、 done の値を持つことができます。 union タイプでは、 filter プロパティに割り当てる値にタイプミスをすると、TypeScript はバグを早期に発見できるように通知します。 このガイドでは、後の手順でフィルタリングを追加する方法を示しますが、フィルターを使用してすべての items のデフォルトリストを表示することもできます。

allItems 配列には、to-do items と done が含まれます。 最初のアイテムである eat は、 done の値が true です。

getter の get items() は、 filter が all と等しい場合、 allItems 配列からアイテムを取得します。 それ以外の場合、 get items() は、ユーザーがビューをフィルタリングする方法に応じて、 done items または未処理の items を返します。 ゲッターはまた、配列の名前を items として確立します。これは、次のセクションで使用します。

AppComponent テンプレートに HTML を追加

ブラウザーで items のリストを表示するには、 app.component.html の内容を次の HTML に置き換えます。

html
<div class="main">
  <h1>My To Do List</h1>
  <h2>What would you like to do today?</h2>

  <ul>
    <li *ngFor="let item of items">{{item.description}}</li>
  </ul>
</div>

<li> には、 items 配列内のアイテムを反復処理する組み込みの Angular ディレクティブである *ngFor が含まれています。 アイテムごとに、 *ngFor は新しい <li> を作成します。 item.description を含む二重中括弧は、各 <li> に各アイテムの説明のテキストを入力するように Angular に指示します。

ブラウザーに、次のようなアイテムのリストが表示されます。

My To Do List
What would you like to do today?

* eat
* sleep
* play
* laugh

リストに items を追加

to-do リストには、 items を追加する方法が必要です。

app.component.ts で、次のメソッドをクラスに追加します。

js
addItem(description: string) {
  this.allItems.unshift({
    description,
    done: false
  });
}

addItem() メソッドは、ユーザーが提供したアイテムを受け取り、ユーザーが[Add]ボタンをクリックすると、そのアイテムを配列に追加します。 addItem() メソッドは、配列メソッド unshift() を使用して、配列の先頭とリストの先頭に新しいアイテムを追加します。 または、 push() を使用して、配列の最後とリストの一番下に新しいアイテムを追加することもできます。

addItem() メソッドを使用するには、 AppComponent テンプレートの HTML を編集します。

app.component.html で、 <h2> を次のように置き換えます。

js
<label for="addItemInput">What would you like to do today?</label>

<input
  #newItem
  placeholder="add an item"
  (keyup.enter)="addItem(newItem.value); newItem.value = ''"
  class="lg-text-input"
  id="addItemInput"
/>

<button class="btn-primary" (click)="addItem(newItem.value)">Add</button>

ユーザーが <input> に新しいアイテムを入力してEnterを押すと、 addItem() メソッドはその値を items 配列に追加します。 Enter キーを押すと、 <input> の値も空の文字列にリセットされます。 または、同じ addItem() メソッドを呼び出す追加ボタンをクリックすることもできます。

まとめ

これで、ブラウザーに to-do の基本的なリストが表示されるはずです。 それは大きな進歩です！ もちろん、やるべきことはまだたくさんあります。 次の記事では、アプリケーションにスタイルを追加する方法について説明します。