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

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

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入門】alert・confirm・promptの違いを初心者向けに解説|使い分け・戻り値・注意点

この記事で分かること alert・confirm・prompt の役割と違い それぞれの戻り値と使いどころ 初心者がつまずきやすい注意点 実務での適切な使い分け方 alert・confirm・prom …

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

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

【JavaScript入門】削除確認ダイアログの作り方|confirmの基本からカスタムUIまで初心者向けに解説

この記事で分かること confirm を使った削除確認ダイアログの基本 削除処理と組み合わせる実践的な書き方 実務で使われるカスタム削除ダイアログの考え方 初心者がつまずきやすい注意点 JavaScr …

【JavaScript入門】alert・confirm・promptが嫌われる理由|UI/UXの観点からの注意点と代替案を初心者向けに解説

この記事で分かること alert・confirm・prompt が嫌われる理由 UI/UXの観点での問題点 実務で避けられるケースと注意点 代替となるUI(モーダル・トースト通知)の考え方 alert …

【JavaScript入門】alertを使わずに通知を表示する方法|モーダル・トースト・カスタムダイアログを初心者向けに解説

この記事で分かること alert を使わずに通知を表示する方法 モーダル・トースト通知・カスタムダイアログの特徴 実務で alert が避けられる理由 初心者でも実装できる簡単な代替UI JavaSc …

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

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

-Dialog(ダイアログ表示)

執筆者: