Angular最速マスターへの道 第2章

Blog Single

昨日、Angular6.0.8がリリースされました。
Shadow DOMのサポートが追加された他は、今回はバグ修正が多かったようです。

さぁ今回もAngular最速マスターへの道進めていきましょう。

第2章目次

  • Forms
  • Directive
  • Template

Forms

AngularのFormsは機能がたくさん詰まっていますので
ひとまず一番簡単でよく使用する機能をご紹介していきます。
と、まずFormsModuleを使用できるようにAppModuleに設定しましょう。

// 省略
import { FormsModule } from '@angular/forms'; // ここを追記

@NgModule({
    imports: [
        FormsModule, // ここを追記
        ...
// 省略

NgModel

<input>などにプロパティを渡してそれに値を格納してもらうことができます。
使用するComponentにプロパティを用意して早速書いてみましょう。

// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
    public word: string = '';// プロパティを追加

    // 省略
}
<!-- second.component.html -->
<form>
    <input type="text" class="form-control" name="word" [(ngModel)]="word" placeholder="入力してください">
</form>
<div>
    入力した文字:<br>{{word}}
</div>

DEMOはこちら

フォームに何か文字を入力してみてください。
リアルタイムで入力した文字が表示されていると思います。
書き方もそこまで難しくないですよね。
NgModelで注意しておくポイントとしては、nameオプションを必ず書くことです。
書かないとエラーになりますので、注意してください。

Directive

Directiveにはいくつかの種類があります。
先ほど使用したNgModelも実はDirectiveです。
今回はNgModelとは少し違う種類の構造Directiveと呼ばれるものの、よく使う2つの例をみてみましょう。

NgIf

字面から見てもなんとなくわかるように、if文の役割を持ったDirectiveです。
やってみたらすぐにわかるので早速書いてみましょう。

// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
    // 下記のプロパティを追加
    public name: string = '';
    public isClicked: boolean = false;
    // 下記のメソッドを追加
    public click(): void {
        this.isClicked = true;
    }
    // 省略
}
<form>
    <input type="text" name="name" [(ngModel)]="name" placeholder="name" required>
    <button type="submit" [disabled]="!name" (click)="click()">SUBMIT</button>
</form>
<div *ngIf="isClicked">
    初めまして! {{name}} さん!
</div>

DEMOはこちら

ここではボタンを押すとclickイベントが発火し、typescriptに書いたclick()メソッドが呼び出されます。
ここでisClickedプロパティがtrueになるので押す前に表示されていなかった文章が表示された形です。

NgFor

これはループ処理の役割です。PHPで言う所のforeachとほぼ同じと認識してもらえればいいと思います。
こちらもちゃちゃっと書いていきましょう。

// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
    // 下記のプロパティを追加
    public members: {id: number; name: string}[] = [
        {id: 1, name: 'Mao Miyaji'},
        {id: 2, name: 'Taro Yamada'},
        {id: 3, name: 'Jiro Tanaka'},
        {id: 4, name: 'Hanako Sato'},
        {id: 5, name: 'Naoko Kato'},
    ];
    // 省略
}
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let member of members">
            <td>{{member.id}}</td>
            <td>{{member.name}}</td>
        </tr>
    </tbody>
</table>

DEMOはこちら

list形式でもいいのですが、今回は連想配列を使用したのでわかりやすいようにtable形式で表示させてみました。
membersという配列をngForでループして、値をmemberという変数で定義して使用しています。

Template

Templateは「決まった構造を持つもの」として認識していただければいいかなと思います。
ComponentにもtemplateとかtemplateUrlとかを設定していると思います。それです。
色々な使い方がありますがNgIfと一緒によく使用する書き方をひとつやってみましょう。

// 例: second.component.ts
// 省略
export class SecondComponent implements OnInit {
    // 下記のプロパティを追加
    public fruits: string[] = [
        'apple', 'orange', 'grape', 'strawberry', 'lemon'
    ];
    public selectedFruit: string = '';
    // 省略
}
<select name="fruit" [(ngModel)]="selectedFruit">
    <option value="">--果物を選んでください--</option>
    <option *ngFor="let item of fruits" [value]="item">{{item}}</option>
</select>
<ng-container *ngIf="selectedFruit">
    <div *ngIf="selectedFruit == 'strawberry' || selectedFruit == 'apple'; then redFruit; else notRedFruit">
        ここは表示されないよ!
    </div>
    <ng-template #notRedFruit>{{selectedFruit}}は赤い果物ではないです</ng-template>
    <ng-template #redFruit>
        <span class="text-danger">{{selectedFruit}}は赤い果物です</span>
    </ng-template>
</ng-container>

DEMOはこちら

さぁ今回ご紹介したすべてを総動員したコードにしてみました笑
NgIfにはthenelseがあり、if文でtrueのときにthen、falseの時にelseのTemplateを呼び出すことができます。
<ng-template #テンプレート名></ng-template>でTemplateを作成して、呼び出された時に返す構造を用意してあげます。
ちなみにng-templateで定義したテンプレートはその定義したhtmlの中でならどこでも呼ぶことができます。
同じ処理を何度も書かなくて済むので便利ですよ。

まとめ

今回の第2章では頻繁に使う便利機能のご紹介みたいになりましたがいかがでしたでしょうか?
Angularを始めると必ずといって良いほどこれらは使用することになると思うのでこの機会に覚えてみてください!

次章予告

  • ModuleとRouting応用
  • 親子関係に位置するComponent

参考

Angular最速マスターへの道シリーズはGitHubに公開しています。

Posted by Mao Miyaji
千葉にある夢の国を愛して止まない、元「魚のお姉さん」のエンジニア。PHP, TypeScriptメインで、暇さえあれば色々な言語を一かじり。

Other Posts: