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

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

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

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

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

環境について

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

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

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

Webコンポーネントとは

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

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

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

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

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

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

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

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

$ ng new componentSample

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

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

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

<div>
  <h1>
    {{title}}
  </h1>
</div>

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

３．コンポーネントを新規作成する

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

export class Item {
    price : number;
    name : String;
}

次に、 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}
    ];
}

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

４．作成したコンポーネントを読み込む

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

<div>
  <h1>
    {{title}}
  </h1>
</div>
<!-- DashboardComponent読み込み -->
<my-dashboard></my-dashboard>

次に、 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 { }
}

以上で修正は完了です。  

５．ブラウザでComponentを確認する

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

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

おわりに

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

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

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

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