ふわりAngular

このサイトはAngularで作られています。

Angular初心者なので玄人向けの情報はありません。

初心者の方、理解レベルが同じくらいの方のお役に立てれば幸いです。

2016/12/1

TODOリストを作ってみよう


TODOリストを作りながら、Angular の基本的な書き方を学びましょう。

今回は Angular 2 です。

バージョンが異なると書き方も違うかもしれませんのでご注意ください。


プロジェクトは、 ng newした直後の状態から進めます。

プロジェクトの作り方は プロジェクトを作ってみようを参考にしてください。

今回修正するソースは次の3つです。

  • app.component.ts
  • app.component.html
  • app.component.css

まずはレイアウトを書いてみる。


TODOリストに必要な画面の部品を HTML に書いてみます。

修正するファイルは、htmlファイルとcssファイルです。

  • app.component.html
  • app.component.css

app.component.html

  1. <h1>TODOリスト</h1>
  2. <form>
  3. <input type="text" name="title" value="" placeholder="title">
  4. <textarea name="desc" placeholder="desc"></textarea>
  5. <button>登録</button>
  6. </form>
  7. <div class="todos">
  8. <p class="no">1</p>
  9. <p>タイトル</p>
  10. <pre>説明</pre>
  11. <button>削除</button>
  12. </div>

app.component.css

  1. /* 入力エリア */
  2. form
  3. margin-bottom: 10px;
  4. input, textarea
  5. width: 80%;
  6. display: block;
  7. /* TODOリスト */
  8. .todos
  9. border: 1px solid #ccc;
  10. clear: both;
  11. width: 80%;
  12. padding: 10px;
  13. .no
  14. font-size: x-large;
  15. font-weight: bold;
  16. color: #999;
  17. padding: 20px;
  18. margin-right: 10px;
  19. float: left;

すると、このような画面が表示されるかと思います。

レイアウトは適当に簡素な形にしています。

本記事で修正することはありませんので、ご自身で好きなレイアウトにしてみてもいいでしょう。


TODOクラスを作成する。


次に、データモデルクラスと、それを表示するための処理を書いてみます。

修正するファイルは、tsファイルとhtmlファイルです。

  • app.component.ts
  • app.component.html

app.component.ts

  1. import Component from '@angular/core';
  2.  
  3. class Todo
  4. title: string;
  5. desc: string;
  6.  
  7. @Component({
  8. selector: 'app-root',
  9. templateUrl: './app.component.html',
  10. styleUrls: ['./app.component.css']
  11. })
  12. export class AppComponent
  13. private todo: Todo;
  14. private todos: Todo[];
  15.  
  16. ngOnInit(): void
  17. this.todo = new Todo;
  18. this.todos = [];

app.component.html

  1. <div class="todos" *ngFor="let todo of todos; let i = index">
  2. <p class="no">{{i+1}}</p>
  3. <p>{{todo.title}}</p>
  4. <pre>{{todo.desc}}</pre>
  5. <button>削除</button>
  6. </div>

class Todoで、Todo という名前のクラスを定義し、その配列を Component の内部メンバ todosに定義しています。

さらに、 *ngForで内部メンバ todosをループして表示させるようにしています。


イベントを作成する。


最後にボタンクリック時の処理を書いてみます。

登録ボタンのクリック処理には、内部メンバ todosに入力値を追加する処理を書きます。

削除ボタンのクリック処理には、内部メンバ todosから1レコード削除する処理を書きます。

修正するファイルは、tsファイルとhtmlファイルです。

  • app.component.ts
  • app.component.html

app.component.ts

  1. public onSubmit(): void
  2. this.todos.push(this.todo);
  3. this.todo = new Todo;
  4.  
  5. public onDelete(index: number): void
  6. this.todos.splice(index, 1);

app.component.html

  1. <form (ngSubmit)="onSubmit()" #todoForm="ngForm">
  2. <input type="text" name="title" [(ngModel)]="todo.title" value="" required placeholder="title">
  3. <textarea name="desc" [(ngModel)]="todo.desc" required placeholder="desc"></textarea>
  4. <button [disabled]="!todoForm.form.valid">登録</button>
  5. </form>
  1. <button (click)="onDelete(i)">削除</button>

一気に気持ちが悪いソースになりましたね。

{} []()は、双方向データバインディングといって、モデルとビューの結び付けを行ってくれる機能のようです。
※理解できたら別途記事にします。


動作を確認する。


コードを保存して、 ng serveで動かしてみましょう。

登録ボタンをクリックするとTODOリストが1行増え、削除ボタンをクリックするとTODOがひとつ消えるようになったかと思います。

いかがでしょうか。

少ないコード量で動的なページを簡単に作ることができました。

次回からは、このTODOリストを機能拡張しながら、新たな要素を盛り込んでいきたいと思います。

ソースコードはGitHubに登録しておきますので参考にしてください。

c5apple/angular2-todos