JavaScriptの基礎：組み込みオブジェクトを解説（2/2）

この記事では、JavaScriptの高度なオブジェクトについて学びます。特に、Map、Set、RegExpオブジェクトに焦点を当て、それぞれの特徴と実際のコード例を通じて、これらのオブジェクトの操作方法を理解できます。これらのオブジェクトは、より複雑なデータ構造や操作を可能にし、効率的なプログラミングを実現します。

はじめに

この記事のコードをコピペして出力してみよう。

VSCodeでコードを書き、Node.jsでコンソール出力する方法がおすすめです。

VSCodeのインストールがまだの方はこちら

初心者でも簡単！VSCodeインストール方法を解説

Visual Studio Code（VSCode）は、Microsoftが開発した軽量かつ高機能なオープンソースの無料のコードエディタです。HTML、CSS、JavaScriptの開発環境をVSCodeで簡単にセットアップする方法を、初心者にもわかりやすく解説します。

www.programming-make-and-learn.tech

2024.09.18

Node.jsのインストールがまだの方はこちら

Node.jsインストール方法（Windows,Mac,Linux）

この記事では、Node.jsの基本概念から実際のインストール、アップデート、そして簡単なテストスクリプトの実行まで、包括的に解説します。Windows、macOS、Linuxの各OSに対応したインストール方法を、初心者でも理解しやすいように具体的な手順を紹介します。

www.programming-make-and-learn.tech

2024.09.29

連想配列を操作する – Mapオブジェクト

Mapオブジェクトは、キーと値のペアを保持し、効率的に操作するためのメソッドを提供します。

// Mapの作成と要素の追加
let userMap = new Map();
userMap.set("name", "John");
userMap.set("age", 30);

// Mapの要素にアクセス
console.log(userMap.get("name")); // "John"

// Mapのサイズと存在確認
console.log(userMap.size); // 2
console.log(userMap.has("age")); // true

出力結果：

John
2
true

このコードでは、set()メソッドでMapにキーと値のペアを追加し、get()メソッドで値を取得しています。sizeプロパティでMapのサイズを、has()メソッドでキーの存在を確認しています。

コード解説

Mapの作成:

let userMap = new Map();

• Map はキーと値のペアを保持するコレクションです。
• new Map() で新しい空の Map オブジェクトを作成します。

要素の追加:

userMap.set("name", "John");
userMap.set("age", 30);

• set() メソッドを使用して、Map にキーと値のペアを追加します。
• 最初の引数がキー、2番目の引数が値です。
• ここでは “name” というキーに “John” という値を、”age” というキーに 30 という値を設定しています。

要素へのアクセス:

console.log(userMap.get("name")); // "John"

• get() メソッドを使用して、指定したキーに対応する値を取得します。
• この場合、”name” キーに対応する値 “John” が返されます。

Mapのサイズ確認:

console.log(userMap.size); // 2

• size プロパティは Map 内のキーと値のペアの数を返します。
• この Map には2つのペアが含まれているので、2が出力されます。

キーの存在確認:

console.log(userMap.has("age")); // true

• has() メソッドは指定したキーが Map に存在するかどうかを確認します。
• “age” というキーが存在するので、true が返されます。

全体の流れ:

• 空の Map を作成します。
• キーと値のペアを Map に追加します。
• 特定のキーに対応する値にアクセスします。
• Map のサイズ（ペアの数）を確認します。
• 特定のキーが存在するかどうかを確認します。

重要なポイント:

• Map はキーと値のペアを保持するデータ構造です。
• キーには任意の型（文字列、数値、オブジェクトなど）を使用できます。
• Map は挿入順序を記憶します。つまり、要素を追加した順序が保持されます。
• Map はキーの一意性を保証します。同じキーで set() を呼び出すと、値が上書きされます。

Mapの主な操作:

• set(key, value): 要素の追加・更新
• get(key): 値の取得
• has(key): キーの存在確認
• delete(key): 要素の削除
• clear(): 全要素の削除

Map は、キーと値のペアを扱う必要がある場合に非常に有用なデータ構造です。オブジェクトと似ていますが、より柔軟な機能を提供します。特に、キーとして任意の型を使用できる点や、サイズを簡単に取得できる点が特徴的です。

重複しない値の集合を操作する – Setオブジェクト

Setオブジェクトは、重複のない値の集合を管理するためのメソッドを提供します。

// Setの作成と要素の追加
let uniqueNumbers = new Set([1, 2, 3, 3, 4, 5]);

// Setの操作
console.log(uniqueNumbers.size); // 5（重複は自動的に除去される）
uniqueNumbers.add(6);
console.log(uniqueNumbers.has(4)); // true

// Setを配列に変換
let numbersArray = Array.from(uniqueNumbers);
console.log(numbersArray); // [1, 2, 3, 4, 5, 6]

出力結果：

5
true
[ 1, 2, 3, 4, 5, 6 ]

ここでは、Setを作成し、add()メソッドで要素を追加しています。has()メソッドで要素の存在を確認し、Array.from()を使用してSetを配列に変換しています。

コード解説

Setの作成と初期化:

let uniqueNumbers = new Set([1, 2, 3, 3, 4, 5]);

• Set は重複のない値の集合を表すデータ構造です。
• new Set() で新しい Set オブジェクトを作成します。
• 配列を引数として渡すことで、初期値を設定できます。
• 重複する値（この場合は3）は自動的に除去されます。

Setのサイズ確認:

console.log(uniqueNumbers.size); // 5

• size プロパティは Set 内の要素数を返します。
• 重複が除去されているため、5が出力されます。

要素の追加:

uniqueNumbers.add(6);

• add() メソッドを使用して、Set に新しい要素を追加します。
• この操作により、6が Set に追加されます。

要素の存在確認:

console.log(uniqueNumbers.has(4)); // true

• has() メソッドは指定した値が Set に存在するかどうかを確認します。
• 4は Set に含まれているので、true が返されます。

Setを配列に変換:

let numbersArray = Array.from(uniqueNumbers);

• Array.from() メソッドを使用して、Set を配列に変換します。
• この操作により、Set の要素が順序を保持したまま配列に変換されます。

結果の表示:

console.log(numbersArray); // [1, 2, 3, 4, 5, 6]

• 変換された配列がコンソールに出力されます。

全体の流れ:

• 重複を含む値で Set を作成します。
• Set のサイズを確認し、重複が自動的に除去されていることを確認します。
• 新しい要素を追加します。
• 特定の要素の存在を確認します。
• Set を配列に変換して表示します。

重要なポイント:

• Set は重複を許さないユニークな値の集合です。
• Set に同じ値を追加しても無視されます（エラーにはなりません）。
• Set は挿入順序を記憶します。
• Set は値のみを格納し、キーは持ちません。

Setの主な操作:

• add(value): 要素の追加
• has(value): 要素の存在確認
• delete(value): 要素の削除
• clear(): 全要素の削除

Set は、重複のないユニークな値の集合を扱う必要がある場合に非常に有用なデータ構造です。配列から重複を除去したり、ユニークな値のみを扱いたい場合によく使用されます。また、has() メソッドを使用した要素の存在確認が非常に高速であるという特徴もあります。

正規表現で文字列を自在に操作する – RegExpオブジェクト

RegExpオブジェクトは、文字列のパターンマッチングと置換を行うための強力なツールです。

// 正規表現の作成
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

// 文字列のマッチング
let email = "user@example.com";
console.log(emailPattern.test(email)); // true

// 文字列の置換
let text = "Hello, World! Hello, JavaScript!";
let replacedText = text.replace(/Hello/g, "Hi");
console.log(replacedText); // "Hi, World! Hi, JavaScript!"

出力結果：

true
Hi, World! Hi, JavaScript!

このコードでは、メールアドレスのパターンを表す正規表現を作成し、test()メソッドで文字列がパターンに一致するかを確認しています。また、replace()メソッドと正規表現を使用して、文字列内の特定のパターンを置換しています。

コード解説

正規表現の作成:

let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

• 正規表現はパターンマッチングのための強力なツールです。
• / と / の間に正規表現のパターンを記述します。
• この正規表現は簡単なメールアドレスの形式を表しています：
  • ^ は文字列の先頭を表します。
  • [a-zA-Z0-9._-]+ は1文字以上の英数字、ドット、アンダースコア、ハイフンを表します。
  • @ は文字通り @ を表します。
  • [a-zA-Z0-9.-]+ はドメイン名の部分を表します。
  • \. はドット（エスケープされています）を表します。
  • [a-zA-Z]{2,4} は2〜4文字のアルファベットを表します（トップレベルドメイン）。
  • $ は文字列の末尾を表します。

文字列のマッチング:

let email = "user@example.com";
console.log(emailPattern.test(email)); // true

• test() メソッドは文字列が正規表現パターンにマッチするかをチェックします。
• この場合、email が emailPattern にマッチするので true を返します。

文字列の置換:

let text = "Hello, World! Hello, JavaScript!";
let replacedText = text.replace(/Hello/g, "Hi");

• replace() メソッドは文字列内のパターンを別の文字列に置換します。
• /Hello/g は正規表現で、g（グローバルフラグ）はすべての出現を置換することを意味します。
• “Hello” を “Hi” に置換しています。

結果の表示:

console.log(replacedText); // "Hi, World! Hi, JavaScript!"

• 置換された結果がコンソールに出力されます。

全体の流れ:

• メールアドレスのパターンを表す正規表現を作成します。
• その正規表現を使って特定の文字列（メールアドレス）がパターンにマッチするかチェックします。
• 別の正規表現を使って文字列内の特定のパターンを置換します。

重要なポイント:

• 正規表現はパターンマッチングと文字列操作に非常に強力なツールです。
• /pattern/flags の形式で正規表現を作成します。
• よく使用されるフラグ：
  • g: グローバルマッチ（すべての出現を検索）
  • i: 大文字小文字を区別しない
  • m: 複数行モード

正規表現の主な使用方法:

• test(): パターンにマッチするかをチェック
• exec(): マッチング結果の詳細情報を取得
• match(): 文字列のマッチング部分を抽出
• replace(): パターンにマッチする部分を置換

正規表現は複雑に見えることがありますが、文字列の検証やデータの抽出、テキスト処理など、多くの場面で非常に有用です。基本的なパターンを理解し、徐々に複雑なパターンを学んでいくことをお勧めします。

その他のオブジェクト

JavaScriptには、他にも多くの組み込みオブジェクトがあります。例えば、Mathオブジェクトは数学的な操作を行うためのメソッドを提供します。

// Mathオブジェクトの使用例
console.log(Math.PI); // 3.141592653589793
console.log(Math.round(4.7)); // 5
console.log(Math.random()); // 0以上1未満のランダムな数

出力結果：

3.141592653589793
5
0.34666702228848134

このコードでは、Math.PIで円周率を取得し、Math.round()で四捨五入を行い、Math.random()でランダムな数を生成しています。

コード解説

Math.PI の使用:

console.log(Math.PI); // 3.141592653589793

• Math は JavaScript の組み込みオブジェクトで、数学的な定数と関数を提供します。
• Math.PI は円周率πの値を表す定数です。
• この行は円周率の値（約3.14159）をコンソールに出力します。

Math.round() の使用:

console.log(Math.round(4.7)); // 5

• Math.round() は数値を最も近い整数に丸める関数です。
• 4.7 は 5 に近いので、結果は 5 になります。
• もし引数が 4.3 だった場合、結果は 4 になります。

Math.random() の使用:

console.log(Math.random()); // 0以上1未満のランダムな数

• Math.random() は 0 以上 1 未満の乱数（ランダムな小数）を生成します。
• 生成される数は毎回異なります。
• 例えば、0.7231742738374 のような数が出力されます。

全体の流れ:

• まず、数学定数 π の値を表示します。
• 次に、小数を最も近い整数に丸めた結果を表示します。
• 最後に、ランダムな小数を生成して表示します。

重要なポイント:

• Math オブジェクトは静的なオブジェクトです。つまり、new Math() のようにインスタンス化する必要はありません。
• Math オブジェクトには多くの有用な数学関数と定数が含まれています。

その他のよく使用される Math メソッド:

• Math.floor(x): x 以下の最大の整数を返します（切り捨て）。
• Math.ceil(x): x 以上の最小の整数を返します（切り上げ）。
• Math.abs(x): x の絶対値を返します。
• Math.max(x, y, ...): 引数の中で最大の数を返します。
• Math.min(x, y, ...): 引数の中で最小の数を返します。
• Math.pow(x, y): x の y 乗を返します。
• Math.sqrt(x): x の平方根を返します。

Math.random() の活用:

• 特定の範囲のランダムな整数を生成したい場合、以下のような式を使用できます：
  javascript Math.floor(Math.random() * (max - min + 1)) + min
• 例えば、1から10のランダムな整数：Math.floor(Math.random() * 10) + 1

Math オブジェクトは数学的な計算や操作を行う際に非常に便利です。特に、ゲーム開発、データ分析、グラフィックス処理などの分野で頻繁に使用されます。基本的な使い方を理解することで、より複雑な数学的操作も可能になります。

まとめ

各オブジェクトのメソッドとプロパティを理解し、適切に活用することで、複雑なデータ処理や文字列操作を簡潔に表現できるようになります。また、これらのオブジェクトを組み合わせることで、より高度なプログラムの作成が可能になります。

次のページ

JavaScriptの基礎：関数（function）を解説

この記事では、JavaScriptにおける関数の基本から高度な概念まで幅広く学ぶことができます。関数の定義方法、スコープ、引数の扱い方、関数呼び出しと戻り値の仕組み、そして高度な関数のテーマについて、具体的なコード例を交えて理解を深めることができます。

www.programming-make-and-learn.tech

2024.10.14

未経験でもWEBスキルを取得したい方

【デイトラ】未経験でWebスキル習得！SNS発オンラインスクール

今すぐデイトラで学習を始めることで、急速に変化するIT業界での競争力を獲得し、在宅ワーク時代に適したスキルを身につけることができます。さらに、政府支援プログラムとの連携や多様な学習形態の選択肢により、あなたの状況に最適な学習方法を見つけることができます。

www.programming-make-and-learn.tech

2024.09.23