Goalist Developers Blog

はじめてのAngular TODOアプリをつくる① リスト表示編

Angular TypeScript

はじめてAngular2を触ってみた初心者のメモ書きです。

今回からは、公式チュートリアルをチラ見しながらTODOアプリを作っていきたいと思います。

https://angular.io/docs/ts/latest/tutorial/angular.io

今回もAngular CLIの恩恵にあずかってまいります。
Windowsでの環境構築編はこちら

developers.goalist.co.jp

目次

準備

プロジェクトを生成

ng new todo-app

開発用サーバを起動

ng s

これで保存の度に自動ビルドしてくれます。

http://localhost:4200/をブラウザ上で確認
f:id:y-iio:20170410163753p:plain

ちゃんと動いてますね。これで準備完了です。

タスクを一つ表示する

公式チュートリアルのHero Editorを見ながらやっていきます。
内容としては

Angular Docs

のところです。

Taskクラスの作成

ng g class task

これでapp下にtask.tsが作成されました。
とりあえずIDとタスク名を持たせます。

task.ts

export class Task {
  id: number;
  name: string;
}

Taskクラスをインポート

appコンポーネントにimport { Task } from './Task';を追加して、Taskクラスを使えるようにします。
適当に初期表示も決め打ちします。

app.component.ts

import { Component } from '@angular/core';

import { Task } from './Task';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'todo app';
  task: Task = {
    id: 1,
    name: '田中さんにメール'
  };
}

チュートリアルのHero Editorほぼそのままのhtmlです。

app.component.html

<h1>{{title}}</h1>
<h2>{{task.name}} の詳細</h2>
<div><label>id: </label>{{task.id}}</div>
<div><label>name: </label>{{task.name}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="task.name" placeholder="name">
</div>

表示ドン

f:id:y-iio:20170410164136p:plain

双方向バインディング[(ngModel)]もオッケーです。

f:id:y-iio:20170410164145p:plain

タスクリストを表示する

内容としては

Angular Docs

のところです。

リスト表示（ngFor）

とりあえずリスト内容を宣言
このあたりで良いのかな

app.component.ts

export class AppComponent {
  title = 'todo app';
  task: Task = {
    id: 1,
    name: '田中さんにメール'
  };
  tasks = TASKS;
}
const TASKS: Task[] = [
  { id: 11, name: '企画ロードマップ作成' },
  { id: 12, name: '山田さんにメール返信' },
  { id: 13, name: 'Angular2キャッチアップ' },
  { id: 14, name: 'ブログ更新' },
  { id: 15, name: '新卒技術研修' }
];

ngForを使ってリスト表示します。
テンプレート構文の使い方は前回のブログで！

app.component.html

<ul class="tasks">
  <li *ngFor="let task of tasks">
    <span class="badge">{{task.id}}</span> {{task.name}}
  </li>
</ul>

こんな感じでリスト表示できました。

f:id:y-iio:20170410164420p:plain

CSSを追加

チュートリアルにあるCSSの「heroes」を「tasks」に変えて使いたいので、Sassでいきます。
app.component.scssを作って呼び出します。コンパイルもしてくれるっぽい（すごい！）

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

一気にそれっぽくなりました！

f:id:y-iio:20170410164440p:plain

タスクを選択できるようにする

クリックイベントを追加

前回さらった(click)を使ってイベントを呼び出します。

app.component.html

<li *ngFor="let task of tasks" (click)="onSelect(task)">

スクリプト側にハンドラを追加します。

app.component.ts

selectedTask: Task;

onSelect(task: Task): void {
  this.selectedTask = task;
}

選ばれしタスクを表示（ngIf）

前回やったngIfを使います。
selectedTaskに値を入ったらば*ngIf="selectedTask"がtrueになるので、以下の要素が表示されるようになります。

app.component.html

<div *ngIf="selectedTask">
  <h2>{{selectedTask.name}} details!</h2>
  <div><label>id: </label>{{selectedTask.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedTask.name" placeholder="name"/>
  </div>
</div>

タスクをクリックしたら…

f:id:y-iio:20170410164620p:plain

詳細が表示されるようになりました。

f:id:y-iio:20170410164629p:plain

選択中のタスクに色を付ける（[class.クラス名]）

これは前回はしょってやらなかったのですが、
[class.クラス名]="式"でCSSクラスの追加/削除ができるようです。

app.component.html

<li *ngFor="let task of tasks" [class.selected]="task === selectedTask" (click)="onSelect(task)">

選択されている（"task === selectedTask"がtrue）ときはselectedクラスをaddしてくれます。 "task === selectedTask"がfalseならremoveしてくれます。（便利！）

f:id:y-iio:20170410164651p:plain

ソースコードまとめ

感想

ngFor, ngnIf, CSSクラスの追加/削除を学びました。
今後もチュートリアルに沿ってどんどん進めていく所存です。

ちんたらやってるうちに業務で本格的に使うことになってしまいました…頑張ります…