初心者向けJavaScript：ngClassを使用したダイナミッククラスの割り当て

Webアプリでは、条件に基づいて要素の外観をカスタマイズする必要がよくあります。これを達成するためのいくつかの方法がありますが、Angularを使用している場合は、選択肢が明確です。ngClassディレクティブは、要素やコンポーネントにクラス名を動的に割り当てるためのさまざまな方法を提供します。その構文は簡潔でありながら、クラス名だけでなく、それらを設定する基準に対しても細かい制御を提供するためのかなり複雑なロジックをサポートしています。このチュートリアルでは、ngClassディレクティブを使用して要素にCSSクラスを動的に割り当てるための最も一般的な方法のいくつかを説明します。

[className]プロパティバインディングを使用してCSSクラスを割り当てる

この記事はngClassディレクティブについてですが、多くの場合、それさえも必要ないことに注意する価值があります！[className]プロパティバインディングのおかげで、ネイティブJavaScriptのclassNameプロパティを使用してクラスを設定できます。そのバインディング構文を使用して、文字列を結果とする任意のステートメントを実行できます。これにより、条件に基づいて1つ以上のクラスを設定することができます：

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

また、実行時にクラス名を構築することもできます：

<div [className]="'class' + someValue"></div>

読む： Web開発者が学ぶべき5つのJavaScriptの概念

[className]を使用したクラスの切り替え

上記のクラスのトグル技術は、inactive-classがおそらくデフォルトである必要があるよりもやや複雑だと考える人もいます。そのような考え方に賛同する場合、[class.class-name]構文を使用して評価される条件を指定することができます。

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

つまり、[className]プロパティバインディングを使用してクラスを条件付きで設定できるのであれば、なぜngClassディレクティブが必要なのでしょうか？後で見ていくように、ngClassディレクティブを使用する実際の理由は、複数のクラスの選択をサポートできるためです。

ngClassディレクティブの詳細な説明

ngClassディレクティブの使用方法に入る前に、その定義を見てみると理解が深まります。

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

上記のコードを見ると、以前に使用した[class] 構文が実際にはngClassディレクティブの一部であることが分かります。また、ngClassディレクティブは、動的クラスを設定するための4つのオプションを提供していることにも注意してください。

それぞれを詳しく見てみましょう。

文字列または文字列配列を供給するstringまたはstring[]

ngClassに文字列または文字列配列を割り当てることで、Angular変数に動的クラスをバインドすることができます。たとえば、activeClassという変数があるとします。.tsファイル内で、ある操作の結果に基づいて"text-success"や"text-failure"などの既知のクラス名に設定できます。

<div 
  [ngClass]="activeClass">
</div>

配列構文は、同じ要素やコンポーネントに複数のクラスを適用するのに便利です。

<div 
  [ngClass]="[activeClass, openClass]">
</div>

評価された式の使用

ngClassのやや高度ながら非常に有用な使用方法は、式を提供することです。提供されたクラスは、変数や式がtrueに評価される場合にのみ適用されます。式を提供するには、波括弧{}を使ったオブジェクトを提供する必要があります。各コロンの左側には、適用されるクラスであるプロパティ名があります。右側には、評価される式や変数があります。以下に例を示します:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

読む: React、Angular、Vue.js: テクニカルな違いは何ですか？

三項演算子の使用

三項演算子を使用すると、ブール式に基づいて値を変数に代入できます。ブールフィールド、またはブール結果に評価されるステートメントのいずれかです。最も基本的には、三項演算子は、条件演算子とも呼ばれ、変数を設定する場合のif/then/else文の代替手段として使用できます。

ngClassに三項演算子を供給することで、式がtrueの場合とfalseの場合の2つの異なるクラスを指定できます。三項演算子の基本的な構文は次のとおりです:

[ngClass]="expression or variable ? true class : false class"

以下は、2つの変数が等しいかどうかに応じてDIVのクラスを設定するために三項演算子を使用するコードです:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

ngClassのSet<string>シグネチャ: 望まれず愛されず

SetはES6で導入された新しいデータ構造であり、Mapに似ています。TypescriptのSetを使用すると、add()、has()、delete()などのメソッドを使用して一意の値をリストに格納できます。何らかの理由で、Set<string> ngClassの署名はあまり普及しませんでした。私は使ったことがなく、誰も使ったことがあるとは知りません。

それにもかかわらず、Setは要素やコンポーネントに適用するクラス名を表す文字列を含んでいるべきです。以下は、Setを作成するTypescriptコードの例です:

//クラスのメンバー変数を宣言
public classes = new Set();
 
//クラス名を追加
classes.add('active').add('text-large');

結論

このチュートリアルでは、ngClassディレクティブを使用して要素にCSSクラスを動적に割り当てる最も一般的な方法をいくつか説明しました。見ての通り、かなり強力な機能です。