TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでconfirmダイアログの文章を改行する方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptでconfirmダイアログの文章を改行する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでconfirmダイアログの文章を改行する方法について現役エンジニアが解説しています。confirmダイアログは確認を促す画面で、選択により処理を分けることが出来ます。JavaScriptのconfirm画面に表示したい文字列を改行させるには改行コードであるnを挿入します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

監修してくれたメンター

永井浩平

BtoBtoC事業を行っている会社で社内SEとして勤務。
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。

JavaScriptでconfirmダイアログの文章を改行する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

目次

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでconfirmダイアログの文章を改行する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

はじめに

confirmダイアログとは、ユーザーに「登録しますか？」などのメッセージを表示して「OK」「キャンセル」を選択させる際に利用します。

今回は、confirmダイアログのユーザーに表示するメッセージを改行する方法について説明します。

文章が長い場合など、改行を入れることでより分かりやすく視認性が向上しますので、ぜひ覚えておきましょう。

 

confirmダイアログの使い方

confirmダイアログは、下記のように実装できます。

confirm('メッセージ');

 

「OK」「キャンセル」の結果を取得して分岐する場合は、下記のように実装します。

if(confirm('メッセージ')){
  //OKの場合
}else{
  //キャンセルの場合
}

 

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

confirmダイアログのメッセージを改行する方法

confirmダイアログのメッセージを改行するには、改行したい部分に改行コード「\r\n」を入れます。

confirm("メッセージ1行目\r\nメッセージ2行目");

 

下記のようにconfirmダイアログが表示されます。

 

まとめ

今回は、JavaScriptでconfirmダイアログの文章を改行する方法を解説しました。

入力内容の確認などでconfirmダイアログはよく利用します。

またアラートに関しても同様に改行を入れることができますので、ぜひ改行コードの扱いかた含めて覚えておきましょう。

 

大石ゆかり

内容が分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】

JavaScriptのElementオブジェクトについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptのデータ型と型変換を現役エンジニアが解説【初心者向け】

JavaScriptのデータ型と型変換について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaS...
JavaScript

JavaScriptでpushを使って配列に要素を追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptでpushを使って配列に要素を追加する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...
JavaScript

JavaScriptでキーイベントを受け取る方法を現役エンジニアが解説【初心者向け】

JavaScriptでキーイベントを受け取る方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入...
JavaScript

JavaScriptで文字列を大文字・小文字に変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列を大文字・小文字に変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

DOM操作のためのJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

DOM操作のためのJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。 目次はじめにconfirmダイアログの使い方confirmダイアログのメッセージを改行する方法まとめJavaScriptを学習中の方へ そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   確認ダイアログとは Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、[OK]と[キャンセル]ボタンによってWebサイト側から確認を求められることがあります。 これを確認ダイアログといいます。Webページを作る上では使用頻度の高い機能なので、alertやpromptなどと合わせ是非作り方を覚えましょう。   大石ゆかり 田島メンター！前にalertメソッドを使ってダイアログを表示させましたが、確認ダイアログを表示させる関数もあるんですか？ 田島悠介 alertメソッドとほぼ同じなんだけど、確認ダイアログの場合、ユーザーが選択したボタンの情報を受け取れるんだよね。OKとかキャンセルとかのボタンの結果なんだけど。 大石ゆかり じゃあ、結果によって表示や処理を変えるといったことができそうですね。 田島悠介 そうそう。それが違いかな。さっそく確認ダイアログを表示させてみよう！   confirmを使って確認ダイアログを表示させる JavaScriptで確認ダイアログを表示させるときは、confirmメソッドを使います。 構文 OKボタンが押されたかの真偽値 = window.confirm('メッセージの文字列'); 引数に確認ダイアログに表示するメッセージを文字列で指定します。 戻り値は「OK」ボタンが押されたらtrue、「キャンセル」ボタンが押されたらfalseの値が真偽値で返されます。 ※confirmメソッドはWindowオブジェクトのメソッドです。本当なら「window.confirm」と呼び出す必要がありますが、「window」は省略できるので「confirm」だけで呼び出せます。 ※オブジェクトとは関連のある値を記憶する変数（プロパティ）や関数のように呼び出す処理（メソッド）をグループにしたものです。 真偽値とは？ JavaScriptの値の型のひとつに真偽値があります。 真偽値は真（true、トゥルー）と偽（false、フォールス）の2つの値をとります。 trueは条件が成立している、または有効なものを表しています。 falseは条件が成立していない、または無効なものを表しています。 if文の条件には真偽値が使われるので、「if(条件式)」だと条件式がtrueの場合に実行される処理を指定します。 ※真偽値はシングルクォーテーションなどで囲みません。’true’だと文字列になります。 ソースコード では、ためしに「入力に間違いはないですか？」という文字列を表示させてみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> </head> <body> <script> const answer = confirm('入力に間違いはないですか？'); document.write(answer); </script> </body> </html> ※「const」は再代入できない固定された値として使える変数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。 表示結果 PC画面上でほかのウィンドウよりも手前にダイアログボックスがポップアップ表示されます。   さらに、[OK]を押すとダイアログボックスが消え、ブラウザに「true」と表示されました。   ちなみに、[キャンセル]を押すと「false」と表示されます。 まとめ JavaScriptで確認ダイアログを表示するにはconfirmメソッドを使います。   [PR] フロントエンドで副業する学習方法を動画で公開中確認ダイアログ内のテキストを改行する 確認ダイアログに表示するテキストを改行するにはエスケープシーケンス「n」を使います。 たとえば 「confirm(‘こんにちは、n山田さん’);」とすると、「こんにちは、」で改行されて、その下の行に「山田さん」が続きます。 エスケープシーケンスでの改行は確認ダイアログを表示するconfirmメソッドはもちろん、アラートを表示するalertでも使えます。 エスケープシーケンスとは？ エスケープシーケンス（エスケープ文字）とは、改行のような特殊な文字を表現する方法です。 エスケープシーケンスは「」（バックスラッシュ。機種によっては¥記号で表示）と特定の文字を組み合わせて特殊な意味を持たせます。 以下の表はエスケープシーケンスの例です。 エスケープシーケンス 意味 n 改行 ‘ シングルクォーテーション “ ダブルクォーテーション t タブ バックスラッシュ（または¥）を表示 ※Windowsなど機種によってはエスケープシーケンスを「」ではなく「¥」記号で表現します。バックスラッシュの入力方法について詳しくは解説記事にある「バックスラッシュの入力方法について」の見出しをご覧ください。 ソースコード [件名]ボックスが未入力の状態で[確認]ボタンを押すと「以下の項目が未入力です。」で改行されて「件名：」がアラートで表示されます。 [件名]ボックスに文字が入力されている状態で[確認]ボタンを押すと「以下の件名にしますか？」で改行されて入力された内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>confirmを使った改行 |
JavaScript

JavaScriptのconfirmメソッドで作成するダイアログの位置を変更する方法を現役エンジニアが解説【初心者向け】

JavaScriptのconfirmメソッドで作成するダイアログの位置を変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのconfirmメソッドで作成するダイアログの位置を変更する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 confirmメソッドとは confirmメソッドによるダイアログ作成方法 ダイアログの位置を変更する方法 まとめ   confirmメソッドとは ユーザーに何かの確認を求める場合に使うダイアログを表示するメソッドです。OKとキャンセルの2つのボタンをもつ確認ダイアログが表示されます。 下記の画像はChromeブラウザのダイアログ表示の例です。 引数は、ダイアログに表示するメッセージを渡します。 戻り値は、trueかfalseの真偽値となっていて、ダイアログのOKが押された場合はtrue、キャンセルが押された場合はfalseになります。   [PR] フロントエンドで副業する学習方法を動画で公開中confirmメソッドによるダイアログ作成方法 記述の省略可能なwindowオブジェクトのメソッドなので、下記のようにそのままconfirmメソッドを呼び出すことでダイアログが表示されます。 引数のメッセージはユーザーへのメッセージに変更してください。 confirm('このメッセージが表示されます'); ダイアログでOKかキャンセルのどちらがおされたかによって動作を分ける例を紹介します。 リンクのaタグにonclickを使い、confirmメソッドを呼び出します。これによりダイアログのOKを押すとリンク先に移動し、キャンセルを押すと移動せずにダイアログを閉じます。 <a href="https://junior.techacademy.jp/" onclick="return confirm('移動しますか')">テックアカデミージュニア</a>   ダイアログの位置を変更する方法 confirmメソッドで表示されるダイアログはブラウザが用意する部品になるので、位置や装飾などの変更ができません。 ダイアログをカスタマイズする場合は、ダイアログを自作する必要があります。 ダイアログを自作するには、配布されているダイアログのモジュール（部品）を使う方法もありますが、HTMLのdialog要素でも簡単に実現できます。 dialog要素を使ってダイアログの表示位置を変更する例を紹介します。 まずはHTMLでダイアログのような見た目を作って、dialog要素で囲います。 <dialog id='dialog'> <div>自作ダイアログです</div> <div> <button id='closebutton'>閉じる</button> </div> </dialog> <button id='openButton'>ダイアログを開く</button> 次にCSSで表示位置を指定します。 #dialog{ position:fixed; left: -400px; } 最後にJavaScriptでダイアログの表示制御処理を記述します。 let dialog = document.getElementById('dialog'); let openButton = document.getElementById('openButton'); let closebutton = document.getElementById('closebutton'); openButton.onclick = () => { dialog.showModal(); } closebutton.onclick = () => { dialog.close(); } これで左に400pxずれたダイアログが表示されます。CSSの記述を増やすことで、レイアウトも自由に変更できます。 JavaScriptの処理はダイアログの扱いを簡単に把握するため閉じるボタンのみにしていますが、OKとキャンセルなどいくらでもHTMLで増やして対応する処理を記述することで好きな処理を作成できます。   まとめ confirmメソッドと独自ダイアログの作成方法を紹介しました。 ユーザーに単純な確認をとるだけならばconfirmメソッドを使い、デザインまたは動作などをカスタマイズしたい場合はdialog要素でダイアログを作成するように使い分けてください。   筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptのalertダイアログとconfirmダイアログについて現役エンジニアが解説【初心者向け】

JavaScriptのalertダイアログとconfirmダイアログについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 alertダイアログとconfirmダイアログについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 alertダイアログとは confirmダイアログとは alertダイアログとconfirmダイアログの比較 実際に書いてみよう まとめ   alertダイアログとは alert ダイアログとは小さなウィンドウで警告を表示する機能です。メッセージとOKボタンで構成されます。 alert ダイアログについて、詳しくは以下の記事も参考にしてください。 MDN – window.alert   [PR] フロントエンドで副業する学習方法を動画で公開中confirmダイアログとは confirm ダイアログはメッセージとOKボタン、キャンセルボタンで構成されるダイアログです。 confirm ダイアログについて、詳しくは以下の記事も参考にしてください。 MDN – window.confirm   alertダイアログとconfirmダイアログの比較 alert ダイアログはユーザーが選択不要な警告を表示する場合に使用されます。それに対して confirm ダイアログはユーザーの選択が必要な場合に使用します。なお、両方ともダイアログでのボタン操作を行わないと処理が先に進みません。場合によっては操作性を阻害することになるので、利用は必要な場合に留めるようにしましょう。   実際に書いてみよう 今回のサンプルプログラムでは alert ダイアログと confirm ダイアログの使い方について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <input type="text" id="myname"><br> <input type="button" id="button1" value="入力完了" onclick="func1()"> <div id="mydiv"></div> <script language="javascript" type="text/javascript"> const myname = document.getElementById('myname'); const button1 = document.getElementById('button1');
JavaScript

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

JavaScriptによる削除する前に確認メッセージ（confirmdelete）を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 削除する前に確認メッセージ（confirmdelete）を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 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講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptのalertダイアログにアイコンを表示させる方法を現役エンジニアが解説【初心者向け】

JavaScriptのalertダイアログにアイコンを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次はじめにconfirmダイアログの使い方confirmダイアログのメッセージを改行する方法まとめJavaScriptを学習中の方へ そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのalertダイアログにアイコンを表示させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに ダイアログにアイコンなどの任意の要素を表示させる方法を説明します。 標準のダイアログでは、以下のようにメッセージとボタンしか表示されません。 こちらにアイコンなどの要素を表示することで、「エラー」「警告」「確認」などメッセージ以外でも視覚的にわかりやすくなるというメリットがあります。 今回は、このダイアログを個別に作成して実装する方法を説明します。 ぜひこの機会に、カスタマイズしたダイアログを実装できるようにしましょう。   alertダイアログとは ユーザーに確認をうながす機能のことです。 ブラウザによって見た目に多少差がありますが、JavaScriptでは以下のようにブラウザにメッセージを表示できます。   ・alert：メッセージとOKボタンが表示されます。 alert("メッセージ１rnメッセージ２");   ・confirm：メッセージとOKボタン、キャンセルボタンが表示されます。 confirm("メッセージ１rnメッセージ２");   いずれもメッセージ内で改行したい場合は改行コード(rn)を挿入することで、改行を行うことができます。   [PR] フロントエンドで副業する学習方法を動画で公開中alertダイアログにアイコンを表示させる方法 ダイアログの表示はブラウザが用意する部品ですので、アイコンの表示や見た目の装飾はできません。 そこでアイコンや独自の装飾を行いたい場合は、独自でダイアログを作成します。 独自にダイアログを作成することで、アイコンの表示やボタンを増やしたり装飾できるようになります。 表示させる方法は以下の通り、dialogタグに囲まれたHTMLをJavaScriptで取得してshowModalという関数を呼び出すだけで表示できます。 <dialog id="任意のID"> <!-- 任意のHTML要素 --> </dialog> let dialogObj = document.getElementById("dialogタグの要素ID"); dialogObj.showModal();   実際に書いてみよう それでは実際に、「確認」の3種類のカスタムダイアログを作成してみましょう。 アイコンはMITライセンスで提供されている以下のサイトのCSSを使って表示します。 css.gg <!-- cssアイコンstyleシート読み込み --> <link href='https://css.gg/bulb.css' rel='stylesheet'> <dialog id='dialog' style="width:400px;"> <div> <i class="gg-bulb" style="float:left;"></i>：確認ダイアログ </div> <div id='modalMessage'> </div> <div>
JavaScript

JavaScriptのconfirmダイアログでOKが選択された時のみ処理を実行する方法を現役エンジニアが解説【初心者向け】

JavaScriptのconfirmダイアログでOKが選択された時のみ処理を実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのconfirmダイアログでOKが選択された時のみ処理を実行する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 confirmダイアログとは OKが選択された時のみ処理を実行する方法 実際に書いてみよう まとめ   confirmダイアログとは confirmダイアログはメッセージとOKボタン、キャンセルボタンで構成されるダイアログです。 confirm ダイアログを表示するには以下のように記述します。 window.confirm(メッセージ) OKが選択された場合 true が、キャンセルが選択された場合falseが戻り値として返されます。 confirmダイアログについて、詳しくは以下の記事も参考にしてください。 MDN – window.confirm   [PR] フロントエンドで副業する学習方法を動画で公開中OKが選択された時のみ処理を実行する方法 confirmダイアログで OKが選択された時のみ処理を実行するには戻り値を利用します。 if (window.confirm(メッセージ)) { // OKが選択された時の処理 }   実際に書いてみよう 今回のサンプルプログラムではconfirmダイアログでOKが選択された時に処理を実行する方法について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> Name:<input type="text" id="name"><br> Mail:<input type="text" id="mail"><br> <input type="button" id="button1" value="送信" onclick="func1()"> <div id="div1"></div> <script language="javascript" type="text/javascript"> const name = document.getElementById('name'); const mail = document.getElementById('mail'); const button1 = document.getElementById('button1');
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでconfirmダイアログの文章を改行する方法を現役エンジニアが解説【初心者向け】