【初心者必見】Angularの基本をおさらい

JavaScript系フロントエンド開発で人気のフレームワークといえば、Angular、React、Vueがあります。その中でもAngularは学習コストが高く、複雑なアプリケーション開発に向いています。

AngularはNode.jsを使用しています。利用するライブラリはpackage.jsonに設定し、npm installをすることで導入することができます。（/node_modulesにインストールされる）

AngularはSPA（Single Page Application）として知られていますが、今回は、Angularの基本的な構成について説明します。

SPA（Single Page Application）とは

まずは、SPA（Single Page Application）を実現させている仕組みについてみていきましょう。

SPAを実現させる上で重要なのが、複数のコンポーネントにページ内の部品を分けることができるということです。

例えば、図でいうコンポーネントCをAやBのコンポーネント内で利用することが可能です。

SPA（Single Page Application）は初回のページアクセス以外は基本的にJavaScriptで行うので、単一のページで構成されます。つまり、ページ遷移はブラウザではなく、アプリが責任を持ちます。

これを実現するために、URLのパスが変更されたときにどのコンポーネントを呼び出すか定義をする必要があります。それがRouterModuleで、以下のように設定します。

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: MainComponent, canActivate: [AuthGuard], data: { id: 'app.hpge' } },
  { path: 'list', component: HogeListComponent, canActivate: [AuthGuard], data: { id: 'app.hpge' } },
  { path: ':objectId', component: HogeComponent, canActivate: [AuthGuard], data: { id: 'app.hpge' } }
];

/に遷移した場合はMainComponent、/listに遷移した場合はHogeListComponentが表示されます。/:objectIdのように変数を定義できますので、例えば商品詳細画面に遷移する際の対象商品IDをパスに設定することも可能です。

補足：定義されたルートの上から読み込んでマッチしたものを表示します。

モジュールの導入

Angularはモジュールに各コンポーネントの定義をします。以下のような定義をすることで、別のモジュールのimportやexportができるので、モジュールを複数に分けて、別モジュールのクラスを参照することも可能になっています。

import { NgModule } from '@angular/core';
import { CommonModule} from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    HogeComponent
  ]
})
export class TestModule { }

ルートモジュールが以下のsrc/app直下にある以下のコンポーネントになります。

src/app
|---app.component.ts
|---app.component.scss
|---app.component.html
|---app.module.ts
|---app.routing.ts

では、仮にsrc/app/testにサブモジュール（TestModule）を作成した場合を考えてみましょう。

src/app/test
|---test.component.ts
|---test.component.scss
|---test.component.html
|---test.module.ts
|---test.routing.ts

その場合、ルートモジュールのルーティング設定は以下のようにすることで、サブモジュールのルーターに連携することが可能です。

/test/{サブモジュール（TestModule）のルーターの設定パス}

import { Routes } from '@angular/router';
import { AuthGuard } from '@app/core';

export const appRoutes: Routes = [
  { path: 'test', loadChildren: () => import('./test/test.routing.module').then(m => m.routes), canActivate: [AuthGuard] },
];

Data Bindingとは

Data BindingとはView(.html)とComponent(.ts)でデータの受け渡しができる仕組みです。

これによって、html内でtsファイルのデータをそのまま参照したり、IfやFor文を書いたりなんかもできちゃう優れものです。

以下はComponent(.ts)でhtmlとのリンクをするための設定コードです。

@Component({
  selector: 'app-hoge-selector', //他コンポーネントhtmlでの定義ÐOM名:<app-hoge-selector/>
  templateUrl: `./hoge-selector.component.html`,　//componentから見た相対パス
  standalone: true,
  imports: [CustomModule]
})
export class HogeSelectorComponent {
  ...
}

バインディングには以下4つの種類があります。

• InterPolation
• Property Binding
• Event Binding
• Two-Way Binding

ComponentからViewへのData Binding

<app-selector [property]="value"/>
<p>{{value}}</p>

InterPolation（補間）はただ、変数を参照できるのに対し、Property Bindingはコンポーネントのpropertyに変数を渡すことができます。

ViewからComponentへのData Binding

<app-selector (event)="handler($event)"/>

Event Bindingはeventが発生した時に、Componentの関数を呼ぶことができます。引数に$eventとつけると、発生したイベントからオブジェクトを受け取ることができます。(eventオブジェクトが渡される場合)

PrimeNG（Getting Started – PrimeNG）はUIコンポーネントを無料で提供しており、一から自作するよりも簡単にアプリが作れます。

双方向Data Binding

<app-selector [(property)]="value"/>

Two-Way Bindingはユーザー操作や子コンポーネントなどで変数が変わった際に、ViewからComponentに変数を渡したり、逆にComponent内で変数が変わった際にViewにデータを渡すことが可能なので、双方向バインディングと呼びます。

親子コンポーネント間でのData Binding

親子関係のコンポーネント間でもデータの受け渡しが可能です。以下のように@Inputデコーダーと@Outputデコーダーを定義します。

@Input() property: type;

@Output() event = new EventEmitter<type>();
this.event.emit(data);

// property：プロパティ名
// event：イベント名
// type：各デコーダで渡したいデータの型

以下の場合、親コンポーネントBのViewでapp-selectorという子コンポーネントAに対して＠Input()でparentValueにデータを渡しています。
そして、子コンポーネントAでchangeイベントを発生させ、＠Output()でこのイベントが親コンポーネントBにItemデータを$eventオブジェクトとして渡しています。

最後に

いかがでしょうか？
Angularは結構複雑で、特に基本であるData Bindingに関して理解するのも時間がかかります。。

結構盛りだくさんでしたが、まだまだ触れていない便利な機能がたくさんあるので、おいおいまとめていけたらと思います。

実際に実装することで仕組みを理解できるようになると思うので、めげずに少しずつ慣れていきましょう。