広告 Write

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

2021年7月20日

JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】
  • 「JavaScriptの真偽値判定について知っておきたい」
  • 「簡単そうだけれど、基本的なコードはどうやって書くの?」
  • 「ボタンをクリックしたら、文字が消えたり出たりするのはどうやって書くの?」

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

 この記事でわかること

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

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

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

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

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

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

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

JavaScriptの真偽値判定とif構文

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が交互に出力されます。

<p class="btn"><button id="btn">ボタン</button></p>

<script>
 let check2 = true;
 const btn = document.querySelector('#btn');

 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の真偽値とトグルボタン作成

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でクソほど大事」と言っていました。

まとめ:JavaScriptの真偽値を理解して、クラスをつけたり消したりする

まとめ:JavaScriptの真偽値を理解して、クラスをつけたり消したりしよう

JavaScriptは難しいです。
職業訓練校の先生も「HTML、CSSと違い、プログラムだから難しいと感じる人が多い」と言っていました。

JavaScriptの真偽値は簡単そうですが、大事な基礎です。
1つ1つの基礎理解を深めていくことで他の理解も進むはず。

JavaScriptの基礎知識、文法については「【JavaScript入門】初心者向けに「基礎文法」を完全まとめ」にまとめています。

以上です。

P.S. コツコツ積み上げます。

関連記事職業訓練校のWebデザイン授業についていけない【3つの解決策】
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由

-Write