連載
» 2017年04月04日 05時00分 公開

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

[千葉達仁, 日野達也,三菱総研DCS]
前のページへ 1|2|3|4       

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を比較していきます。お楽しみに。

前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。