Angularでコンポーネントを作成する

「AngularでWebコンポーネントをどうやって作成するのか?」
「そもそもWebコンポーネントって何??」
今回はこの辺りについて確認します。

AngularでのWebコンポーネント作成手順

今回はAngularでWebコンポーネントを作成する手順について簡単なサンプル画面を作成しながら確認します。

最近ではWebアプリで1つの画面を作る際、画面項目をコンポーネント(Web Componentとかって言ったりする)に分割し、いろんな画面で使いまわしたりします。

これからWebアプリを開発していく上でこの考え方は重要ですので、本記事では簡単なサンプル画面を作成しながら、Angularでのコンポーネントの作り方について確認していきます。

環境について

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.1.1
  • Visual Studio Code:1.13

Angularの開発環境構築は完了している前提で説明を行います。環境構築については以下を参照ください。

>>Angular開発環境構築手順(for Windows)

>>Angular開発環境構築手順(for Mac)

Webコンポーネントとは

Webコンポーネントとはブラウザに表示するHTMLを出力するものです。複数のコンポーネントが生成したHTMLを組み合わせ、1つの画面を生成できます。AngularではHTML(画面)+CSS(デザイン)+TypeScript(処理)で1つのコンポーネントを作ります。さらにそれらを組み合わせて1つの画面を作ります。(それぞれの部品はいろんな画面で再利用できることがメリットです)

図にするとこんなイメージです。

MEMO

コンポーネントは、以下の3つの要素でできています。

■Component Class
コンポーネントをコントロール(処理)する部分。 上の図でいうとType Scriptに記載します。  

■Template
コンポーネントのビュー(見た目)の部分。 上の図でいうとHTMLやCSSに記載します。  

■Metadata
コンポーネントの構成情報を定義している部分。 上の図でいうとType Scriptに記載します。

コンポーネントは、一般的には「Web Components」と呼ばれる実装技術です。 HTML、CSS、Type Scriptのセットで部品化することで、 大規模開発における開発生産性と保守性の向上が実現できるメリットがあります。 (コンポーネントを作っておけば、いろんなところで再利用できるから開発効率がいいですね)    

Angularでサンプルプログラム作成

では、実際にコンポーネントをAngularで作成していきます。

  1. Angular CLIでプロジェクトを新規作成する
  2. 作成したプロジェクトのソースを一部修正する
  3. コンポーネントを新規作成する
  4. 作成したコンポーネントを読み込む
  5. ブラウザでコンポーネントを確認する

1.Angular CLIでプロジェクトを新規作成する

Visual Stuido Codeを起動し、「Shift」+「Control」+「@」で統合ターミナルを立ち上げます。

任意のディレクトリ内で、プロジェクトを新規作成します。

command
$ ng new componentSample

以上でプロジェクト新規作成は完了です。  

2.作成したプロジェクトのソースを一部修正する

src/app/app.component.htmlを以下のように修正してください。

src/app/app.component.html
<div>
  <h1>
    {{title}}
  </h1>
</div>

以上でソースの修正は完了です。  

3.コンポーネントを新規作成する

では、いよいよコンポーネントを作成します。 まず、src/app/item.tsを新規作成してください。

src/app/item.ts
export class Item {
    price : number;
    name : String;
}
MEMO

作成したのはprice(number型)とname(String型)の属性を持つItemクラスです。 このItemクラスはコンポーネントがリスト表示するのに利用します。

次に、 src/app/dashboard.component.tsを新規作成してください。

src/app/dashboard.component.ts
import {Component} from "@angular/core";
import {Item} from "./item";

@Component({
    selector: "my-dashboard",
    template: `
        <ul>
            <li *ngFor = "let item of itemList">
                {{item.name}}:{{item.price}}円
            </li>
        </ul>
    `,

})

export class DashboardComponent {
    //商品リスト
    itemList : Item[] = [
        {name:"りんご", price:123},
        {name:"ばなな", price:200},
        {name:"ぶどう", price:500}
    ];
}
MEMO

■import部分 
先ほど作成したItemクラスを利用するのでimportしています。  

■@Component部分
selectorでこのコンポーネントの名前(my-dashboard)を定義しています。このコンポーネントを利用する箇所ではこの名前で利用します。templateではこのコンポーネントの見た目の部分を定義しています。外だしのHTMLファイルを作成して、そのpathを指定することも可能です。  

■DashboardComponent部分
このコンポーネントの処理の部分を定義しています。今回のサンプルでは処理は定義していないのですが、、、画面に表示するItemを3つ定義しています。

以上でComponentの新規作成は完了です。  

4.作成したコンポーネントを読み込む

AppComponent(Webアプリ起動時に最初に起動するコンポーネント)から、作成したコンポーネントを読み込みます。 src/app/app.component.htmlを以下のように修正してください。

src/app/app.component.html
<div>
  <h1>
    {{title}}
  </h1>
</div>
<!-- DashboardComponent読み込み -->
<my-dashboard></my-dashboard>
MEMO

my-dashboardタグで先ほど作成したコンポーネントをHTMLに埋め込んでいます。 つまり、 app.component.htmlからmy-dashboardコンポーネントを利用しています。

次に、 src/app/app.module.tsを以下のように修正してください。

src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DashboardComponent } from './dashboard.component';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    //DashboardComponentを読み込めるように追加
    DashboardComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
}
注意

コンポーネントを新規作成したらこの設定を忘れないように行ってください。 ここではWebアプリ全体の起動構成を設定しているイメージです。 例えば、 bootstrapの部分ではアプリ起動時に最初に動作させたいコンポーネントを指定できます。

以上で修正は完了です。  

5.ブラウザでComponentを確認する

ローカルでWebサーバを立ち上げ、ブラウザを確認します。

上のようになっていればOKです。画面としては全く面白くないですが、 りんご、ばなな、ぶどうのリストを他の画面で利用したい場合はmy-dashboardタグを追加するだけで使えるんです!!!    

おわりに

本記事では、Angularで簡単なコンポーネントを作成しながら、Web Componentについて確認しました。

Web Componentの実装技術を利用することで、開発生産性と保守性が向上します。正直、今回のサンプルではコンポーネント化の手間の割に、ありがたみを感じることはなかったです。が、大規模なWebアプリの開発では威力を発揮すると思います!!!

次はレスポンシブレイアウトの画面をAngularで作成してみましょう。

>>Angularでマテリアルデザインの画面を作成する(Angular Material利用)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください