JavaScript | コンピューター

JavaScriptの厳密モードと非厳密モードの違いとは？「use strict」の使い方を解説

JavaScriptの厳密モードと非厳密モードの違いJavaScriptにおける「use strict」は、文字リテラルとして記述されるディレクティブ（指令）です。JavaScript 1.8.5（ECMAScript 5）で導入されました。その名のとおり、「use strict」を宣言すると、コードが厳密モード（strict mode）で実行されます。一方、宣言しない場合は非厳密モード（通常モード）で実行され、一部のエラーが黙認されたり、緩い挙動が許容されたりします。厳密モードと非厳密モードの主な違い非厳密モードでは、宣言していない変数への代入が暗黙的にグローバル変数として扱われるなど、バグ

JavaScriptの入れ子関数（ネストした関数）とは？仕組みと実装例を解説

入れ子関数とはJavaScriptでは、関数定義を別の関数の中に入れ子（ネスト）にして記述することができます。これを「入れ子関数」と呼びます。内側の関数は外側の関数のスコープ内でのみ有効となり、外部から直接呼び出すことはできません。ただし、いくつかの制限があります。関数定義はループ処理や条件分岐（if文など）の中に記述することはできません。これらの制限は、function文による関数宣言に対してのみ適用される点に注意してください。サンプルコード以下のコードを実行すると、JavaScriptにおける入れ子関数の実装方法を確認できます。<html> <he

JavaScriptの関数から値を返す方法【return文の基本と実例】

JavaScriptの関数から値を返すには、return文を使用します。return文は、関数内で処理した結果を呼び出し元に渡すための基本的な仕組みであり、あらゆるプログラムで頻繁に使われる重要な構文です。ここでは、文字列と数値を連結して返すシンプルな例を通じて、return文の使い方を確認していきましょう。まずは、次のコードを実行してみてください。サンプルコード <html> <head> <script> func

JavaScript関数から文字列を返す方法【returnステートメントの使い方】

JavaScript関数から文字列を返す基本 JavaScriptの関数から文字列を返すには、returnステートメントを使用します。returnは、関数内で処理した結果を呼び出し元に渡すための重要な構文です。サンプルコード以下のコードでは、2つの引数（名前と科目）を受け取り、それらを連結した文字列を返す関数concatenate()を定義しています。実際にブラウザで動作を確認してみましょう。 <html> <head> <script> &

JavaScriptのonmouseupイベントとは？使い方とサンプルコードをわかりやすく解説

onmouseupイベントとはonmouseupイベントは、ユーザーがマウスボタンを押し、その後ボタンを離した（解放した）瞬間に発生するJavaScriptのイベントです。クリック操作の中でも「指を離す」タイミングを検出したい場合に利用されます。このイベントは、<p>や<div>など、ほとんどのHTML要素に対して設定できます。HTML属性として直接記述する方法のほか、addEventListener()を使って登録することも可能です。onmousedownとの違いonmousedown: マウスボタンを「押し込んだ」瞬間に発生onmouseup: マウスボタンを「離し

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

JavaScriptのonkeydownイベントは、ユーザーがキーボードのキーを押した瞬間に発生するイベントです。テキスト入力欄やフォームなどで、キー操作に応じた処理を実行したい場合に広く使われています。例えば、入力内容のリアルタイムチェックや、Enterキーが押されたときの送信処理、特定のショートカットキーの実装など、さまざまな場面で活用できます。 onkeydownイベントの使い方最もシンプルなのは、HTML要素の属性として直接指定する方法です。以下のコードを実行して、onkeydownイベントの動きを確認してみましょう。サンプルコード次の例では、テキストボックス内で何らかのキーが

JavaScriptのonkeypressイベントとは？基本的な使い方とサンプルコード

onkeypressイベントは、キーが押されてから離された（押して放した）タイミングで発生するイベントです。テキスト入力欄などでユーザーがキー操作を行った瞬間に処理を実行したい場合に利用されます。なお、onkeypressイベントは現在では非推奨（deprecated）とされており、より柔軟に制御できるkeydownイベントやkeyupイベントの使用が推奨されています。ただし、レガシーなコードや古いブラウザ向けの実装では今も登場するため、基本的な仕組みを理解しておくことは重要です。 onkeypressイベントの基本構文 HTML要素に対して直接属性として指定する方法が最もシンプルです。 &

JavaScriptのonsubmitイベントとは？フォーム送信時のバリデーション実装方法を解説

onsubmitイベントの基本onsubmitイベントは、ユーザーがフォームを送信（サブミット）しようとしたタイミングで発生するイベントです。このイベントを利用することで、フォームの入力内容をWebサーバーに送信する前に検証（バリデーション）を行うことができます。例えば、「必須項目が空欄になっていないか」「メールアドレスの形式が正しいか」といったチェックを送信前に実行し、問題があれば送信をキャンセルするといった処理を実装できます。onsubmitイベントの使い方以下の例では、フォームデータをWebサーバーへ送信する前に、validate()関数を呼び出して入力チェックを行っています。valid

JavaScriptのonkeyupイベントとは？使い方とサンプルコードをわかりやすく解説

onkeyupイベントの概要onkeyupイベントは、ユーザーが押していたキーを離した（指を放した）瞬間に発生するJavaScriptのイベントです。テキストフィールドへの入力内容をリアルタイムに処理したい場合などに活用されます。例えば、入力された文字を自動的に小文字に変換したり、検索ボックスに入力されるたびに候補を表示したりするようなインタラクティブな処理を実装することができます。使用例以下のコードでは、テキストボックスに英大文字で入力すると、キーを離したタイミングで自動的に小文字へ変換されます。実際に動作させて、onkeyupイベントの挙動を確認してみましょう。<html> &

JavaScriptの動的型付けとは？同じ変数に異なるデータ型を代入する方法

JavaScriptの動的型付けとは？JavaScriptは動的型付け（dynamic typing）を採用しているプログラミング言語です。これは、変数を宣言する際にデータ型を固定しておく必要がなく、同じ変数に文字列・整数・小数など、異なるデータ型の値を自由に代入できることを意味します。JavaやC言語のような静的型付け言語では、変数の型は宣言の時点で決定し、後から変更することはできません。一方、JavaScriptでは変数はあくまで「値を入れる入れ物」であり、中に入る値によってその型が実行時に自動的に決まります。この柔軟性こそが、JavaScriptの大きな特徴のひとつです。サンプルコード：

JavaScriptで空の文字列（空の値）を作成する方法をわかりやすく解説

JavaScriptで空の文字列（空の値）を作成するには、変数に空の文字列リテラルを代入するだけです。宣言した変数に何も入っていない状態（undefined）とは異なり、空の文字列はれっきとした「文字列型」の値として扱われます。以下に、空の文字列を作成して、その値とデータ型を確認する基本的なサンプルコードを示します。サンプルコード<html> <head> <script> // 変数を宣言し、空の文字列を代入 &nbs

JavaScriptの複雑なデータ型とは？typeof演算子によるデータ型の判定方法を解説

JavaScriptにおけるデータ型とtypeof演算子の基本JavaScriptでは、数値・文字列・真偽値といった基本のデータ型（プリミティブ型）に加えて、オブジェクトや配列、関数などの「複雑なデータ型（参照型）」を扱うことができます。これらのデータ型をプログラム内で判別する際に活躍するのが、typeof 演算子です。typeof は単項演算子の一種で、オペランド（被演算子）の直前に置いて使用します。オペランドには任意の型の値を指定でき、評価結果として、そのオペランドのデータ型を表す文字列が返されます。具体的には、オペランドが数値であれば number、文字列であれば string、真偽値で

JavaScriptのデータ型とは？基本の型と特徴をわかりやすく解説

JavaScriptのデータ型の基本概念JavaScriptでプログラミングを行う上で、「データ型（データの種類）」の理解は欠かせません。データ型とは、扱う値の種類を分類するための概念であり、それぞれの型によって使える操作や挙動が異なります。JavaScriptには、大きく分けてプリミティブ型（基本型）とオブジェクト型（複合型）の2系統があります。まずは、代表的なプリミティブ型から見ていきましょう。3つの基本的なプリミティブデータ型JavaScriptで最もよく使われる基本データ型は次の3つです。数値型（Number）：123や120.50のような数値を表します。整数も小数も同じ型で扱われます

JavaScriptの関数とは？意味と定義方法・基本構文をわかりやすく解説

関数（Function）とは関数とは、プログラム内のどこからでも呼び出して実行できる、再利用可能なコードのまとまりです。一度定義しておけば、同じ処理を何度も書き直す必要がなくなり、コードの重複を防ぐことができます。これにより、プログラマーは保守性の高いモジュール化されたコードを効率よく作成できるようになります。関数の定義方法関数を使用する前に、必ず定義しておく必要があります。JavaScriptで関数を定義する最も一般的な方法は、functionキーワードを使うことです。functionキーワードに続き、以下の要素を順に記述します。一意の関数名パラメータのリスト（空でも可）波括弧 { } で囲

JavaScriptでHTMLフォームを送信する方法｜onsubmitイベントとバリデーションの実装

JavaScriptを使ってHTMLフォームを送信するには、onsubmitイベントが発生したタイミングでvalidate()関数を呼び出し、入力データの検証（バリデーション）を行うのが一般的な手法です。フォーム送信とバリデーションの仕組みユーザーが「送信」ボタンをクリックすると、フォームのonsubmitイベントが発火し、ここでvalidate()関数が実行されます。この関数の戻り値によって動作が変わります。 false を返した場合：入力内容に不備があると判断され、フォームの送信はキャンセルされます。同時にアラートで警告を表示し、該当する入力欄へフォーカスを移動します。 true

JavaScriptで日付に時間と分を追加する方法【setHours・setMinutesの使い方】

JavaScriptで日付（Dateオブジェクト）に時間や分を加算したい場合は、setHours()メソッドとsetMinutes()メソッドを使用します。これらのメソッドは、既存の時刻の値をもとに新しい値を設定できるため、簡単に時刻の計算が行えます。サンプルコード以下は、現在時刻に2時間20分を追加して表示する例です。 <html> <head> <title>JavaScript Dates</title> </head> &nb

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

oncontextmenuイベントの概要 JavaScriptにおけるoncontextmenuイベントは、ページ内の要素を右クリックしたときにコンテキストメニューが開こうとするタイミングで発生するイベントです。このイベントは、HTMLタグの属性として直接指定できるほか、addEventListener()メソッドを使って登録することもできます。なお、イベントハンドラ内でevent.preventDefault()を呼び出すと、ブラウザ標準の右クリックメニューの表示をキャンセルできます。そのため、独自デザインのカスタムコンテキストメニューを実装したい場合などにも、このイベントはよく活用されて

JavaScriptのondblclickイベントとは？ダブルクリック時の使い方を解説

JavaScriptのondblclickイベントは、要素がダブルクリックされたときに発生するイベントです。ボタンやテキスト、画像など、任意のHTML要素に設定でき、ユーザーが素早く2回クリックしたタイミングで、あらかじめ指定しておいた処理を実行できます。 ondblclickイベントの基本構文 ondblclickイベントは、HTML属性として直接記述するのが最もシンプルな使い方です。以下のように、対象となる要素に属性を追加します。 <html> <head> &nbs

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

onmousedownイベントは、ユーザーがマウスボタンを押した瞬間に発生するイベントです。ボタンがクリック（押して離す）される前に反応できるため、クリック操作に素早く応答したい場合に便利です。 onmousedownイベントの基本 onmousedownは、HTML要素に対してマウスの左ボタン・右ボタン・中央ボタンのいずれかが押されたタイミングで発火します。似たイベントとして以下のようなものがあります。 onmousedown：マウスボタンが押されたとき onmouseup：押されていたマウスボタンが離されたとき onclick：マウスボタンが押され、同じ要素上で離されたとき（完全なクリッ

JavaScriptのonmouseenterイベントとは？使い方を初心者向けに解説

onmouseenterイベントとはonmouseenterイベントは、マウスポインターが要素の上に乗った（ホバーした）瞬間に発生するイベントです。ユーザーが特定の要素にカーソルを合わせたタイミングで、アラートの表示やメニューの開閉、ツールチップの表示など、さまざまな処理を実行できます。onmouseoverイベントとの違いonmouseenterイベントとよく似たイベントにonmouseoverがありますが、両者には重要な違いがあります。onmouseenter：対象の要素に入ったときに1回だけ発火します。子要素にマウスが移動しても再び発火しません。onmouseover：対象の要素に入った