みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はYES/NOボックスの作り方について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- YES/NOボックスを使った条件分岐ができる
- コピペで実装できる
今回は簡単なのですぐ読めるよ！
YES/NOボックスとは
YES/NOボックスとは、データ更新等を行う際に
「更新してよろしいですか？」
というように表示されるモーダルです。
ボタン押下→即実行とならないための仕組みだよ！
YES/NOボックスの実装方法
window.confirm(メッセージ内容)このように記述することで、モーダルを表示することが出来ます。
しかしこれだけではYES/NOの結果を受け取ることが出来ません。
YES/NOの判定結果を受け取ろう
const yesNoFlg = window.confirm(メッセージ内容);window.confirm()はBoolean値を返すので、
変数に代入することで、判定結果を受け取ることが出来ます。
Booleanとは真偽値の事で、trueかfalseが格納されるよ！
【コピペでOK！】実際にYES/NOボックスを作ってみよう！
See the Pen YES/NOボックス by samehack (@samehack) on CodePen.
このように記述することで、判定結果を受け取って
条件分岐をするYES/NOボックスが出来ました。
YES/NOボックスを作れてえらい！
まとめ
- window.confirm(メッセージ内容)
- YES/NOボックスはBoolean値を返す
- 戻り値を受け取ることで条件分岐が可能
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
