Angularで「イベントハンドラー」を登録するには?(Event Binding)Angular TIPS

要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明する。

» 2017年07月06日 05時00分 公開
[山田祥寛]
「Angular TIPS」のインデックス

連載目次

現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が@ITの通常の記事とは異なる場合があります。


【対応バージョン】

 Angular 4以降。v4時点で執筆しました。


 Angularでは、イベントハンドラーもデータバインディング構文を使って設定します。Property BindingAttribute Bindingが、コンポーネントの値(プロパティ)をビューに伝える、コンポーネント→ビュー方向のバインド構文とするならば、Event Bindingはビューで発生したイベントの情報をコンポーネントに通知する、ビュー→コンポーネント方向のバインド構文です。

 例えば以下は、ボタンをクリックすると、現在時刻を表示する例です。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <!--イベントハンドラーを登録-->
    <input type="button" value="現在時刻" (click)="onclick()" />
    <div>{{result}}</div>
  `,
})
export class AppComponent  {
  // 変数resultを初期化
  result = '現在時刻は不明です。';

  // ボタンクリック時に現在時刻を表示
  onclick() {
    this.result = `現在時刻は、${new Date().toLocaleTimeString()}です。`;
  }
}

clickイベントハンドラーを登録するためのコード(app.component.ts)

ボタンクリック時にメッセージを表示 ボタンクリック時にメッセージを表示

Event Bindingの構文

 Event Bindingの構文は、以下の通りです。

[構文]Event Binding

(event)="statement"

  • event: イベント名
  • statement: イベント発生時に実行されるステートメント

 これでイベントeventが発生した時に、命令群statementを実行しなさい、という意味になります。利用できるイベントには、以下のようなものがあります。

イベント 概要
click クリック時
dblclick ダブルクリック時
mousedown マウスボタンを押した時
mouseup マウスボタンを離した時
mouseenter マウスポインターが要素に入った時
mousemove マウスポインターが要素内を移動した時
mouseleave マウスポインターが要素から離れる時
keydown キーを押した時
keypress キーを押し続けている時
focus 要素にフォーカスが当たった時
blur 要素からフォーカスが外れた時
input 入力値が変更された時
select テキストが選択された時
keyup キーを離した時
reset リセット時
submit サブミット時
利用できる主なイベント

 Event Bindingの右式には任意の命令群(テンプレートステートメント)を指定できます。テンプレートステートメントの規則は、{{...}}式のそれに似ていますが、微妙に異なる点もあるので、以下にまとめておきます。

【1】利用できない構文がある

 テンプレートステートメントでは、以下の構文は利用できません。

  • new演算子
  • インクリメント/デクリメント演算子(++、--)
  • 複合代入演算子(+=、-=など)
  • ビット演算子(|、&)
  • テンプレート演算子

 {{...}}式では利用できなかった=演算子、連結演算子(;、,)も、テンプレートステートメントでは利用できる点に注目してください。

【2】グローバル名前空間上のオブジェクトは参照できない

 {{...}}式と同じく、Event Bindingのコンテキストは、コンポーネントのインスタンスです。つまり、{{...}}式からは、グローバル名前空間にあるwindow、documentのようなオブジェクトにアクセスすることはできません。

【3】テンプレートステートメントのガイドライン

 【1】を見ても分かるように、テンプレートステートメントは{{...}}式よりも自由な記述が可能です(例えば、;を利用できるので、複合的な文も表せます)。ただし、ビューとコンポーネントの役割を分離するという意味で、テンプレートステートメントで複雑なコードを表すのは避けるべきです。一般的には、イベントハンドラーの呼び出し、もしくは簡単なプロパティの割り当て程度にとどめるべきです。

Event Bindingの別構文

 Event Bindingでは、以下のような別構文も利用できます。イベント名を丸かっこでくくる代わりに、on-<event>属性で表します。例えば先ほどのサンプルは、以下のように書き換えても同じ意味です。

<input type="button" value="現在時刻" on-click="onclick()" />

on-<event>属性で書き換えたコード

 いずれの構文を利用するかは好みにもよりますが、まずはアプリの中では統一していくべきです。本連載では、標準的な(event)構文を優先して利用していきます。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:Event Binding(イベントバインディング) カテゴリ:テンプレート構文(Template Syntax)
処理対象:バインディング構文(Binding Syntax) カテゴリ:テンプレート構文(Template Syntax)
処理対象:(イベント名) = "テンプレートステートメント"|on-イベント名 = "テンプレートステートメント" カテゴリ:テンプレート構文(Template Syntax) > バインディング構文(Binding Syntax)


「Angular TIPS」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。