JavaScriptによる削除する前に確認メッセージ（confirmdelete）を表示する方法について現役エンジニアが解説【初心者向け】

JavaScriptによる削除する前に確認メッセージ（confirmdelete）を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• confirmとは
• confirmの使い方
• confirmを利用して削除前の確認メッセージを表示させてみよう
• まとめ

 

confirmとは

confirmとは、widowオブジェクトが持つメソッドです。OKとキャンセルの2つのボタンを持つモーダルダイアログを表示します。
ブラウザによって表示に多少の差異はありますが、下記のようなダイアログがconfirmで呼び出したものになります。

モーダルダイアログとは、ダイアログ以外の操作をできなくするダイアログです。
confirmメソッドを使うと、OKまたはキャンセルのどちらかを選択するまで他の操作はできません。
OKとキャンセルのボタンがあることで、ユーザーに処理の実行前に確認を取ることができます。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

confirmの使い方

記述の省略が可能なwindowオブジェクトのメソッドなのでconfirm()と記述するだけで使うことができます。
引数は1つで、確認ダイアログの中に表示するメッセージ文字列です。

戻り値は、trueかfalseの真偽値です。確認ダイアログでユーザーがOKを選択した場合はtrue、キャンセルを選択した場合はfalseとなります。

例えば、リンクに使うa要素のonclick属性にconfirmを使うと、リンク先へ移動することを確認できます。
下記のように記述すると確認ダイアログでOKを選択した場合にのみリンク先に移動します。

<a href="https://junior.techacademy.jp/" onclick="return confirm('リンク先に移動しますか?')">リンク</a>

 

confirmを利用して削除前の確認メッセージを表示させてみよう

confirmを使って確認メッセージの表示と、ユーザーの確認結果に応じて処理を切り替える方法を紹介します。

let result = confirm('削除しますか');

if(result){
  console.log('削除しました');
}else{
  console.log('削除をとりやめました');
}

実行すると、「削除しますか」というメッセージの確認ダイアログが表示されます。
確認ダイアログの結果をresultという名前の変数に格納しているので、処理の分岐に使っています。
確認ダイアログでOKを選択した場合は、「削除しました」というメッセージをコンソールに表示します。

キャンセルを選択した場合は、「削除をとりやめました」というメッセージをコンソールに表示します。今回はメッセージの表示だけで実際には何の処理もおこないません。

確認ダイアログの処理の流れを確認し、実際に使う場合は結果に応じた処理を追加してください。

 

まとめ

confirmメソッドの確認ダイアログを使って、ユーザーの選択結果に応じた処理に切り替える方法を紹介しました。

 

監修してくれたメンター

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。