JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】

JavaScriptの真偽値判定について知っておきたい
簡単そうだけれど、基本的なコードはどうやって書くの？
ボタンをクリックしたら、文字が消えたり出たりするのはどうやって書くの？

この記事はそんな方へ向けて書いています。

この記事でわかること

JavaScriptの真偽値判定とif構文
JavaScriptの真偽値とトグルボタン作成

この記事を書いている私は、職業訓練校Webデザイン6ヶ月コースに通っています。
JavaScriptを学習中で、なんとか理解できました。

しかし順風満帆ではありません。

JavaScriptには何回も挫折しています。
何度も心が折れています。

基本的には「授業を受ける → 理解したつもりになる → 復習しない → 授業についていけず挫折 → はじめからやり直す → 授業を受ける」を繰り返しています。

こういった背景の私が、やり直し学習でまとめた「JavaScriptの真偽値」を解説します。

※JavaScriptのわかりやすい本
あいまいの理解や疑問が解消しました。以下を参考にして記事を書いています。
»『スラスラ読める JavaScriptふりがなプログラミング』

Contents

JavaScriptの真偽値判定とif構文
- 真偽値で使える値【true、false】
- 真偽値とif構文の書き方例
JavaScriptの真偽値とトグルボタン作成
まとめ：JavaScriptの真偽値を理解して、クラスをつけたり消したりする

JavaScriptの真偽値判定とif構文

真偽値で使える値【true、false】

真偽値は、使える値があらかじめ決まっています。
文字列や数値と違い、以下のどちらかしか使えません。

true
false

true（トゥルー）は日本語で「真」と書き、条件を満たした状態を表します。
false（フォルス）は日本語で「偽」と書き、条件を満たしてない状態を表します。

真偽値とif構文の書き方例

真偽値は、if構文の条件に使ったとき、trueなら条件を通り、falseなら条件を通らない仕様になっています。

なおif文については「【JavaScriptの分岐】if構文の書き方、うるう年の判定方法」で解説しています。

例文その1

以下、変数checkにはtrueが代入されているので、条件は成り立ちます。

const check = true;

if(check){
　console.log( ' OK ' );
}

//出力結果：OK

逆に、constにfalseを代入しておくと、何も出力されません。

例文その2

チェック用の変数を作り、if構文を制御するとき、trueとfalseを交互に入れ替えれば、1つのボタンを押すたびに処理が変えられます（toggle処理といいます）。

以下例文では、クリックごとに開発者ツールにA、Bが交互に出力されます。

　btn.addEventListener('click', ( ) => {
　　if (check2) {
　　　check2 = false;
　　　console.log('A');
　　} else {
　　　check2 = true;
　　　console.log('B');
　　}
});
</script>

【解説】
変数check2にtrueを代入（上書きしたいのでlet）。
idがbtnの要素を変数btnに代入。
btnにイベント（クリック）とリスナー関数を設定（無名関数）。
ボタンをクリックしたら、if文を実行。
if文でcheck2＝trueなので、check2にfalseを代入し、開発者ツール（console）にAを出力。
次にクリックしたら、check2にはfalseが入っているので、if文のelseを実行（check2にtrue代入、cosoleにBを出力）
次にクリックしたら、check2にはtrueが入っているので、、、A出力のif文を実行。
クリックごとにA、Bが交互に出力されます。

なおquerySelectorやaddEventListenerなどのイベント処理については「JavaScriptのイベント処理の書き方【3つの手順／無名関数】」で解説しています（こちらも職業訓練校での学びです）。

JavaScriptの真偽値とトグルボタン作成

トグルボタンとは、同じ操作で動作を切り替えられるボタンのことです。

ボタンクリックで、ブラウザに文字が出たり消えたりするプログラムを作ります。

<head>
　<style>
　　#text {
　　　display: none;
　　}
　　#text.show {
　　　display: block;
　　}
　</style>
</head>

<body>
　<p class="btn"><button id="btn">ボタン</button></p>
　<div class="inner">
　　<div id="text">ここの文字は、ボタンをクリックする事で、出たり消えたりします。</div>
　</div>

　<script>
　　let check3 = true;
　　const btn = document.querySelector('#btn');
　　btn.addEventListener('click', ( ) => {
　　　let target = document.querySelector('#text');
　　　if (check3) {
　　　　check3 = false;
　　　　target.classList = 'show';
　　　} else {
　　　　check3 = true;
　　　　target.classList = ' ';
　　　}
　　});
　</script>
</body>

【解説】
変数check3にtrueを代入。
id＝btnの要素を、変数btnに代入。
条件にcheck3を使ったif文を書く。
リスナー関数で「クリックしたら」、id=textの要素を変数target（可変）に代入。
check3にtrueが入っているので、条件が成り立つほうに進み、check3=falseを代入。
クラスを付け加えるには変数名.classListに値を代入する。
id＝textにshowがつき「id=text.show」になり、head内の#text.show → display:block;が適用され、文字が表示される。
再度クリックするとcheck3にはfalseが入っているので、条件が成り立たないほうに進む。
check3=trueを代入。
文字の表示を消したいので、クラスを外すためにクラス名に「空の文字列」を入れる。
「id=text.show」から.showがはずされ、head内の#text → display:none;が適用され、文字が消える。

以上が、職業訓練校で学んだJavaScriptの真偽値についてです。

なお職業訓練校の先生が「クラスをつけたり、消したりするのがJavaScriptで大事」と言っていました。