-
JavaScriptで定数を作成する方法とは?constキーワードの使い方を実例付きで解説
JavaScriptで定数を作成するには、constキーワードを使用します。constで宣言された変数は、一度値を代入すると後から再代入することができません。もし再代入を試みると、TypeErrorエラーが発生します。定数作成のコード例以下は、JavaScriptでconstを使って定数を作成し、その値を変更しようとしたときの挙動を確認できるサンプルコードです。サンプルコード<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma,
-
JavaScriptでNaNとInfinityを扱う方法|実例コード付きでわかりやすく解説
JavaScriptにおけるNaNとInfinityとはJavaScriptでは、数値計算の結果として特殊な値が返されることがあります。その代表が NaN(Not a Number) と Infinity(無限大) です。NaN は「数値ではない」という意味を持つ特殊な値で、数値への変換に失敗した場合などに返されます。Infinity は無限大を表す値で、たとえばゼロによる除算の結果として得られます。以下は、JavaScriptでNaNとInfinityを実装・確認するためのコード例です。サンプルコード<!DOCTYPE html> <html lang="en&q
-
JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】
JavaScriptで文字列を検索する方法 JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列(または正規表現)が対象の文字列内で最初に一致した位置(インデックス)を返し、見つからなかった場合は -1 を返します。 以下は、JavaScriptで文字列を検索するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" />
-
JavaScriptで正と負の無限大(Infinity)の値を出力する方法
JavaScriptで扱える数値には上限があり、その範囲を超えた演算結果は特別な値「Infinity」(正の無限大)または「-Infinity」(負の無限大)として出力されます。この記事では、実際に正と負の無限大の値を画面に出力するサンプルコードを紹介します。 JavaScriptにおける無限大(Infinity)とは JavaScriptの数値型はIEEE 754で定められた倍精度浮動小数点数で、表現できる最大値は Number.MAX_VALUE(約1.79×10308)です。演算結果がこの最大値を超えると、エラーにはならずグローバルプロパティの Infinity が返されます。 正の方
-
JavaScriptのsplice()メソッドとは?配列の要素追加・削除を実例コードで解説
JavaScriptにおける配列のスプライシング(splice)とは 配列の「スプライシング」とは、Array.splice()メソッドを使用して、配列に要素を追加したり、配列から要素を削除したりすることを指します。このメソッドは元の配列を直接変更し、削除された要素は新しい配列として返されます。何も削除されなかった場合は空の配列が返ります。 splice()メソッドの基本構文 array.splice(start, deleteCount, item1, item2, ...) start:変更を開始する位置(インデックス番号)。負の値を指定すると配列の末尾から数えた位置になります。 de
-
JavaScriptでnewキーワードを使って配列を作成する方法
JavaScriptでは、newキーワードとArray()コンストラクタを使用することで、簡単に配列を作成できます。本記事では、実際に動作するサンプルコードとともに、その基本的な使い方を解説します。 サンプルコード 以下は、newキーワードを使用してJavaScriptの配列を作成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-sca
-
JavaScriptの連想配列とは?基本的な仕組みと使い方を解説
JavaScriptにおける「連想配列(Associative Array)」とは、数値のインデックスの代わりに、ユーザーが自由に定義した文字列キーを使って値にアクセスできるデータ構造のことです。厳密に言えば、JavaScriptの連想配列の正体はオブジェクトであり、他の言語にあるような専用の連想配列型は存在しません。 通常の配列と比べると、連想配列には次のような特徴があります。 lengthプロパティを持たない:要素数を取得する機能がありません。 通常のforループでは走査できない:インデックスが存在しないため、for...in文などを使って反復処理を行います。 JavaScriptの
-
JavaScriptでDateオブジェクトを作成する方法をわかりやすく解説
JavaScriptで日付や時刻を扱うには、Dateオブジェクトを使用します。new Date()コンストラクタを呼び出すだけで、現在の日時に基づいたDateオブジェクトを簡単に生成できます。以下に、ボタンをクリックすると現在の日時を持つDateオブジェクトを作成し、画面に表示するサンプルコードを示します。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport"
-
JavaScriptで日付の「日」を設定する方法|setDate()の使い方を解説
JavaScriptでは、DateオブジェクトのsetDate()メソッドを使うことで、日付の「日」(1〜31)を設定・変更できます。この記事では、実際のコード例と実行結果をもとに、setDate()の基本的な使い方をわかりやすく解説します。 setDate()メソッドとは setDate()は、Dateオブジェクトの「日」の値だけを変更するためのメソッドです。年や月はそのままに、日にちだけを差し替えたい場合に便利です。引数には1〜31の整数を指定しますが、範囲外の値を渡してもエラーにはならず、自動的に月をまたいだ日付へと調整されます。また、このメソッドは元のDateオブジェクト自体を書き換え
-
JavaScriptのクロージャとは?具体例でわかりやすく解説
JavaScriptのクロージャ(Closure)とは、外側の関数が実行を終えて値を返した後でも、内側の関数から外側の関数のスコープにある変数へアクセスできる仕組みのことです。つまり、内側の関数は、外側の関数で定義された変数を常に参照し続けることができます。クロージャは「関数を返す関数」のパターンでよく利用され、状態の保持やデータの隠蔽(カプセル化)など、実用的な場面で活躍します。以下は、JavaScriptでクロージャを使った具体的なコード例です。コード例<!DOCTYPE html> <html lang="en" > <head>
-
JavaScriptでオブジェクトが配列かどうか判定する方法!Array.isArray()の使い方を実例付きで解説
JavaScriptであるオブジェクトが配列(Array)なのか、それとも別のオブジェクトなのかを判別したい場面はよくあります。そんなときに便利なのが Array.isArray() メソッドです。Array.isArray() は、引数に渡した値が配列であれば true を、そうでなければ false を返すメソッドです。この戻り値のブール値(Boolean)を確認することで、対象が配列かどうかを簡単に判定できます。Array.isArray() の基本構文Array.isArray(value)value:判定したいオブジェクトや値戻り値:配列なら true、それ以外は falsetype
-
【JavaScript入門】Rest演算子とSpread演算子の違いと使い方を徹底解説
Rest演算子(...)を使用すると、関数を任意の数の引数で呼び出し、余分な引数を1つの配列として受け取ることができます。また、配列やオブジェクトの分割代入(デストラクチャリング)の際にも活用できる便利な構文です。 一方、Spread演算子(...)は、配列などの反復可能なオブジェクト(イテラブル)を個々の要素へと展開するために使用します。 Rest演算子とSpread演算子の主な違い 両者は同じ「...」という記法ですが、使用する場所によって役割が異なります。 Rest演算子: 関数の仮引数や分割代入の左辺など、「複数の値をまとめて1つに集約」する場面で使用します。 Spread演算子:
-
JavaScript正規表現のUnicodeプロパティエスケープとは?uフラグで文字を柔軟にマッチングする方法
Unicodeプロパティエスケープは、正規表現に u フラグを組み合わせて使用することで、文字が持つUnicodeプロパティに基づいて文字をマッチングできる強力な機能です。これにより、絵文字や特定の文字種など、従来の正規表現では判別しにくかった文字も簡単に抽出・判定できるようになります。基本構文Unicodeプロパティエスケープは \p{...} の形式で記述します。否定形は \P{...} を使用します。const emojiRegEx = /\p{Emoji_Presentation}/gu;サンプルコード以下は、テキスト内から絵文字だけを正規表現で抽出する実装例です。<!DOCTY
-
JavaScript正規表現の後読みアサーション(Lookbehind)の使い方を実例で解説
後読みアサーション(Lookbehind)とは、あるパターンの直前に特定の文字列や記号が存在する場合にのみ、そのパターンをマッチさせることができるJavaScript正規表現の機能です。マッチ結果には直前のパターン自体は含まれず、あくまで「存在確認の条件」として扱われる点が大きな特徴です。 後読みアサーションの基本構文 後読みアサーションは (?<=パターン) の形式で記述します。例として (?<=\$)\d+ という正規表現を見てみましょう。 (?<=\$): 直前にドル記号($)が存在することを確認する \d+: 1桁以上の数字にマッチする この組み合わせにより、「$
-
JavaScript正規表現の名前付きキャプチャグループの使い方を解説
JavaScript正規表現における名前付きキャプチャグループとはJavaScriptでは、正規表現の一部をまとめて扱うためにグループ化を行うことができます。グループ化は、対象となる文字やパターンを丸括弧 () で囲むだけで簡単に実現できます。さらに、ECMAScript 2018(ES9)から導入された名前付きキャプチャグループを使うと、各グループに任意の名前を付けることが可能になります。構文は (?<name>pattern) で、マッチ結果には groups.name というプロパティ経由でアクセスできます。番号ではなく名前で参照できるため、可読性と保守性の高いコードを書くの
-
JavaScriptのPromise.finally()メソッドとは?使い方をサンプルコード付きで解説
Promise.finally()メソッドは、Promiseが履行(fulfilled)されたか拒否(rejected)されたかに関わらず、必ず指定したコールバック関数を呼び出します。この仕組みにより、Promiseの処理が成功しても失敗しても、最後に必ず実行したい共通処理(例:ローディング表示の解除、リソースの後片付けなど)を簡潔に記述できます。 基本構文 promise.finally(() => { // 成功・失敗に関わらず実行される処理 }); finally()に渡すコールバック関数には引数が渡されません。そのため、この中でPromiseが成功したのか失敗したのかを判定す
-
JavaScriptの正規表現における「dotAll」プロパティの使い方を解説
dotAllフラグとは何かJavaScriptの正規表現オブジェクトが持つ dotAll プロパティは、その正規表現に s フラグが設定されているかどうかに応じて、true または false を返します。通常、正規表現のドット(.)は改行文字にはマッチしませんが、s フラグを付けることで、ドットが改行文字を含むあらゆる文字にマッチするようになります。dotAll プロパティを使えば、その s フラグが実際に設定されているかどうかをプログラムから確認できます。以下は、JavaScriptで正規表現の dotAll プロパティを実装したコード例です。サンプルコード<!DOCTYPE htm
-
JavaScriptでモジュール・ライブラリをインポート・エクスポートする方法をわかりやすく解説
JavaScriptにおけるモジュールのインポートとエクスポートJavaScriptでは、ESモジュール(ESM)の仕組みを利用することで、コードを複数のファイルに分割し、必要な機能だけを読み込んで再利用できます。モジュール化によって、コードの保守性・再利用性・可読性が大きく向上します。注意 − この例を実行するには、ローカルホストサーバー(localhost)の起動が必要です。file:// プロトコルではモジュールを読み込めないため、VS Codeの「Live Server」拡張機能などを使ってローカル環境を立ち上げるのがおすすめです。サンプルコード以下は、JavaScriptでモジュール
-
JavaScriptの巻き上げ(ホイスティング)とは?仕組みと動作を実例でわかりやすく解説
巻き上げ(Hoisting)とは何か JavaScriptにおける巻き上げ(ホイスティング)とは、コードの実行が始まる前に、関数宣言やvarで宣言された変数が、それぞれのスコープの先頭に移動されたかのように扱われる仕組みのことです。この仕組みのおかげで、実際には定義より前の行であっても、関数や変数を呼び出すことができます。 ただし、挙動には注意が必要です。変数の場合、宣言は巻き上げられますが、値の代入は巻き上げられません。そのため、代入前の変数にアクセスするとundefinedが返されます。一方、関数宣言は宣言全体(関数の中身まで)が巻き上げられるため、定義前に呼び出しても正常に実行されます。
-
JavaScriptでオブジェクトを作成し、プロパティにアクセスする方法を徹底解説
JavaScriptでは、オブジェクトリテラル(波括弧 {})を使うことで、キーと値のペアを持つオブジェクトを簡単に作成できます。作成したオブジェクトのプロパティには、ドット記法(obj.propertyName)やブラケット記法(obj[propertyName])でアクセスします。 以下は、JavaScriptでオブジェクトを作成し、そのプロパティやメソッドにアクセスする具体的なコード例です。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta