ReactとAngular2の使い方やコードの違いをコンポーネント単位で比較する：モダンなフロントエンド開発者になるためのSPA超入門（2）（4/4 ページ）

[千葉達仁, 日野達也，三菱総研DCS]

Angular2コンポーネントの作成

　続いて、Angular2で実装した場合の各コンポーネントの作りを説明します。

　Angular2でコンポーネントを定義するに当たっては、Viewを定義するHTMLファイルと、HTML内で利用するオブジェクトやメソッドを定義するTypeScriptファイルを分けて作成しています。

Todoコンポーネント

　まず、Todoコンポーネントについてです。

<li (click)="checkTodo(todo)" [class.checked]="!todo.enabled">{{todo.text}}</li>

todo.component.html

　Angular2では、通常のHTMLファイル内にAngularの構文を追加することが可能です。このHTMLファイルの中では、下記のAngular2の構文を利用しています。

• (イベント名)="式"
  指定したDOMイベントが発生した際に、式が呼び出される
• [class.クラス名]="式"
  式の真偽値に応じて、指定したクラスの追加／削除を行う。今回はTODOが未チェックかチェック済みかで表示を切り替えるため、todoオブジェクトの内部プロパティを元にCSSクラスの切り替えを行っている
• {{式}}
  式の結果を文字列として出力するための構文です。ここでは、todoオブジェクト内に格納されている「todo.name」にアクセスし、テキストデータを取り出している

　HTML内で使用しているtodoやcheckTodoは、HTMLファイルとひも付いているTypeScriptファイル内でプロパティとして定義しています。

import { Component,Input } from '@angular/core';
import { Todo } from '../todo';
import { TodoService } from '../services/todo.service';
@Component({
  selector: 'todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent {
  // 親コンポーネントから値を受け取る
  @Input() todo: Todo;
  // コンストラクタ内でDIの仕組みを利用してサービスクラスを取得
  constructor(private service: TodoService) {
  }
  // サービスクラスを経由しチェックアクションを実行
  checkTodo(todo: Todo): void {
    this.service.checkTodo(todo);
  }
}

todo.component.ts

　プロパティ「todo」については、親コンポーネントであるAppやTodoListから渡される値です。Angular2において、子コンポーネント内で親コンポーネントから渡された値を参照する際は、@Input()修飾子を使用します。

　checkTodoメソッド内で利用しているserviceオブジェクトは、アプリで保持している全てのTODO情報とその状態を変化させるメソッドをまとめて定義しており、DI （Dependency Injection）の仕組みを利用して取得しています。

　DIとは、依存しているモジュールの実体を実行時に外部から注入する仕組みのことで、効果的に使うことでモジュール間の依存を弱めることが可能です。

　より詳しいDIの説明については、連載第3回で説明します。

TodoListコンポーネント

　Todoコンポーネントの親であるTodoListコンポーネントは以下の通りです。Reactと同様、保持しているTODOごとにTodoコンポーネントを繰り返し描画する役割を持ちます。

<ul>
  <todo *ngFor="let todo of todos" [todo]="todo"></todo>
</ul>

todo-list.component.html

　Angular2では、繰り返し項目の操作用APIである*ngFor属性を使って、todosで定義された配列の要素ごとに繰り返しTodoコンポーネントを描画しています。

　TodoListコンポーネントでは、子であるTodoコンポーネントへのデータの受け渡しを行っています。Angular2では、親コンポーネントのタグ内に[プロパティ]="値"のように記載することで、子コンポーネントのプロパティに対して、任意の値を渡すことができます。ここでは、todos配列の各要素であるtodoを渡しています。

import { Component, Input} from '@angular/core';
import { Todo } from '../todo';
@Component({
  selector: 'todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
// 親コンポーネントから値を受け取る
  @Input() todos: Todo[];
}

todo-list.component.ts

　todosは、プロパティとして用意している、Todoインタフェースの配列です。todosについても、todoListの親コンポーネントであるAppから受け取るため、「@Input()」修飾子を付けています。

Appコンポーネント

　Appコンポーネントは以下の作りになっています。

<add></add>
<todo-list [todos]="todos"></todo-list>

app.component.html

import { Component } from '@angular/core';
import { Todo } from './todo';
import {TodoService} from './services/todo.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [TodoService],
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 子コンポーネントに渡すためのプロパティを定義
  todos:Todo[];
  constructor(private service: TodoService) {
    // 実体はサービスクラスから取得
    this.todos = service.todos;
  }
}

app.component.ts

　todosは、DIの仕組みを用いてTODOリストの情報を保持するserviceオブジェクトから取得し、プロパティにセットしています。

次回は、状態（データ）管理やスタイルの適用、テストで比較

　今回は、Reactと、Angular2について、TODOアプリケーションの開発を進めながら、プロジェクトの生成と各コンポーネントの実装方法を比較しましたが、いかがだったでしょうか。

　React、Angular2、いずれもコンポーネント指向のフレームワークなので、コンポーネント単位で開発し、コンポーネントを組み合わせて画面を構築する、といった開発の流れが共通しています。

　一方でコンポーネントの作りにおいては、ReactはView部分がJSXと呼ばれるHTMLライクな構文でJavaScript内にロジックと一緒に記載するのに対し、Angular2ではView部分のHTMLファイルとロジック部分のTypeScriptファイルを分けて作成できるなどの違いが見られました。

　また、いずれも言語のベースはJavaScriptですが、純粋なECMAScript 2015であるBabelに対して、型付けのあるTypeScriptでは構文も大きく異なります。

　次回は、アプリケーションの状態（データ）管理や、CSSを用いたスタイルの適用、テストといった観点で引き続きReact、Angular2を比較していきます。お楽しみに。