【JS】一番簡単な真偽値フラグの切り替え方法

JavaScriptを使ったハンバーガーメニューなどの実装で、メニューの表示・非表示の切り替えの際に真偽値フラグを使うことが多いのだが、最近知った簡単なフラグの切り替え方法について紹介する。

初歩的な切り替え方

if文を使った初歩的な切り替え方を見てみよう。

var flg = false;

if(flg) {
	flg = false;
} else {
	flg = true;
}

フラグの切り替えだけで、こんなに長いコードを書かなければならない。

これをもっとシンプルに書いてみる。

if文要らず　たった一行で切り替える方法

真偽値反転の「!」を使うことで、先述の長いコードをたった一行にまとめることができる。

var flg = false;

flg = !flg;

これを応用し、メニューの表示・非表示処理を書いてみた。

var menu = $('#menu-btn');
var menuOpenFlg = false;

menu.on('click', function(){
	if(menuOpenFlg = !menuOpenFlg) {
		$('#menu').fadeIn(200);
	} else {
		$('#menu').fadeOut(200);
	}
	return false;
});

メニュー展開だけでなく、あらゆる場面で使いやすそうなコードだ。