ブーリアン型の解説をしてほしい

Question

指定したidをクリックすると、チェックボックスが表示/非表示になるコードです。
コードは海外サイトからひっぱってきたもで、正常に動作してます。
ただ、コードの意味がわからないので、解説をお願いできませんか

ブーリアン型というものが関係している？
以下コメント部「←ここ」がどう作用しているのか、なぜ記述が必要なのか、わかりません。

let switch = false; //←ここ

function showCheckboxes() {
  let checkboxes = document.getElementById('checkboxes');
  if (!switch) {
    checkboxes.style.display = 'block';
    switch = true;//←ここ
  } else {
    checkboxes.style.display = 'none';
    switch = false;//←ここ
  }
}

 <div id="checkboxes" >
      <label for="">
        <input  type="checkbox" id="" />1</label>
      <label for="">
        <input  type="checkbox" id="" />2</label>
      <label for="">
        <input  type="checkbox" id="" />3</label>
    </div>

Comments

[m.ts10806]

言う程難解な処理ではないと思いますが、どの程度調べたのでしょうか。
今後のために入門書籍1冊でも読んで通した方が良さそうに思います。

[KoTT]

下記2名のかたの指摘で、"フラグ変数"”トグル処理”で調べたら、目的の情報がでてきて解決できました。ありがとうございます。入門書には目を通しましたが、”フラグ変数で調べる”ことにたどり着けませんでした。

[m.ts10806]

質問本文には特に何も書いてないのでこちらもどの程度把握できているか分かりませんでした。
調べたこと試したことは確実に記載してください。他人には書いてあることが全てですので。

[KoTT]

承知しましたら。コードを書き直したら記載いたします。

[m.ts10806]

既に解決されていますし、次からで良いですよ。

Answer 1

checkboxes.style.display の値を表すフラグ変数で、下記コードでフラグを判定しています。

if (!boolean) {

しかし、checkboxes.style.display の値そのものを確認すれば、フラグは不要となるので、冗長なコードになってしまっています。

---

それと、element.style を直接操作するよりも「class 属性値」または「aria-hidden 属性値」で制御するほうがセマンティクス的に好ましいと思います。

Re: KoTT さん

Comments

[KoTT]

ありがとうございます。”フラグ変数”ということがわかっていませんでした。フラグ変数でぐぐると、初心者用の記事がたくさんでてきたので、やっと理解できました。理解できると、なんのことはない処理ですね。
アドバイスいただいたとおりに、class属性に変更してコード書き直してみます。

[think49]

「フラグ変数」のキーワードが重要な情報ではないと思います。

- 変数 boolean の値を変えてみて、動きがどのように変化するか
- 変数 boolean の値がいつ変化しているのか

そのような目線で見てみれば、「変数 booleanが挙動に与える影響」を確認する事が出来ます。
それは「フラグ変数」という言葉を知ることなく、状況を把握できる手段になります。
フラグ変数という名前を得ることで他人のテクニックを盗む手段を得ますが、まずは目の前にあるコードの挙動を自分自身で理解するのが先決と思います。

Answer 2

booleanという変数が微妙ですね
ようはフラグのトグル処理です。
フラグがtureならfalseにfalseならtrueにして、
それぞれに適当な処理を書いているのです

Comments

[KoTT]

ありがとうございます。"フラグを利用したトグル処理"でぐぐったら、同じレベルの初心者用記事がたくさんみつかりました。私の問題は、ググり方がわからなかくて困っていた、Boolean,JS,false,変数で検索してもみつからなかったので。

Answer 3

if文に関する初歩的な誤解

if文
if(この中){
console.log("(この中)がtrueであれば実行される,falseであれば undefinedになる")}

初心者の勘違い

if(false){
//処理
};

↑これを、もし()がfalseだったら{}内を実行するという意味と誤解していた。
これが間違いで()がfalseなら、undefined(エラー)になる。

if文はあくまで（）内の値がtrueだったら{}の処理を実行するという構文

if(true){
//処理が実行される
};

if(false){
//処理が実行されない
};

フラグ処理でググって動きを理解

たぶんこういうこと

1回目のクリック

let switch = false;　//変数はfalseの状態でスタート（これに特に意味はない）

//↓変数 switchはfalseではない＝trueなので処理を実行する
if (!switch){
checkboxes.style.display = 'block';
switch = true;//、実行されることで変数 switchがtrueに変更される
}

//↓変数 switchがtrueなら falseにする＝この時点ではswitchはtrueなのでなにも処理されない
else {
checkboxes.style.display = 'none';
switch = false;
}

2回目クリック

1回目のクリックで変数switchはtrueになっているため、

//　!switchはfalseになり、以下の処理は実行されない
 if (!switch){
    checkboxes.style.display = 'block';
    switch = true;
    }

その代わり、

  } else {
    checkboxes.style.display = 'none';
    switch = false;
  }

の処理が実行される
この処理の中で変数switch はfalseに変換されるため、1回目のクリックと同じ状態にもどる
この処理が繰り返されることで、ON/OFFの挙動がつくれる。

また、checkboxes.style.displayはcheckboxes.classList.toggle('is-open');に変更