.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptでのalertの基本的な使い方6つ|類似のメソッドとは?

JavaScriptでのalertの基本的な使い方6つ|類似のメソッドとは?

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
JavaScriptでのalertの基本的な使い方6つ|類似のメソッドとは?
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    システム
    エンジニア
    JavaScriptのalertとはそのようなものなのでしょうか。
    プロジェクト
    マネージャー
    JavaScriptのalertとは、「OK」ボタン付きのダイアログを表示するためのメソッドです。

    JavaScriptのalertとは?


    JavaScriptのalertとは、「OK」ボタン付きのダイアログを表示するためのメソッドです。alertメソッドを使用すると、Webブラウザ上で、ユーザーに対するメッセージを表示することができます。

    alertのメリット

    手軽に利用できることです。
    JavaScriptというフロントエンドの言語なので、phpやc#に関係なく記述することができます。

    JavaScriptはブラウザ標準で装備されているものなので、スマホ(ios、android)にも対応しています。
    そのため、アラートを使っての簡易な内容検証の確認や、画面サンプルとしてメッセージの内容を確認させたいときに使うとよいでしょう。

    また、最近は見た目もjQueryのSweetAlertというjQueryプラグインがあるので、それを使って外見をカスタマイズすることができます。

    JavaScriptにおけるalertの基本的な使い方6つ

    JavaScriptのalertメソッドを使ってダイアログを出すには、以下のように記述します。

    alert(ここに表示したいメッセージを入れる);

    このように記述すれば、JavaScriptが実行されたタイミングで、表示したいメッセージのダイアログを出すことができます。

    1:アラートを表示させる方法

    JavaScriptのalertを表示させる場合の方法は以下をscriptタグ内に記述します。

    正確には上記のように[window.alert]なのですが、JavaScriptでのwindowは省略可能ですので、
    こちらでも同様に動作します。

    2:自動的に計算された結果を表示する方法

    JavaScriptのalertでは引数に計算式を入れておくことで、自動的に計算された結果を表示する機能があります。

    このように、これを使うことでJavaScriptでの計算式を使った場合の結果確認をすることができます。

    3:文字列を連結して表示する方法

    JavaScriptのalertでは引数に文字列を連結した式を入れておくことで、自動的に文字連結された結果を表示する機能があります。

    このように、これを使うことでJavaScriptでの文字列結合を使った場合の結果確認をすることができます。

    4:複数行を含む文字列を出力する方法

    JavaScriptのalertでは引数に改行文字を入れることで複数行にわたって内容を表示する機能があります。
    改行文字は「\n」です。

    このように、改行文字\nを使うことでJavaScriptでのalertで複数行にわたる文字列を表示することができます。

    5:配列やオブジェクトの値をalertで出力する方法

    JavaScriptのalertでは文字列や変数を表示することができるのですが、配列やオブジェクトは特定の構造の中に1つずつデータを格納していることもあるため工夫が必要です。

    このように、配列の添字(0から開始するので注意!)で箇所を指定することで、JavaScriptの配列の中の情報を表示することができます。

    オブジェクトの場合も同様に

    添字にキーを指定することで、JavaScriptのオブジェクトの中の情報を表示することができます。

    6:alertを使ったデバッグのやり方

    JavaScriptのalertはそれを使ってデバッグを行うこともできます。

    このように、functionのパラメータにどのような値が受け渡されたのかをalertで確認することができます。
    他にもJavaScriptのプログラムの途中で想定していない動きになっているときに、alert()を差し込んで想定通りに動いているかどうかの確認をしながらプログラミングをすることが可能です。

    alertメソッドを使ってダイアログを出す方法6つ

    JavaScriptのalertメソッドを使ってダイアログを出すには、以下のように記述します。

    alert(ここに表示したいメッセージを入れる);

    このように記述すれば、JavaScriptが実行されたタイミングで、表示したいメッセージのダイアログを出すことができます。

    1:文字列をダイアログに表示する方法

    例として、「Hello World!」という文字列をダイアログに出力して表示してみます。この例では、HTML上のscriptタグ内にJavaScriptのコードを記載しています。

    上記の例では、HTMLページを開いたときに「Hello World!」というメッセージがダイアログに表示されます。文字列を表示したい場合は、対象文字列をシングルクォーテーションかダブルクォーテーションで囲むのを忘れないようにしてください。

    2:数値をダイアログに表示する方法

    alertメソッドのダイアログには、文字列以外にも数値や計算結果など様々な情報を表示することが可能です。例として、1+1の計算結果を表示したい場合は以下のようになります。

    上記のように記述すると、ダイアログには1+1の計算結果である「2」が表示されます。

    3:変数を使ってダイアログに表示する方法

    変数に代入した値をダイアログに出力することも可能です。以下の例では、「message」という変数に「Hello」という文字列を代入し、alertメソッドでダイアログに表示させています。

    4:現在時刻をダイアログに表示する方法

    現在時刻をalertメソッドでダイアログに表示する場合、まず以下のようにして現在の日時を取得する必要があります。

    上記で取得した現在の日時から、時、分の情報をそれぞれgetHoursメソッド、getMinutesメソッドにより抜き出してダイアログに表示します。実際に現在時刻が表示できるコードの例は以下のようになります。

    5:ボタンクリックでダイアログを表示する方法

    ボタンをクリックした際にダイアログを表示するには、buttonタグのonclick属性に指定した関数内で、alertメソッドを実行させます。

    上記の例のように記述すると、「ここをクリック」というボタンをクリックした際にalertメソッドが実行され、「クリックされました」というダイアログを表示することができます。

    6:マウスオーバーした時にダイアログを表示する方法

    alertメソッド使用時の注意点

    ダイアログを表示することができるJavaScriptのalertメソッドですが、このメソッドを使用する際には注意すべき点もあります。alertメソッドを正しく動作させるために、以下に記載の注意点についても理解しておく必要があります。

    選択肢は「OK」の1つのみ

    alertメソッドを使用して表示されるダイアログ上で、ユーザーが選択できるのは「OK」というボタンのみです。そのため、ユーザー側での応答に「OK」「キャンセル」のような選択肢が必要な場合や、ユーザーによる文字入力を促したい場合は、alertメソッドを使うことはできません。

    そういった場合には、alertの代わりにconfirmやpromptを使用します。各メソッドの詳細については後述します。

    ダイアログを消すまで他の操作ができなくなる

    alertメソッドで表示されるダイアログは、モーダルウィンドウです。つまり、ユーザーはダイアログ上での操作を完了するまで、Webサイトの他の部分を操作することができなくなります。

    ユーザーに対して優先的に通知したい内容を、alertメソッドによってダイアログに表示することは効果的な手段です。しかしながら、ユーザーの操作を制限することにもなるため、ダイアログ表示を多用するべきではありません。

    alertメソッドと似たメソッド

    alertメソッドで表示できるダイアログにおいて、ユーザーが選択できるのは「OK」のみでした。ここでは、「OK」と「キャンセル」の2択をユーザーに選ばせたり、ユーザーがテキストを入力できたりする、alertに類似するメソッドを紹介します。

    confirmメソッド

    ユーザーの応答として、「OK」と「キャンセル」の2択があるダイアログを出すには、JavaScriptのconfirmメソッドを使用します。confirmの場合も、alertの時と同様に任意のメッセージを表示することができます。

    また、confirmを使用した場合は、応答として「OK」(true)と「キャンセル」(false)のどちらが選択されたかを示す真偽値を取得することが可能です。

    confirmメソッドの使用方法

    confirmメソッドも、基本的な使い方はalertメソッドと同じです。以下のように記述すると、「よろしいですか?」というメッセージ付きのダイアログが表示され、ユーザーは「OK」もしくは「キャンセル」ボタンを選択することができます。

    上記の場合、ユーザーが「OK」と「キャンセル」のどちらを選択したかどうかは、変数resultに格納される真偽値によって判断します。

    promptメソッド

    JavaScriptのpromptメソッドを使用すると、ユーザーにテキスト入力を促すダイアログを表示できます。promptメソッドで表示されるダイアログには、confirmメソッドの時と同様に、「OK」ボタンと「キャンセル」ボタンが付いています。

    promptメソッドの場合、ダイアログに表示するメッセージの他に、必要に応じてテキスト入力フィールドに表示されるデフォルト値も指定することが可能です。

    promptメソッドの使用方法

    promptメソッドの場合、以下のように、メソッドの引数に表示したいメッセージと入力フィールドのデフォルト値を指定します。ただし、デフォルト値の指定は任意のため、不要な場合は記述しなくても構いません。

    上記のように記述すると、ユーザーが入力した文字列をresult変数で取得することができます。ユーザーがキャンセルボタンをクリックした場合は、結果としてnullが返却されます。

    システム
    エンジニア
    JavaScriptのalertメソッドについてよく理解できました。
    プロジェクト
    マネージャー
    alertの類似メソッドであるconfirmやpromptとの使い分けに注意して実践してみましょう。

    JavaScriptのalertの使い方を覚えよう

    以上、JavaScriptのalertを紹介しました。

    特にデバッグのときや、簡易なメッセージ表示などに役立ちます。ただし説明したとおりモーダルウィンドウであるがゆえに、利用者の操作感を損なう可能性もありますので、そのことを念頭に入れて使う箇所を考えながら設計をしたり、プログラミングしていきましょう。

    注意することはありますが、手軽にJavaScriptで情報を表示したりすることができる方法ですので、どんどんalertを使っていき有効活用しましょう。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job