Angular2 DartにおけるIF文

今回はif文です。Angular2 Dartにおけるif文の記法は最初見た時は個人的にかなり特殊な感覚でした。

今回のソースはこちらです。

pubspec.yamlやエントリーポイントのクラスは前回と同じになるので今回は省略します（上記GitHubのソースには存在します）

単純なIF文

Component側のフィールドの評価が真偽によって表示制御をしたい場合

@Component(selector: 'app', templateUrl: 'app.html')
class App {
  String hoge1 = "hoge1";
}

<div *ngIf="hoge1 != null">表示1</div>
<div *ngIf="hoge1 == null">非表示</div>

Angularの世界においてDirectiveと呼ばれる*ngIfという表記にてIF文を表現します。そして「=」の後のダブルクォーテーション内に真偽を評価する式を記述することになります。
Dart版Angular2がTSやJS版と違う部分の一つとしてこの部分が挙げられます。TSやJSでは言語仕様上下記でもOKです。

<div *ngIf="hoge1">表示1</div>

しかしDartは真偽を評価するのは型としてboolでなければなりません。よってTS版やJS版では問題ない上記の記述方法でDart版を書くと例外が発生します。この部分は注意しておく所ですね。
また、「*」は必ず必要になります。

メソッド呼び出しの結果を評価させる

こちらは単純です。下記になります。

app.html

<div *ngIf="isDisplay('str')">表示2</div>
<div *ngIf="isDisplay('strs')">非表示</div>

app.dart

@Component(selector: 'app', templateUrl: 'app.html')
class App {
  bool isDisplay(String str) {
    return "str" == str;
  }
}

普通というかDartでメソッドを呼び出す書き方で記述が可能です。
ちなみに下記のようなboolを返さないメソッドを呼び出すと例外が発生します。

app.html

<div *ngIf="getString()">エラー</div>

app.dart

@Component(selector: 'app', templateUrl: 'app.html')
class App {
  String getString() {
    return "str";
  }
}

なぜ「*」が必要なのか

ngIfの前に「*」が付いてるのに違和感を感じませんか？私は最初みたとき凄く感じました。
ただ当然ながらこれには理由があります。
結論から言うとこれは後述するIF表現のシンタックスシュガーになります。

実はngIfは下記にように展開可能です。

<div template="ngIf:hoge1 != null">表示5</div>

さらに上記は下記のように展開可能です。

<template [ngIf]="hoge1 != null">
    <div>表示6</div>
</template>

しかし毎回templateタグを書いてIFを表現するのは冗長だし解析する側も大変だよねという事でこのような記述方法を用意しているようです。

感想

最初は「なんでこんな書き方するの？？」とか思ってたところもいろいろ調べるとその意図が見えてきて面白いです。意外と柔軟にngIf内の表現を書けますし慣れてくれば当初感じてた違和感もなくなってくるかなぁと思います。ただ、どうしても他のDirectiveとの表現方法が違うのでどうしてもとっきにくさはあるんじゃないかなぁというのが個人的な感想です。

次回はngForか2way bindingについて書こうかなと思います。