JavaScript | コンピューター

JavaScriptでメールアドレスを検証する方法をわかりやすく解説

JavaScriptでメールアドレスの形式を検証するには、「@」と「.」(ドット) の位置関係をチェックするのが基本的な方法です。例えば「abc@gmail.com」のようなアドレスの場合、@が先頭以外に存在し、かつ@の後にドットが続いていることを確認します。基本的な検証方法：indexOf と lastIndexOf を使う文字列メソッドの indexOf() と lastIndexOf() を使えば、@とドットの位置を取得して簡単に検証できます。以下がそのサンプルコードです。サンプルコード <!DOCTYPE html> <html>

JavaScriptのアラートでハイパーリンクを表示する方法

JavaScriptのアラートでリンクは表示できる？結論から言うと、JavaScript標準の alert() メソッドによるアラートボックス内に、ハイパーリンクを表示することはできません。これは、alert() がプレーンテキストしか扱えず、HTMLタグやマークアップを解釈しないためです。そのため、URLを文字列として表示することは可能ですが、クリックできるリンクとして機能させることはできません。解決策：カスタムアラートボックスを使うアラート内にクリック可能なリンクを表示したい場合は、標準のアラートの代わりにカスタムアラートボックス（ダイアログ）を作成する必要があります。カスタムダイアログは

onsubmitイベントでJavaScript関数を呼び出す方法｜フォーム送信前のバリデーション実装

onsubmitイベントは、ユーザーがフォームを送信しようとしたタイミングで発生するイベントです。このイベントを活用することで、フォームデータをWebサーバーへ送信する前に、入力内容のチェック（バリデーション）を行うことができます。基本的な仕組み以下の例では、フォーム送信前にvalidate()関数を呼び出しています。動作の流れは次のとおりです。 validate()関数がtrueを返した場合 → フォームは送信される validate()関数がfalseを返した場合 → 送信処理がキャンセルされ、データはサーバーに送られない JavaScript側のコード <script>

onmouseoverイベントからJavaScript関数を呼び出す方法を解説

onmouseoverイベントは、マウスカーソルを要素の上に重ねた瞬間に発生します。このイベントを利用すると、ユーザーが特定の要素にマウスを乗せたタイミングで、任意のJavaScript関数を実行できます。 onmouseoverイベントの仕組み onmouseoverは、HTML要素の属性として直接記述する方法と、JavaScript側からイベントリスナーを登録する方法の2つで利用できます。また、マウスが要素から離れたときに発生するonmouseoutイベントと組み合わせることで、マウスオーバー時とマウスアウト時で異なる処理を実行することも可能です。サンプルコード以下の例では、div要素

onmouseoutイベントでJavaScript関数を呼び出す方法

onmouseoutイベントは、マウスカーソルがその要素の外へ移動した瞬間に発生します。このイベントを活用することで、マウスが要素から離れたタイミングで任意のJavaScript関数を実行できます。サンプルコード以下の例では、onmouseoverイベントとonmouseoutイベントを使い分けて、それぞれ異なるJavaScript関数を呼び出しています。onmouseoutイベントから関数を呼び出す仕組みを、実際に動かしながら確認してみましょう。ライブデモ <html> <head> <

JavaScriptのアラートボックスに改行を入れる方法

JavaScriptのアラートボックス（alert()）内で改行を表示したい場合は、エスケープシーケンスの「\n」を使用します。文字列の中に「\n」を挿入するだけで、その位置でテキストが改行されます。alert(Line One\n Line Two);サンプルコード以下のコードを実行すると、JavaScriptのアラートボックス内で改行が実際にどのように表示されるかを確認できます。ボタンをクリックすると、2行に分かれた警告メッセージがアラートとして表示されます。ライブデモ<html> <head> <

JavaScriptの「+function(){}」記法とは？即時実行関数（IIFE）の仕組みをわかりやすく解説

JavaScriptのコードを見ていると、関数の先頭に「+」（プラス記号）が付いていることがあります。例えば次のような書き方です。+function() { alert(Demo!); }();一見すると不思議なこの記法には、明確な目的があります。この記事では、「+function(){}」の意味と動作原理、そして類似の代替記法について詳しく解説します。「+function(){}」の役割：式として評価させる「+function(){}」という記法は、主にパーサー（構文解析器）に「+」の後に続くものを式（expression）として扱わせるために使われます。通常、行の先頭にfunctionキー

フォーム送信時にJavaScript関数を呼び出す方法｜onsubmitイベントの使い方

Webフォームを送信する際、入力内容のチェック（バリデーション）を行いたい場面は多くあります。そんなときに活躍するのが onsubmit イベントです。onsubmitイベントとは？onsubmit イベントは、ユーザーがフォームを送信しようとしたタイミングで発生します。このイベントを利用することで、フォームのデータがWebサーバーへ送信される前に、JavaScriptによる入力値の検証（バリデーション）を実行できます。基本的な仕組み以下の例では、フォームデータをWebサーバーへ送信する前に validate() 関数を呼び出しています。validate() 関数が true を返した場合 →

JavaScriptの「for...of」と「for...in」の違いを徹底解説！使い分けのポイントとは

JavaScriptにはオブジェクトや配列を反復処理するための構文として「for...in」と「for...of」の2種類があります。似たような名前ですが、それぞれ扱う対象と目的がまったく異なります。本記事では、両者の違いを構文と実行例とともにわかりやすく解説します。 for...inループとは「for...in」ループは、オブジェクトのプロパティ（キー）を順番に列挙するために使用されます。オブジェクトが持つすべての列挙可能なプロパティ名を取り出して処理できます。構文 for (変数名 in オブジェクト) { 実行するステートメントまたはブロック } 以下の例では、for...inル

JavaScriptのsuper()関数とは？親クラスのコンストラクタ呼び出しを徹底解説

super()関数とは JavaScriptのsuper()関数は、親クラス（スーパークラス）のコンストラクタを呼び出すために使用される機能です。また、superキーワードを利用することで、オブジェクトの親クラスが持つメソッドやプロパティにもアクセスできます。 extendsキーワードでクラスを継承した場合、子クラスのコンストラクタ内でthisを使用する前に必ずsuper()を呼び出す必要がある点に注意しましょう。これはJavaScriptにおける重要なルールです。 super()の主な用途子クラスのコンストラクタから親クラスのコンストラクタを呼び出す静的メソッド内で親クラスの静的メソ

JavaScriptでカスタムオブジェクトを作成する方法をわかりやすく解説

JavaScriptでは、new Object()を使うことで、自由にプロパティを追加できるカスタムオブジェクトを簡単に作成できます。オブジェクトを作成した後は、ドット記法（.）でプロパティにアクセスし、値を代入したり読み取ったりすることが可能です。カスタムオブジェクトの作成例以下のコードは、従業員情報を管理するカスタムオブジェクトを作成し、その内容を画面に表示するシンプルなサンプルです。サンプルコード<!DOCTYPE html> <html> <body> <p id="

JavaScriptのアラートボックス（alert）のタイトルは変更できる？カスタムモーダルで実現する方法

結論から言うと、セキュリティ上の制約により、JavaScriptの標準的なalert()メソッドで表示されるアラートボックスのタイトルを編集することはできません。なぜタイトルが変更できないのかブラウザ標準のアラートボックスは、悪意あるサイトがOSやブラウザ自体のダイアログに偽装してユーザーを騙すことを防ぐため、ブラウザ側で厳しく管理されています。そのため、タイトル部分には自動的にドメイン名や「このページから」といった情報が表示され、開発者が自由に書き換えることはできない仕組みになっています。解決策：カスタムモーダルダイアログを使うすべてのWebブラウザで一貫した見た目のアラートボックスを実現し

JavaScriptのonclickイベントとは？使い方と基本をわかりやすく解説

onclickイベントとは onclickイベントは、JavaScriptで最も頻繁に使用されるイベントの一つです。ユーザーがマウスの左ボタンをクリックした瞬間に発生し、ボタンやリンクなど、さまざまなHTML要素に対して設定できます。このイベントを活用することで、クリックされたタイミングで任意の処理を実行できます。例えば、フォームの入力値チェック（バリデーション）、警告メッセージの表示、メニューの開閉など、幅広い場面で利用されています。 onclickイベントの基本的な使い方最もシンプルな方法は、HTML要素の属性として直接onclick=関数名()と記述することです。以下は、ボタンがクリ

JavaScriptのcontinueステートメントはなぜ避けられるべき？理由と適切な使い方

continueステートメントが問題視される理由「continue」ステートメントの使用は、コードの可読性を低下させる要因になると言われています。多くの場合、continueを使うということは、ループの条件設定が不十分であることを意味します。つまり、「特定の条件のときだけ処理をスキップしたい」という意図が、本来ならループの条件式やif文で表現できるはずのものを、途中で飛ばす形で実装している状態です。これを避けるには、次のような方法が推奨されます。スキップしたい条件を、ループの条件式そのものに組み込むループ内でif文を使い、処理を明示的に分岐させるただし、continueが「悪い」

JavaScriptでブロックにラベルを付ける方法｜break文でループを自在に制御するテクニック

ブロック文（block statement）は、0個以上の文をひとまとめにグループ化するための基本的な構文です。JavaScript以外のプログラミング言語では、「複合文（compound statement）」という名称で知られています。ブロック文の基本構文ブロック文は、波括弧（中括弧）で文を囲むだけで簡単に作成できます。 { // 実行したい文のリスト } ブロックにラベルを付ける方法ブロックにラベルを付けたい場合は、識別子（任意のラベル名）とコロンをブロックの前に記述します。ラベル名: { &nb

JavaScriptのイベントハンドラとは？基本の仕組みと代表的なイベントの使い方

イベントとは何か JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作したときに発生する「イベント」を通じて行われます。たとえば、ページが読み込まれること自体が一つのイベントであり、ボタンがクリックされればそのクリックもイベントです。ほかにも、キーを押す、ウィンドウを閉じる、ウィンドウサイズを変更するなど、さまざまな操作がイベントとして検知されます。これらのイベントに対して実行したい処理（関数）を結びつける仕組みが「イベントハンドラ」です。ここからは、特によく使われる代表的なイベントタイプを、実際に動かせるサンプルコードとともに見ていきましょう。 onclick イ

JavaScript変数の有効期間とは？ローカル変数とグローバル変数の違いを解説

JavaScript変数の有効期間とは？JavaScriptにおける変数の有効期間（ライフタイム）は、変数が宣言された時点から始まります。var rank;このように宣言された変数は、宣言以降コード内で利用できるようになります。そして、変数の寿命は、それがローカル変数であるかグローバル変数であるかによって大きく異なります。ローカル変数の有効期間ローカル変数は、定義された関数の内部でのみ参照可能です。また、関数の引数（パラメータ）も常にその関数に固有のローカル変数として扱われます。関数の実行が完了すると、その関数内で宣言されたローカル変数は自動的に破棄されます。グローバル変数の有効期間グローバル

JavaScriptのDOMイベントとは？基本の使い方をサンプルコードで解説

JavaScriptでは、ユーザーがマウスをクリックしたとき、画像の読み込みが完了したとき、HTMLフォームが送信されたときなど、ページ上で何らかの出来事（イベント）が発生したタイミングでスクリプトを実行できます。イベントはDocument Object Model（DOM）Level 3の一部として定義されており、すべてのHTML要素には対応するイベントが用意されていて、それらをきっかけにJavaScriptコードを呼び出すことができます。イベントハンドラの基本例まずは最もシンプルな例として、イベントハンドラから関数を呼び出してテキストを書き換えるコードを見てみましょう。次のサンプルで

onClickイベントからJavaScript関数を呼び出す方法をわかりやすく解説

onClickイベントは、Web開発において最も頻繁に使用されるイベントの一つです。ユーザーがマウスの左ボタンをクリックした瞬間に発生し、フォーム送信前の入力値チェック（バリデーション）や警告メッセージの表示など、さまざまな処理を組み込むことができます。 onClickイベントの基本 HTML要素にonclick属性を設定し、そこに実行したいJavaScript関数名を指定するだけで、クリック時に関数を呼び出せます。ボタンやリンク、画像など、ほぼすべてのHTML要素に適用可能です。サンプルコード以下のコードでは、ボタンをクリックするとdisplay()関数が実行され、「Hello Worl

JavaScriptで確認ダイアログを表示する方法｜confirm()メソッドの使い方を解説

Webアプリケーションを開発していると、「本当に削除しますか？」のような、ユーザーに操作の可否を確認したい場面がよくあります。そんなときに便利なのが、JavaScriptのconfirm()メソッドです。 confirm()メソッドとは？ confirm()は、ブラウザ標準の確認ダイアログを表示するwindowオブジェクトのメソッドです。ダイアログには指定したメッセージとともに「OK」と「キャンセル」の2つのボタンが表示され、ユーザーの選択に応じて以下の値を返します。 OKボタンをクリックした場合 → true を返すキャンセルボタンをクリックした場合 → false を返すこの戻り値