Angular TIPS

Angular TIPS

ビューの中で「安全に」プロパティ/メソッドにアクセスするには?(「?.」演算子)

2017年1月16日 (2017/04/14 更新)

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

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

【対応バージョン】 Angular 2/4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

 別稿「TIPS:コンポーネントの値をビューに反映させるには?」では、{{...}}式では大概のJavaScript式が許容されていること、しかし、副作用を伴う演算子を中心に一部の機能は利用できないことを解説しました。

 しかし、一方でビュー(テンプレート)でだけ利用できる特別な演算子もあります。それが「?.」演算子Safe navigation operator)です。?.演算子を利用することで、プロパティ/メソッドを呼び出す際に、レシーバーオブジェクトがnullでないことを確認した上で呼び出すことができます。

 まずは、?.演算子を使わない例から見ていきましょう。

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

@Component({
  selector: 'my-app',
  template: '<p>{{book.title}}</p>'
})
export class AppComponent {
  book = {
    title: 'AngularJSアプリケーションプログラミング',
    price: 3700
  };
}
bookオブジェクトのtitleプロパティをバインドする例(app/app.component.ts)
書籍のタイトルが反映された
書籍のタイトルが反映された

 では、太字の部分をコメントアウトした場合はどうでしょう。この場合、bookプロパティはundefined(未定義)になるので、「Cannot read property 'title' of undefined」のようなエラーが発生するはずです。undefined(未定義値)からtitleプロパティは読み込めない、というわけです。

 もちろん、*ngIf*1のようなディレクティブであらかじめbookプロパティがundefinednullでないかを確認することもできます。しかし、undefinednullチェックの対象となるコードが増えてくれば、コードも冗長になりがちです。

 そこで登場するのが、?.演算子なのです。

  • *1 条件式によって表示を切り替えるためのディレクティブです。後日、別稿で解説します。

 先ほどの例で、templateパラメーターを以下のように書き換えてみましょう。コメントアウトしたbookプロパティはそのままとします。

TypeScript
template: '<p>{{book?.title}}</p>'
「?.」演算子を使ったundefined/nullチェックの使用例

 果たして、今度は例外が表示されなくなりました。?.演算子で、bookプロパティが空でないかどうかを確認し、空でない場合にだけtitleプロパティにアクセスするようになったからです。これがメンバーに「安全に」アクセスできる、といった意味です。

 ?.演算子は、例えばx?.y?.zのように、通常の.演算子と同じく、連結して利用することも可能です。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
API:?.演算子(Safe navigation operator) カテゴリ:テンプレート構文(Template Syntax)
API:NgIf(*ngIf) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第5回~第9回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

5. コンポーネントに適用すべきテンプレートを指定するには?(template/templateUrlパラメーター)

@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート(ビュー)を適用する方法を説明する。

6. コンポーネントの値をビューに反映させるには?({{...}})

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

7. 【現在、表示中】≫ ビューの中で「安全に」プロパティ/メソッドにアクセスするには?(「?.」演算子)

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

8. 要素オブジェクトのプロパティに値をバインドするには?(Property Binding)

要素のプロパティに値をバインドするProperty Bindingについて、「[プロパティ名] = "式"」「bind-プロパティ名 = "式"」「{{プロパティ名}}」という3つのバインディング構文を説明する。

9. ビューにHTML文書をバインドするには?(Property Binding)

プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認。逆に意図的にサニタイズさせない方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社