ラブ! Web開発

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

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

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

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

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

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

書き方はこう。普通は

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

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

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

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

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

// ラジオボタンの値を変数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文をおさらいしたいと思います。