現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

Dialog(ダイアログ表示)

【JavaScript入門】alertの使い方|基本動作・改行方法・onclickとの組み合わせを初心者向けに解説

投稿日:2019年4月21日 更新日:

この記事で分かること

  • alert() の基本動作
  • 警告ダイアログの表示方法
  • 改行(\n)を使ったメッセージ整形
  • リンクやボタンの onclick と組み合わせる方法
  • 初心者がつまずきやすいポイント

alert() は、JavaScript で最も基本的なダイアログ表示メソッドです。
メッセージをポップアップ表示し、ユーザーに注意を促したり、確認前の案内を行う際に利用されます。



alert() とは?

alert() は、[OK] ボタンだけを持つ警告ダイアログを表示するメソッドです。


alert("メッセージ");
  • ユーザーが OK を押すまで次の処理へ進まない(ブロッキング)
  • ダイアログが表示されている間、ブラウザ操作はできない
  • リンクやボタンの onclick と組み合わせて使える

基本的な使用例


alert("未入力の項目があります");

→ 「未入力の項目があります」という警告ダイアログが表示されます。



リンククリック時に alert を表示する


<a href="http://books.ank.co.jp/" onclick="alert('書籍サイトに移動します。')">
  書籍サイトへ
</a>

→ リンクをクリックすると「書籍サイトに移動します。」と表示されます。

alert の改行方法

ダイアログ内で改行したい場合は、\n(バックスラッシュ + n) を使います。


"1行目の文字列\n2行目の文字列\n3行目"

複数の文字列を連結しても OK です。


"1行目\n" + "2行目と\n" + "3行目"

→ ダイアログ内で3行に分かれて表示されます。

JavaScript 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

  • alert()confirm()prompt() などの基本ダイアログを体系的に理解したい
  • ユーザー操作に応じた処理(onclick など)を基礎から学びたい
  • ネット記事だけだと情報が断片的に感じる

alert() のような警告ダイアログは、
JavaScript の 基本文法・イベント処理・ブラウザ標準UI の理解が欠かせません。
書籍ではこれらを順序立てて学べるため、メッセージ表示や入力確認の仕組みを深く理解できます。

いちばんやさしい JavaScript の教本

図解が多く、JavaScript の基本動作やブラウザの仕組みを視覚的に理解できる入門書です。
alert() / confirm() / prompt()
「標準ダイアログの役割」や「イベントとの組み合わせ」も丁寧に学べます。

この本で解決できること:

  • alert() の基本動作と使いどころが理解できる
  • onclick と組み合わせた実用的な書き方が身につく
  • 実際に動くサンプルでダイアログ処理の理解が深まる

確かな力が身につく JavaScript「超」入門

イベント処理・UI 操作・ブラウザ動作など、より実践的な JavaScript を学びたい方に最適な入門書です。
alert() を使った警告表示や、ユーザー操作に応じた処理分岐も理解できます。

この本で解決できること:

  • alert() / confirm() / prompt() の使い分けが体系的に学べる
  • onclick を使った実務的な UI 処理が書けるようになる
  • 現代的な JavaScript の書き方が身につく

動画で理解を深めたい方へ(Udemy講座)

alert() のようなダイアログ表示は、
実際の動作を画面で見ながら学ぶと理解が一気に深まります。
動画では「OK を押すまで処理が止まる」「onclick で表示される」などがそのまま確認でき、
初心者でも直感的に理解できます。

初心者のためのJavaScript 完全入門

基本文法・イベント処理・ブラウザの動作など、alert() の理解に必要な基礎を体系的に学べる人気講座です。

この講座で解決できること:

  • alert() の動作を視覚的に理解できる
  • onclick と組み合わせた実用的な書き方が身につく
  • 初心者がつまずきやすい UI 操作の概念を丁寧に解説

初心者のためのJavaScript 完全入門(Udemy)

超JavaScript 完全ガイド 2026

UI 操作・イベント制御・ブラウザ動作など、実務で必要な JavaScript を深く理解したい方に最適な講座です。

この講座で解決できること:

  • alert() を使った実践的な警告表示が身につく
  • ユーザー操作に応じた分岐処理の考え方を習得できる
  • 現代的な JavaScript の書き方をまとめて習得

超JavaScript 完全ガイド 2026(Udemy)

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • alert()confirm()prompt() の違いが曖昧なままになる
  • onclick を使った UI 処理が断片的になりやすい
  • ユーザー操作に応じた分岐処理でつまずいても相談できない
  • 学習の順番に自信が持てない

スクールでは、プロの講師が学習ロードマップを作成し、
alert() を含むダイアログ処理や
JavaScript の基礎を体系的に理解できるようサポートしてくれます。

無料相談で得られるメリット

  • あなたのレベルに合わせた学習計画を作成
  • alert()・イベント処理・UI 操作の理解を深めるアドバイスがもらえる
  • 効率的な学習方法をプロが提案
  • エンジニア転職を視野に入れたキャリア相談も可能

JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。

DMM WEBCAMP 学習コース(無料相談はこちら)



alert() に関するよくある質問(FAQ)

Q1

alert() は何ができる?

A

メッセージを表示し、ユーザーに OK を押してもらうための警告ダイアログを表示できます。

Q2

改行するにはどうすればいい?

A

\n を使うことで alert ダイアログ内で改行できます。

Q3

リンクやボタンと組み合わせて使える?

A

onclickalert() を書くことで、クリック時にメッセージを表示できます。

Q4

スマホで alert が表示されないことはある?

A

一部ブラウザではブロックされる場合があります。必要に応じてモーダルUIの利用を検討してください。



まとめ

  • alert() は OK ボタンだけの警告ダイアログを表示する
  • ユーザーが閉じるまで次の処理へ進まない(ブロッキング)
  • リンクやボタンの onclick と組み合わせて使える
  • 改行は \n を使う



関連記事

【JavaScript入門】ダイアログと非同期処理(async/await)の組み合わせ方|confirm後にAPIを実行する方法を初心者向けに解説

この記事で分かること alert・confirm・prompt と非同期処理の関係 confirm で確認後に async / await を使う方法 API実行とダイアログの実践パターン 初心者がつ …

【JavaScript入門】confirmの使い方|OK・キャンセルの戻り値と実例を初心者向けに解説

この記事で分かること confirm() の基本動作 OK / キャンセルの戻り値(true / false) ページ遷移・削除確認などの実用例 alert()・prompt() との違い 初心者がつ …

【JavaScript入門】alert・confirm・promptの歴史と仕様|なぜ非推奨になりつつあるのかを初心者向けに解説

この記事で分かること alert・confirm・prompt の歴史と誕生背景 これらのダイアログが非推奨になりつつある理由 ブラウザ仕様の変化と制限 代替となるモーダル・カスタムダイアログの考え方 …

【JavaScript入門】prompt()の使い方を初心者向けに解説|入力ダイアログの基本と実用例

この記事で分かること prompt() の基本的な意味 入力ダイアログの構文と戻り値(OK / キャンセル) 名前入力・パスワード入力などの実用例 alert()・confirm() との違い スマホ …

【JavaScript入門】ダイアログの実務での使いどころまとめ|alert・confirm・promptの活用パターンを初心者向けに解説

この記事で分かること alert・confirm・prompt の実務での使いどころ 削除確認・エラー通知などの実践パターン 初心者がやりがちなNGパターン 実務でダイアログを使う際の注意点 Java …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-Dialog(ダイアログ表示)

執筆者: