AngularによるWebアプリ開発③~ngIfを使いこなす

シリーズ記事一覧

Angularでwebアプリを作ってみる①~環境構築とコンポーネント作成

AngularによるWebアプリ開発②~Angular Material をインストールしてマテリアルデザインを実装する

開発環境

  • Angular ver9.0
  • Nodejs ver13.0

ngIf ディレクティブの使い方

AngularにはngIfというディレクティブが標準で用意されています。ngifはIf文のようなものでAngularでWebアプリを作る際によく使われる使い方としてはif文の中身がtrueの場合は特定の要素を表示する、反対にflaseの場合は表示しないといった設定ができる機能です。

この仕組みを利用して特定の要素をクリックなどのアクションで表示/非表示を切り替えたい場合によく使われます。これだけだと漠然としているので実際に使った例を紹介していきます。

まずNgifテスト用のコンポーネントを作成しておきます。

# 新規コンポーネントを作成
$ ng generate component ngif-sample

ngIfを使用するには、app.module.tsで、BrowserModuleをimportしておく必要があります。angularのバージョンによっては既にng newコマンドを実行したときに自動で書き込まれているので、記述があることだけ確認すれば大丈夫です。

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgifSampleComponent } from './ngif-sample/ngif-sample.component';

@NgModule({
  declarations: [
    AppComponent,
    NgifSampleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

次にtsファイルを記述していきます。ngif-sample.component.tsに以下のように記述します。

[ngif-sample.component.ts]

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-ngif-sample",
  templateUrl: "./ngif-sample.component.html",
  styleUrls: ["./ngif-sample.component.css"],
})

export class NgifSampleComponent implements OnInit {
  flg1: boolean;

  constructor() {
      this.flg1 = true;
      }
  ngOnInit() {}
}

tsファイルが記述できたら次はhtmlを編集していきます。

[ngif-sample.component.html]

<hr />
<div *ngIf="flg1">
  <p>flgがTrueだとこれが表示されます</p>
</div>
<hr />

実行結果

else文による条件分岐

ngifはプログラミング言語のif文と同じようにelseによる条件分岐も可能です。先ほどのngif-sample.component.tsに以下のように追記します。

[ngif-sample.component.ts]

~~
export class NgifSampleComponent implements OnInit {
  flg1: boolean;
  flg2: boolean; //追記
  
  constructor() {
    this.flg1 = true;
    this.flg2 = false; //追記
  }

  ngOnInit() {}
}

else時の表示内容は<ng-template>タグを使用して設定します。

[ngif-sample.component.html]

<div *ngIf='flg2; else Statement'>
  <p>{{flg2}}</p>
</div>
<ng-template #Statement>
  <p>falseの時に表示される内容です</p>
</ng-template>
<hr />

*ngIf=’flg; else Statement’と指定しておくことで変数flg2がfalseだった場合、<ng-template #Statement>の中身を表示するという風にできます。

ボタンクリックとngifで要素の表示非表示を切り替える

さてここからが本題です。Ngifで変数の中身がTrueだったら表示、Falseだったら非表示という機能を利用して、ボタンクリックなどの特定の操作で変数のTrue/Falseを切り替えることで特定の要素の表示/非表示を切り替えることができます。

まず[ngif-sample.component.ts]に以下のよう内容を追記します。

[ngif-sample.component.ts]

~~
export class NgifSampleComponent implements OnInit {
  flg1: boolean;
  flg2: boolean;
  flg3: boolean; //追記
  
  constructor() {
    this.flg1 = true;
    this.flg2 = false;
    this.flg3 = true; //追記
  }

  ngOnInit() {}

  doClick() {
    // this.flg3 = !this.flg3;(これでも代用可)
    // flg3がTrueならFalse、FlaseならTrueに置き換える処理
    if (this.flg3 == true) {
        this.flg3 = false;
        } else {
        this.flg3 = true;
        }
    }
}

[ngif-sample.component.html]

<button (click)="doClick()">
ボタン
</button>
<div *ngIf="flg3">
<p>ボタンをクリックするとこのメッセージが表示されます。もう一度クリックすると再び非表示になります。</p>
</div>
<hr />

以上のコードを追記すると以下のような画面になります。

簡単に説明すると、ボタンをクリックすると、doClick()という関数が実行されます。

doClick()で行われる処理はflg3がTrueならflase、flaseならTrueと中身を逆に書き換えるという処理を指定しています。ちなみにこの処理を一行でおしゃれにかくとこう書けます。

this.flg3 = !this.flg3;

これによってボタンをクリックするたびにngif=の中身がTrue⇔flaseと切り替わるので、要素の表示/非表示が切り替わるという流れです。

クリックするごとにdocclick()が実行→flg3のTrue⇔Falseが切り替わる→ngifによって要素の表示/非表示が切り替わるという流れです

終わり

以上がngIfの基本的な使い方です。サンプルコードはGitに配置しています。

次はNgifと同じくらい重要なngforの使い方について紹介していきます。

次の記事→

オススメ参考書

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

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

フォローする