【Angular入門（6）】コンポーネントを作ってみる

はじめに

今回から、いよいよAngularでWebアプリを作っていきます！！

ところで、

最近ではWebアプリで1つの画面を作る際、

画面項目をコンポーネント(Web Componentとかって言ったりする)に分割して

いろんな画面で使いまわす。みたいなことをするみたいでして、、

これからWebアプリを開発していく上でこの考え方は重要だと思うので、

本記事では簡単なコンポーネントをAngularで作成しながら、

Web Componentについて確認していきます。

まったく面白くはないですが、、本記事では最終的にこんな感じの画面を作ります。

環境

前提

Angularの開発環境構築は完了している前提で説明を行います。

まだの方は以下を参照ください。

そもそもコンポーネントとは。。。

ブラウザに表示するHTMLを出力するもの。だそうです。

複数のコンポーネントが生成したHTMLを組み合わせ、1つの画面を生成できます。

AngularではHTML(画面)＋CSS(デザイン)＋TypeScript(処理)で1つのコンポーネントを作ったりします。

それらを組み合わせて1つの画面を作ります。

(それぞれの部品はいろんな画面で再利用できることがメリットですかね)

こんなイメージです

コンポーネントは、一般的には「Web Components」と呼ばれる実装技術です。

HTML、CSS、Type Scriptのセットで部品化することで、

大規模開発における開発生産性と保守性の向上が実現できるメリットがあります。

(コンポーネントを作っておけば、いろんなところで再利用できるから開発効率いいでしょって話)

サンプルプログラム作成

では、実際にコンポーネントを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アプリの開発では威力を発揮すると思います！！！