javascript 真偽値のfalseを何のために使用しているのかが分かりません

Question

現在電卓をjavascriptを用いて作成しているのですが、あるサイトを参考にしながら作成していたところ、そのサイトの中のコードでvar is_calc = false;を変数に定義して、コードを書いているのですが、なぜこれを使うと＝で計算したかどうかになるのかが分かりません。
以下がコードになります。
分かりにくい質問かとは思いますがご回答のほどよろしくお願いします。

<div class="wrapper">
  <h1 id="header">電卓</h1>
  <div id="calc">
    <div>
      <input readonly id="result" type="text" value="0">
      <button onclick="c_click()">C</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">7</button>
      <button onclick="num_click(this.innerHTML)">8</button>
      <button onclick="num_click(this.innerHTML)">9</button>
      <button onclick="ope_click(this.innerHTML)">÷</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">4</button>
      <button onclick="num_click(this.innerHTML)">5</button>
      <button onclick="num_click(this.innerHTML)">6</button>
      <button onclick="ope_click(this.innerHTML)">×</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">1</button>
      <button onclick="num_click(this.innerHTML)">2</button>
      <button onclick="num_click(this.innerHTML)">3</button>
      <button onclick="ope_click(this.innerHTML)">-</button>
    </div>
    <div>
      <button onclick="num_click(this.innerHTML)">0</button>
      <button onclick="num_click(this.innerHTML)">.</button>
      <button onclick="equal_click()">=</button>
      <button onclick="ope_click(this.innerHTML)">+</button>
    </div>
  </div>
</div>

@charset "utf-8";
/*全体*/
.wrapper{
  max-width: 350px;
  margin: 0 auto;
  color: #666;
}
#header,#calc{
  box-sizing: border-box;
  text-align: center;
}
/*ヘッダー*/
#header {
  font-size: 24px;
  padding: 1rem;
}
/*テキスト*/
input{
  box-sizing: border-box;
  width: 75%;
  height: 3.5rem;
  font-size: 1.6rem;
  text-align: right;
  padding: 0 0.75rem;
}
/*ボタン関係*/
button{
  font-size: 18px;
  width: 25%;
  height: 3.5rem;
  color: #333;
  vertical-align: middle;
  border-color: #fff;
}
button:hover{
  background-color: #ddd;
}

var result = "";
// =で計算したかどうか
var is_calc = false;

// 初期表示
window.onload = function () {
  result = document.getElementById('result');
};

// Cキー押下
function c_click(){
  result.value = "0";
  is_calc = false;
}

// 数字キー押下
function num_click(val){
  if(is_calc)  result.value = "0";
  is_calc = false;  

  if(result.value =="0" && val == "0"){
    result.value = "0";
  }else if(result.value == "0" && val == "."){
    result.value = "0.";
  }else if(result.value == "0"){
    result.value = val;
  }else{
    result.value += val;
  }
}

// 演算子キー押下
function ope_click(val){
  if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }
}

// =キークリック
function equal_click(){
  if(is_ope_last())  result.value = result.value.slice(0, -1);

  var temp = new Function("return " + result.value.replaceAll("×", "*").replaceAll("÷", "/"))();
  if(temp == Infinity || Number.isNaN(temp)){
    result.value = "Error";
  }else{
    result.value = temp;
    is_calc = true;
  }
}

// 入力されている値が演算子かどうか
function is_ope_last(){
  return ["+","-","×","÷"].includes(result.value.toString().slice(-1));
}

Comments

[y_waiwai]

このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

Answer 1

まず、考え方が根本から違います。
プログラミングっていうのは「こう書けばこう動く」ではありません。ロジックを書くのです。

コードを読んでみてください。
コードを読むコツは「一行レベルで、その行が何をしているかを考えながら読む」です。

// ope_click(val)の定義

   if(is_calc)  is_calc = false;
  
  if(is_ope_last()){
    result.value = result.value.slice(0, -1) + val;
  } else {
    result.value += val;
  }

を読んでみましょう。
if(is_calc) is_calc = false;は、{}が省略されているのでわかりやすくするために

if(is_calc){
    is_calc = false;
}

としておきます。

そうすると、

  // is_calcがtrueなら
  if(is_calc){
       // is_calcをfalseにする
       is_calc = false;
  }

  // もし is_ope_last関数の戻り値がfalse系なら
  if(is_ope_last()){
    // result.valueの値をresult.value. …
    result.value = result.value.slice(0, -1) + val;
  } else { // それ以外なら
    result.value += val;
  }

という感じになるはずです。
後半部分は適当になってしまいましたが今回は関係ないので。

で、処理全体の内容や 変数 is_calc の遷移(データの移り変わり)を考えてみてください。

このope_click関数が呼び出された時には何をしますか？この関数の役割は？

最初、初期表示のコードでis_calcの値はtrueになっているはずです。
で、function ope_click(val)がよばれると、if(is_calc)でチェックされます。
is_calc の値はtrueなので条件を満たすため、処理部であるis_calc = false;が行われる。

そうすると、is_calcの値はfalseになるはずです。この処理の流れやデータの遷移をプロダクト全体で追うのです。

Comments

[yuki504]

回答ありがとうございます。
理解できました。
勉強不足なのでもっと理解を深めていきたいと思います。

Answer 2

フラグです。

フラグ (flag)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

Comments

[yuki504]

回答ありがとうございます。
フラグということは分かったんですが、
if(is_calc) is_calc = false;

if(is_ope_last()){
result.value = result.value.slice(0, -1) + val;
} else {
result.value += val;
}
の場合だと is_calc = false;なら片方のif(is_calc) はtrueになるという認識で合ってますでしょうか？

[Lhankor_Mhy]

試してみればわかると思いますが、違うんじゃないですかね……？

if(is_calc) is_calc = false;の結果は、
is_calc = false なら、is_calc は false だと思います。
is_calc = true でも、is_calc は false だと思いますけど。

Answer 3

コードでvar is_calc = false;を変数に定義して、コードを書いているのですが、なぜこれを使うと＝で計算したかどうかになるのかが分かりません。
「なぜこれを使うと」というという発想がおかしいです。

直近の処理が「＝で計算したかどうか」によって、is_calcをセットしているだけです。
で、if(is_calc)で、どちらだったかを判断して処理を変えています。
わかりにくければ、変数名をlast_key_was_equalにリネームしてはどうでしょうか？

Comments

[yuki504]

回答ありがとうございます。
片方のis_calc = falseなら片方のif(is_calc)はtrueになるという認識で正しいでしょうか？

[otn]

> 片方のis_calc = falseなら片方のif(is_calc)はtrueになるという認識で正しいでしょうか？
意味がわかりません。
is_calc = falseなら、is_calc は false ですが？？「片方の」とは？？

[yuki504]

if(is_calc)のカッコの中のis_calcです。
この中はtrueという認識ですか？
この中がfalseなら＝が押されてないときにresult.valueを初期化するというような意味合いになる気がするのですが。それだと辻褄が合わないので。
勉強不足かもしれないんですがよろしくお願いします。

[otn]

is_calc = false を実行してから、is_calcに別の値を代入する前に、is_calcの値を参照したらis_calcはfalseに決まってるじゃないですか。変数の値は何もしないと勝手に変わったりしません。さすがにそのレベルが理解できてないと思えないので、文章の意味が不明です。