EJSで三項演算子の書き方

EJSで三項演算子の書き方

EJS (Embedded JavaScript) で三項演算子は、通常のJavaScriptと同様に使用できます。
基本的な構文は以下の通りです。

<%= condition ? true_value : false_value %>

condition が true の場合は true_value が表示され、false の場合は false_value が表示されます。

例として、以下のEJSコードでは、変数 age が20以上なら "Adult"、それ以外なら "Minor" と表示します。

<% let age = 18; %>
<p><%= age >= 20 ? 'Adult' : 'Minor' %></p>

このコードを実行すると、以下のようなHTMLが生成されます。

<p>Minor</p>

このように、三項演算子はEJSでも通常のJavaScriptと同じ方法で使用できます。

三項演算子を使用するメリット

三項演算子を使用するメリットはいくつかあります。
以下にその主な利点を説明します。

1. コードの簡潔化
三項演算子を使用すると、if-else 文よりもコードを短く、簡潔に書くことができます。
特に、単純な条件分岐で結果を変数に代入する場合に有効です。

// 通常の if-else 文
let result;
if (age >= 20) {
  result = 'Adult';
} else {
  result = 'Minor';
}

// 三項演算子を使うと1行で書ける
let result = age >= 20 ? 'Adult' : 'Minor';

このように、短く書けるため、コードの見通しが良くなります。

2. 可読性の向上
シンプルな条件分岐であれば、三項演算子を使うことでコードが一目でわかるようになり、可読性が向上します。
if-else 文が何行にもなる場合、読み手が条件と結果を理解するのに時間がかかりますが、三項演算子を使うと直感的に理解できます。

3. 変数の初期化や代入に便利
三項演算子は変数の初期化や代入の際に非常に便利です。
変数を条件に応じて異なる値で初期化する場合、一行で書けるので効率的です。

let status = isLoggedIn ? 'Logged In' : 'Guest';

このように、一行で変数に値を設定できるので、特にテンプレートエンジンやJavaScriptの短いスクリプトでの利用に適しています。

4. コードのネストを減らす
if-else 文を使って複数の条件を処理すると、コードがネストしてしまい、可読性が下がります。
三項演算子を使うと、ネストを減らし、コードをフラットに保つことができます。

// if-else 文
if (a) {
  result = 'A';
} else {
  if (b) {
    result = 'B';
  } else {
    result = 'C';
  }
}

// 三項演算子
let result = a ? 'A' : b ? 'B' : 'C';

5. テンプレートエンジンでの使い勝手
テンプレートエンジン(例えばEJS)では、HTMLの中に条件分岐を組み込むことがよくあります。
三項演算子を使うと、HTMLテンプレートを見やすく、かつコンパクトに保つことができます。

<p><%= isAdmin ? 'Admin' : 'User' %></p>

このように、HTMLの中で簡潔に条件分岐を行うのに適しています。

6. パフォーマンス
三項演算子は、通常のif-else 文と比べて高速に実行されることがあります。
ただし、この違いは大規模なアプリケーションではほとんど無視できる程度のものですが、小さな処理で頻繁に使う場合には効率を向上させることがあります。

注意点

一方で、複雑な条件や長い処理を三項演算子に詰め込みすぎると、かえってコードが読みにくくなる場合があります。
可読性を損なわないよう、シンプルな条件で使用することが推奨されます。

三項演算子の使用は、シンプルな条件分岐において、コードを短く、かつ効率的にするための強力なツールです。