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

初心者向けにJavaScriptによる削除する前に確認メッセージ(confirmdelete)を表示する方法について解説しています。確認ダイアログを表示させるにはconfirmを使用します。実装方法、メッセージの設定方法を学習しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

削除する前に確認メッセージ(confirmdelete)を表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

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講座を開催しています。

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