Web Design

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

2021年7月20日

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

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

 この記事でわかること

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

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

じゃあ、順風満帆に理解できたかというと、全くそんなことはありません。

JavaScriptには何回も挫折しています。

基本的には「授業を受ける → 理解したつもりになる → 復習しない → 授業についていけず挫折 → はじめからやり直す → 授業を受ける」といった感じで繰り返しており、現在に至るという感じ。

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

JavaScriptは心が折れそうかもですが、3分だけお付き合いいただければ幸いです。

※ 参考図書:JavaScriptのわかりやすい本
あいまいだった理解や疑問が解消した本です。書籍内容を参考にして記事を書いていますので買う必要はないです。ただ、Kindle Unlimitedで無料なのでKindle会員の方はチェックしてみる価値はあると思います。
»『スラスラ読める 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を交互に入れ替えれば、一つのボタンを押すたびに処理が変えられます(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のイベント処理の書き方【3つの手順/無名関数】

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

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

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

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

index.html

<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の真偽値は簡単そうですが、大事な基礎です。
一つ一つの基礎理解を深めていくことで他の理解も進むはず。

JavaScriptの基礎知識、文法については下記記事にまとめています。

JavaScript基礎知識、文法
【JavaScript入門】初心者向けに基礎から文法をまとめました

こーいちより

P.S. コツコツ積み上げていきましょう。

関連記事【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由
関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.