今日のコード
See the Pen confirmについて(1) by riotam (@riotam4) on CodePen.
今回、横着したいという気持ちからVue.jsで書いてますが、説明したいの部分は生JSの部分です。 confirm()について、alert()と比較して説明したいと思います。 # コードの解説 ```vuejs:HTMLの3行目 計算する ``` ここの部分で、ボタンをクリックすると「culcメソッド」が発火します。 これはVueの書き方なので、今回は説明を割愛。JSの4行目
culc() {
if(confirm('計算しますか？')){
alert( 1 + 1);
}
}
それで、発火されるメソッドはこちら。
confirmで確認されてOKなら、1+1の結果をalertで出力している…という、感じです。
confirm()とalert()の違い
今回はconfirmについて調べていきましょう。
書き方はalertとよく似ていて、実行結果もよく似ています。
しかし、この２つは致命的に違う部分があります。
それは、戻り値です。
alert()の戻り値
See the Pen confirmについて(3) by riotam (@riotam4) on CodePen.
簡単な確認用のアプリを用意しました。 「調べる」を押すとダイアログが出現し、「OK」を押すと、**consoleにその戻り値を出力します。** ## alert()はundefinedを返す 結果は、確認できたでしょうか。 undefined（未定義）が返されています。 つまり、本当に**ダイアログを出力することのみ**に、機能が限定されています。 余計なものを戻して、戻した先で何かの影響を与えることもなさそうです。 ## confirm()の戻り値See the Pen confirmについて(2) by riotam (@riotam4) on CodePen.
こちらも、同じ要領で「調べる」を押すとダイアログが出現し、「OK」を押すと、consoleにその戻り値を出力します。 ただし、中身はalertではなく、confirmに変えています。 ここではぜひ、**「キャンセル」の方も押してみてください。** ## confirm()はブーリアン型(true/false)を返す 「OK」で「true」、「キャンセル」で「false」を返すようになっているのが、確認できるかと思います。今回のコードは、こういったconfirm()の特性を、if文に活かした形で作られています。alert()と、confirm()…似ているようで戻り値の違う関数なんですね。
ちょっとした応用!confirm()について
See the Pen confirmについて(4) by riotam (@riotam4) on CodePen.
はい、お分かりになられますでしょうか。 true/falseが逆に返されています。 これは、たとえば下のような質問の確認に使えます。See the Pen confirmについて(5) by riotam (@riotam4) on CodePen.
これなら、「はい」を選択して結果を出力せず、「キャンセル」を選択して結果を出力してくれます。 # confirm()の「はい」「キャンセル」はカスタムできない さっきの例でも、「キャンセル」という選択肢だとなんか分かりにくいですよね。 できれば、**「はい/キャンセル」**を**「自分で計算する/計算して」**に変えたいところです。 しかし、残念ながら**生JSではカスタムできません。**HTML&CSSで、ダイアログみたいなものをつくって、それぞれのボタンに機能を割り当てる…という方法なら、できなくはないですが…面倒。
そんな方は、jQueryのプラグインやライブラリなら、カスタムに対応しているものもいくつかあるようですので、必要であれば調べてみてください。
というわけで、今回はconfirm()とalert()の違いについてでした！
ありがとうございました。