[JS][Vue]confirm()とalert()の根本的な違いについて

# 今日のコード
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="VJpdVR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="confirmについて(1)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/VJpdVR/">
  confirmについて(1)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
今回、横着したいという気持ちからVue.jsで書いてますが、説明したいの部分は生JSの部分です。
confirm()について、alert()と比較して説明したいと思います。
# コードの解説
```vuejs:HTMLの3行目
<button @click="culc">計算する</button>
```
ここの部分で、ボタンをクリックすると「culcメソッド」が発火します。
これはVueの書き方なので、今回は説明を割愛。

```javascript:JSの4行目
culc() {
  if(confirm('計算しますか？')){
    alert( 1 + 1);
  }
}
```
それで、発火されるメソッドはこちら。
confirmで確認されてOKなら、1+1の結果をalertで出力している…という、感じです。
# confirm()とalert()の違い
今回はconfirmについて調べていきましょう。
書き方はalertとよく似ていて、実行結果もよく似ています。
しかし、この２つは致命的に違う部分があります。

それは、戻り値です。
## alert()の戻り値
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="XLMBWY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="confirmについて(3)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/XLMBWY/">
  confirmについて(3)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
簡単な確認用のアプリを用意しました。
「調べる」を押すとダイアログが出現し、「OK」を押すと、**consoleにその戻り値を出力します。**
## alert()はundefinedを返す
結果は、確認できたでしょうか。
undefined（未定義）が返されています。
つまり、本当に**ダイアログを出力することのみ**に、機能が限定されています。
余計なものを戻して、戻した先で何かの影響を与えることもなさそうです。
## confirm()の戻り値
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="KjWBPv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="confirmについて(2)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/KjWBPv/">
  confirmについて(2)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
こちらも、同じ要領で「調べる」を押すとダイアログが出現し、「OK」を押すと、consoleにその戻り値を出力します。
ただし、中身はalertではなく、confirmに変えています。
ここではぜひ、**「キャンセル」の方も押してみてください。**
## confirm()はブーリアン型(true/false)を返す
「OK」で「true」、「キャンセル」で「false」を返すようになっているのが、確認できるかと思います。今回のコードは、こういったconfirm()の特性を、if文に活かした形で作られています。

alert()と、confirm()…似ているようで**戻り値の違う関数**なんですね。
# ちょっとした応用`!confirm()`について
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="zVZLrm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="confirmについて(4)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/zVZLrm/">
  confirmについて(4)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
はい、お分かりになられますでしょうか。
true/falseが逆に返されています。
これは、たとえば下のような質問の確認に使えます。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="riotam4" data-slug-hash="PrpBNz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="confirmについて(5)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/PrpBNz/">
  confirmについて(5)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
これなら、「はい」を選択して結果を出力せず、「キャンセル」を選択して結果を出力してくれます。
# confirm()の「はい」「キャンセル」はカスタムできない
さっきの例でも、「キャンセル」という選択肢だとなんか分かりにくいですよね。
できれば、**「はい/キャンセル」**を**「自分で計算する/計算して」**に変えたいところです。
しかし、残念ながら**生JSではカスタムできません。**

HTML&CSSで、ダイアログみたいなものをつくって、それぞれのボタンに機能を割り当てる…という方法なら、できなくはないですが…面倒。
そんな方は、jQueryのプラグインやライブラリなら、カスタムに対応しているものもいくつかあるようですので、必要であれば調べてみてください。

というわけで、今回はconfirm()とalert()の違いについてでした！
ありがとうございました。