【JavaScript】if/else文を一行で書くには？

前回のエントリに続きまして、ラジオボタンの値によって画面の内容を変化させる、というスクリプトを書きたいと思います。例によってjQueryベースで書いていきますが、今回の本題は『JavaScriptの三項演算子』です。簡単に言うと、if/else文を一行で書く書き方。

実は今作っているHTMLモック（模型みたいなもの）をまんま例に出してしまいますが、何がしたいかと言うと、ラジオボタンが「新しい配送先」のときだけ配送先入力のテーブルを出したいんです。

前回までのお話でラジオボタンをクリックしたときのイベント、ラジオボタンの値のとり方は分かっているものとして、普通if文で書くとこうなります。

1
2
3
4
5
6
7
8
9
10

// ラジオボタンの値を変数vに格納
v = $('input[name="address"]:checked').val();
// 値が2だったら
if(v == 2) {
	// 新規アドレス入力フォームを表示
	$('#newAddress').slideDown();
} else {
	// それ以外だったら非表示
	$('#newAddress').hide();
}

なんですが、
たまにelseまで含めて1行で書いているのを見かけます。

かっこいい！やってみたい！けど、Google先生にさえなんて聞いたらいいのか分からない！

というわけで、この機会にうちのSE様に聞いてみました。
「三項演算子」というらしいです。

書き方はこう。普通は

1
2
3
4
5

if(評価する式) {
	真の場合 ;
} else {
	偽の場合 ;
}

これを三項演算子で書くと、

1

(評価する式) ? 真の場合 : 偽の場合 ;

クール！とても視認性がよくなる気がします。コロンとセミコロンに気をつけてくださいね。

文字だと分かりづらいかもしれないので、
一応一番最初のif/else文を三項演算子に直してみましょう。

1
2
3
4

// ラジオボタンの値を変数vに格納
v = $('input[name="address"]:checked').val();
// 値が2だったら
(v == 2) ? $('#newAddress').slideDown() : $('#newAddress').hide();

一行であらわせました！クール！

もちろん、式を評価したあとの処理が長いときなどには
普通のif/else文のほうが見やすいこともあるでしょう。
それと三項演算子は変数を返せたり、もう少し奥が深いです。
場合によって使い分けられるとカッコイイですね！

……しかし、真の地獄は（ｒｙ
すっかり忘れてたんですが、最初の図を見ていただくとラジオボタンが3つありますよね。
3番目を選んだときは上記の処理でいいんですが、2番目を選んだときは隣のプルダウンをenableに、それ以外はdisableにしたいんでした。

もちろんif/else文で書けば簡単に書けます。
でもせっかく覚えた三項演算子はelseに条件を指定できないので使えそうにありません。ガッデム。
というわけで次回は、私がずっと苦手で避けてきているswith文をおさらいしたいと思います。