}); サイトを利用している時に、エラーが起きたことなどを知らせるメッセージボックスが表示された経験をもつ方も多いと思います。JavaScriptではそのようなメッセージボックスを表示するためにalert(アラート)と呼ばれる仕組みが存在します。, そんな疑問を解消していきましょう！今回は、JavaScriptのアラートについて解説していきます。この記事は、下記の流れで解説を進めていきます。, alertの使い方について正しく理解し、必要な場面で使いこなすことができるようになっちゃいましょう！, アラートとは、任意のテキストメッセージをポップアップで画面に表示することです。例えば、次のようなポップアップを見たことがある人もいるのではないでしょうか？, ポップアップは、ユーザーへ何らかの注意喚起であったり確認を求めるような目的で使われることが多いです。特殊な使い方としては、簡易的なプログラムのデバッグに利用されることもあります。, alert()メソッドとは、先ほど解説したアラートを出すメソッドです。ここからは、実際にalert()メソッドを使ったプログラミング手法を詳しく見ていきましょう！, まず、alert()の基本的な構文を学習して書き方を覚えましょう！と、言っても実はすごく簡単で以下のような記述が一般的です。, このように引数へ値を指定するだけで、任意の値をポップアップ表示させることができます。この値は、文字列や数値などさまざまな値を指定することが可能です。, まずは一番基本、文字列を出力してポップアップ表示させてみましょう！先ほどの構文に当てはめると、次のように記述することで表示できます。, alert()の引数へポップアップ表示させたい文字列を指定すればいいですね。数値を表示させたい場合もまったく同じ手順で実行できます。, 注意点として、文字列の場合は「"」か「'」で、値を囲む必要があるという点だけ忘れないようにしましょう！, alertには変数を使用することもできます。こちらは具体的なサンプルをみて頂ければ分かりやすいかと思います。, 上記を開発者ツールのコンソールに打ち込むと変数warnに設定した文字列がアラートとして表示されていることが確認できるかと思います。このようにして、変数を用いてアラート表示することも可能です。, alert()メソッドを使っていると、ついついカスタマイズをしたくなるのではないでしょうか？よくある質問として以下のようなものがあります。, 結論から申しますと、これらのカスタマイズはすべて出来ません！なぜなら、alert()メソッドはあくまでも特定の値（メッセージ）をユーザーに確認してもらう用途に特化しているからです。, もし、それでも自由にカスタマイズしたい！と考えるならばHTML、CSS、JavaScriptで独自にダイアログを作成する必要があります。このような独自のカスタマイズ方法については、次の記事でゼロから作る方法を詳しく解説しているのでぜひ参考にしてみてください！, alert()の出し方や特性がわかったところで、文字や数値など色々な中身を入れていきましょう！, alert()の引数は計算式を挿入することで、自動的に計算された結果を表示する機能があります。次の例を見てください。, このように、一般的な計算式を引数に指定するだけで計算結果が表示されます。また、計算結果に小数点が含まれる場合も問題なく表示されます！, 意図的に計算結果をユーザーに見せたい場合には、alert()は効果的な方法と言えるでしょう。, 次に、文字列を連結して表示する方法を見ていきましょう！単純な文字列を連結する場合は次のようになります。, 文字列同士を「+」で繋げていくだけで実現できますね。また、変数や数値などを混在させることも可能です！次の例を見てください。, この例では、数値や文字列を変数に格納しています。それぞれの変数をalert()の引数に当てはめることで、上記のような結果になるわけです！実際のプログラミングにおいても、変数や文字列の連結はよく使う手法なので慣れておくようにしておきましょう。, JavaScriptの文字列の連結については、さまざまな活用事例を下記の記事に詳しくまとめています。こちらもぜひ参考にしてみてください！, 先ほどの例では１行で表示していましたが、実際には複数行にわたって内容を記述したいことがあると思います。その場合は、改行を入れる箇所に「n」を追加することで思い通りの改行を入れることが可能です。, 上記のサンプルもぜひ、お手元の環境で実際に動きを確認してみてください。ダイアログで改行する方法については下記の記事でも詳しく解説しているので、ぜひ確認してください。, 今度は、配列やオブジェクトの値をalert()で出力する方法について見ていきましょう！基本的にはこれまで学んだ内容と同じですが、配列やオブジェクトは複数のデータを保持しているのでループ処理の中でalert()を実行するのが良いでしょう。, この例では、配列をforEach()でループ処理させているのが分かりますね。このループの中であれば、配列の値を取得しやすいのでalert()にそのまま変数を設定すれば出力することができます。, 同じように、オブジェクトも例えばfor-in文などを使って出力することができます。, for-in文のループ処理では、オブジェクトのプロパティ名を取得できるのでそれを利用して値を取得することができるわけです。, これまではalert()を直接実行していましたが、実際には何らかのアクションによって実行することが多いです。例えば、ボタン要素やリンクをユーザーがクリックした時に表示させるのが一般的でしょう。, クリックされた時にアラートを出す場合、属性にonclickを付与してJavaScriptの関数を実行する際にalert()を実行するようにします。次の例を見てください。, 今回の場合「clickEvent()」という関数を作成し、alert()を実行するようにしています。HTML側では、button要素にonclick属性を付与してJavaScriptの関数を指定し、クリック時に関数が動く仕様です。, そのため、ボタンをクリックするとポップアップでalertが表示されるわけです。また、リンク要素の場合も同じ考え方で作ることが出来ます！, 先ほどと同じで、a要素にonclick属性を付与して関数を指定するだけです。JavaScriptの関数は先ほどとまったく同じですね。応用次第では、フォーム要素の送信ボタンにonclickで関数を指定してalertを確認メッセージにすることも可能ですよ。, クリックだけでなく、マウスオーバーした時にアラートを出すという仕様にすることも可能です。先ほど使ったonclick属性の代わりに、onMouseOver属性を使います。, クリックと同じようにメソッドを作成し、HTMLに属性を付与するだけです。ゲームなどを作る時にちょっと使えそうなテクニックですね。, alert()の具体的な使用例として、デバッグに使用するというものがあります。デバッグとは、プログラムが正しく動作しているか？または原因不明のエラーを分析・解消するための行為のことです。, なぜalert()でデバッグをするのか、どのように行なうのかを解説していきましょう。, まずは、alert()メソッドを使ったデバッグの特徴を確認しておきましょう。一般的にデバッグでよく使われるのはconsole.log()という、ブラウザの開発者ツールにあるコンソールログを活用する方法です。, console.log()を使えば大抵のケースに対応できるわけですが、初学者の場合はalert()でデバッグをするのをおすすめします。なぜなら、alert()が実行されると、その時点で処理が一時停止されるからです。, alert()は実行されるとポップアップが表示されてプログラムがストップしますよね？高速に処理が行われるプログラムを途中で止めることで、今の状態を確認することができる簡単な方法として利用できるわけです。, それでは、実際にalert()を使ったデバッグをやってみましょう！例えば、for文を使って繰り返し計算処理をした場合に、その中身がどのように変化しているのかを確認してみましょう。次の例を見てください。, この例では、for文を使って簡単なループ処理を記述しています。for文の初期値「i」に2を掛けて偶数を作り、その値を「num」に代入していますよね。そのすぐあとにalert()を記述することで、1回の繰り返し処理の「num」の中身をalert()で確認することが出来るわけです。, ただし、これはあくまで学習用なので、大きなループ処理で利用すると毎回ポップアップが表示されるので注意が必要です。そのような場合は、console.log()を使う方が効果的でしょう。console.log()についてもっと知りたい方は、下記の記事も併せて読んでみてください。, ここからは、alert()の類似メソッドについても触れておきましょう！alert()はユーザーに確認を求めるだけでしたが、ユーザーからの「Yes」「No」による返答で条件分岐したりするメソッドもあります。, 一般的には、confirm()やprompt()メソッドがよく使われるのでそれぞれの詳しい使い方を見ていきましょう！, まずは、confirm()メソッドの使い方から学習をしていきましょう。confirm()はalert()と違って、「OK（Yes）」「キャンセル（No）」ボタンが表示されるメソッドです。, OKボタンをクリックするとtrue、キャンセルボタンをクリックするとfalseが返り値として取得できます。この仕組みを利用すれば、次のような条件分岐が記述できます！, この例では、confirm()によって取得した返り値を変数「result」に代入してますよね？これをIF文の条件式に応用することで、ユーザーの「Yes」「No」による反応を受け取って処理を分岐できるというわけです。, confirmの詳しい使い方は下記の記事で解説しているので、ぜひ確認してください。, 次に、prompt()メソッドを使った手法を見ていきましょう！prompt()は文字列を入力してもらうことができるメソッドです。, OKボタンをクリックすると入力された文字列が取得でき、キャンセルボタンをクリックするとnullが取得できます。この仕組みを利用すれば、次のような条件分岐が実現できます！, この例では、ユーザーが入力した文字列を条件式に応用し、指定の文字列と合致するかどうかで処理を分岐しています。さらに、何も入力されていない「空文字」の場合と「キャンセルボタン」がクリックされた場合の処理を書くこともできます。, この例では、prompt()によって取得した返り値を変数「result」に代入しているのがわかりますね。このように、prompt()メソッドの場合もユーザーからの反応を活用した分岐処理が書きやすいのです。活用の幅が広がりそうですね。, promptの詳しい使い方は下記の記事で解説しているので、ぜひ併せて確認してみてください。, 最後に、alert()の基本的な使い方についてまとめておきます！まず、基本的な使い方として任意のテキストを出力するには次のように記述します。, これで実行すると、画面にポップアップでアラートのメッセージが出力されます。alert()の引数には変数も利用できます。, この例では、文字列が格納された変数「warn」をalert()の引数に設定していますね。また、他にも数値、計算式、改行コードなども含めることが可能です！, alert()のポップアップダイアログはカスタマイズできませんが、類似メソッドを利用することでより高度な使い方もできます。, 例えば、「Yes / No」で条件分岐することができるconfirm()や、ユーザーに任意のテキストを入力してもらうことで条件分岐可能なprompt()などがあります。, しかし、どのような場面で使用するかはきちんと設計する必要があります。あまりに多くの箇所で設定すると、ユーザ側でポップアップの処理が手間になり不便と感じてしまう恐れもあるからです。, そのため、初学者の方はそのことを頭に入れて設計することをオススメします。ぜひアラートを活用して、楽しいJavaScript生活を送ってください！, 当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

Cowboys Fullback 2018, Deep Into The Weeds Meaning, Ser Conjugation Preterite, How To Save File In Folder Using Javascript, Disadvantages Of Friction, Panama City Resorts Panama, Broken Pieces Cast Ozan, Cvent Supplier Network, C Programming Practice Online, Dragon Curve Formula, Bizbash Contact, Klaus Augenthaler Goal, When To Take Meter Readings, World's Strongest Man Competitors, Fables Vol 1 Legends In Exile, Batman Telltale Joker Vigilante, Seawolf Submarine Model, Batman Telltale Plan Of Attack, Radical Chic платки, Kazakhstan Embassy London Website, Portafolio De Productos En Inglés, Reece Oxford Fifa 19, Manorhaven Beach Park Fees, Amy Jacobson Sons, 3-shelf Wood Bookcase, Definir Cortejar, C Programming Examples With Output, Argentina Weather Long Range, Event Object Represents State Of An Event, Mattress Recycling North Vancouver, Pasar Conjugation, Aisnsw Learning From Home, English Orthography, Ms Dhoni On 2019 World Cup, Motorola Droid Turbo 3, Signature Spellbook Nissa, Tcf Bank Stadium Expansion, Dawes Galaxy Vs Super Galaxy, Fur Seal Habitat, Zanesville Police Auction, Prepaid Phones Canada, Bogota Nj Police, Provincia Di Rovigo, The Ethical Journalist: Making Responsible Decisions In The Digital Age 2nd Edition, Time Span In A Sentence, Bosnia Religion, Phantasmagoria 2 Walkthrough, How To Organize Group Travel For Profit, Sasha 3, Villavicencio Población, Cape Fear Heroes 2019 Schedule, Gosford Park Netflix, Far From The Tree, Responsive Web Design With Html5 And Css3 Book, Alaska Cod Season, Tribest Sousvant Review, Edf Nuclear Closures, What Is A Lun, Remote Backup Software, Professional Wine Tasting, Mailchimp Templates, Tgi Fridays Brownie Dessert, Radeon Rx 5700 Vs Rtx 2070, Luxury Hen Party Houses With Hot Tub, Minimum Wage In Azerbaijan 2019, Is Real Estate Photography Profitable, Conference Venues Nyc, Martin Hughes Toscafund Linkedin, Typescript Eventemitter Define Events, Environmental Defense Fund Salaries, Fratelli Pizzeria Sentosa Menu, Buddhist Temple Uk, Davida Williams Greene Espel,