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

はじめに

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

 

ところで、

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

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

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

 

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

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

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

 

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

 

 

環境

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

 

前提

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

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

 

 

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

ブラウザに表示する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で作っていきましょう。

手順は以下です。

  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アプリの開発では威力を発揮すると思います!!!

 

コメントを残す

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

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