Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

「Angular 2」の構成単位「コンポーネント」「モジュール」を使いこなそう

次世代Webアプリケーションフレームワーク「Angular」の活用 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。今回はAngular 2を構成する単位であるコンポーネントやモジュールの利用法について、実際にサンプルコードにコンポーネントやモジュールを追加しながら説明します。

目次

はじめに

 Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS(AngularJS 1)の次期バージョンです。リリース候補版の状態が長く続いていましたが、2016年9月時点に正式版(2.0.0)がリリースされました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。

 Angular 2はコンポーネントやモジュールと呼ばれる、Webサイトの実装を分割する仕組みを備えており、Angular 2自体も複数のモジュールから構成されています。これらの仕組みを活用して、実装を分割して見通しの良いソースコードを書いたり、ソフトウェア部品として別のWebサイトに移植したりできます。

 本記事では、Angular 2のコンポーネントやモジュールについて紹介します。まずコンポーネントやモジュールの概念を説明し、次に簡単なサンプルコードにコンポーネントやモジュールを追加しながら、具体的な記述方法を解説します。

対象読者

  • 正式版になったので本格的にAngular 2を使い始めようと思っている方
  • 最新フレームワークに触れておきたい方
  • 作成したソースコードを部品化・再利用したい方

必要な環境

 Angular 2はJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScriptが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Angular 2 2.0.0
    • Node.js v6.5.0 64bit版
    • Microsoft Edge 38.14393.0.0

 Angular 2の公式Webサイトでは基本的なAngular 2の実行環境を整える手順「5 MIN QUICKSTART」を公開しており、本記事のサンプルコードも、クイックスタートで作成したファイル一式をベースにします。2016年9月現在の手順で作成したクイックスタートプロジェクト(angular2-quickstart)を、ダウンロードできるサンプルコードに含めています。プロジェクトの実行方法については過去記事も参照してください。

「コンポーネント」と「モジュール」とは(1)

 最初にAngular 2の「コンポーネント」と「モジュール」について説明します。

Webページの一部分を構成する「コンポーネント」

 コンポーネントは、表示されたWebページのある一部分(ビュー)の内容や動作を定義します。コンポーネントはHTMLで表示を定義する「テンプレート」、コンポーネントの属性を定義する「メタデータ」とワンセットで、Webページの一部分を構成します。

 例としてクイックスタートのコンポーネント記述をリスト1に示します。

リスト1 クイックスタートのコンポーネント(angular2-quickstart/app/app.component.ts)
@Component({ // メタデータ ...(1)
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>' // テンプレート ...(2)
})
export class AppComponent { } // コンポーネント ...(3)

 メタデータ(1)のtemplate属性にテンプレート(2)が指定され、AppComponentという名前のクラスでコンポーネント(3)が定義されています。これらの内容が(メタデータのselector属性に指定された)<my-app>タグが記述された場所に描画されます。

図1 クイックスタートの赤枠部がコンポーネントに対応(angular2-quickstart)
図1 クイックスタートの赤枠部がコンポーネントに対応(angular2-quickstart)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5