この記事では、JavaScriptにおける主要なオブジェクトの基本と使用方法について学びます。特に、String、Number、Date、Arrayの各オブジェクトに焦点を当て、それぞれの特徴と実際のコード例を通じて、オブジェクトの操作方法を理解できます。これらのオブジェクトは、JavaScriptプログラミングにおいて頻繁に使用される重要な要素です。
はじめに
この記事のコードをコピペして出力してみよう。
VSCodeでコードを書き、Node.jsでコンソール出力する方法がおすすめです。
オブジェクトとは？
オブジェクトは、関連するデータと機能をまとめた集合体です。JavaScriptでは、ほぼすべてのものがオブジェクトとして扱われます。
文字列を操作する – Stringオブジェクト
Stringオブジェクトは、文字列の操作や処理を行うためのメソッドを提供します。
// 文字列の長さを取得
let str = "Hello, World!";
console.log(str.length); // 13
// 文字列の一部を取得
console.log(str.substring(0, 5)); // "Hello"
// 文字列を大文字に変換
console.log(str.toUpperCase()); // "HELLO, WORLD!"出力結果：
13
Hello
HELLO, WORLD!このコードでは、lengthプロパティで文字列の長さを取得し、substring()メソッドで文字列の一部を抽出し、toUpperCase()メソッドで文字列を大文字に変換しています。
コード解説
変数の宣言と初期化:
let str = "Hello, World!";letは変数を宣言するキーワードです。strは変数名です。"Hello, World!"は文字列リテラルで、この値がstrに代入されます。
文字列の長さを取得:
console.log(str.length); // 13lengthは文字列の長さ（文字数）を返すプロパティです。- この場合、スペースと句読点を含めて13文字あります。
console.log()で結果をコンソールに出力します。
文字列の一部を取得:
console.log(str.substring(0, 5)); // "Hello"substring()メソッドは文字列の一部を抽出します。- 第一引数
0は開始位置（インデックス）を指定します。 - 第二引数
5は終了位置（この位置の直前まで）を指定します。 - したがって、インデックス0から4までの文字（”Hello”）が抽出されます。
- 文字列のインデックスは0から始まることに注意してください。
文字列を大文字に変換:
console.log(str.toUpperCase()); // "HELLO, WORLD!"toUpperCase()メソッドは文字列のすべての文字を大文字に変換します。- 元の
str変数は変更されず、新しい大文字の文字列が生成されます。
全体の流れ:
- まず、文字列を変数に格納します。
- その文字列の長さを取得して表示します。
- 文字列の一部（最初の5文字）を抽出して表示します。
- 文字列全体を大文字に変換して表示します。
このコードは、文字列操作の基本的な方法をいくつか示しています。length プロパティ、substring() メソッド、toUpperCase() メソッドは、文字列を扱う際によく使用される機能です。これらのメソッドは元の文字列を変更せず、新しい文字列を返します。文字列操作は多くのプログラミングタスクで必要となるため、これらの基本的な操作を理解することは非常に有用です。
数値リテラルを操作する – Numberオブジェクト
Numberオブジェクトは、数値の操作や変換を行うためのメソッドを提供します。
// 数値を文字列に変換
let num = 123.456;
console.log(num.toString()); // "123.456"
// 小数点以下の桁数を指定
console.log(num.toFixed(2)); // "123.46"
// 数値かどうかを判定
console.log(Number.isNaN(NaN)); // true出力結果：
123.456
123.46
trueここでは、toString()メソッドで数値を文字列に変換し、toFixed()メソッドで小数点以下の桁数を指定しています。また、Number.isNaN()で値がNaN（Not a Number）かどうかを判定しています。
コード解説
変数の宣言と初期化:
let num = 123.456;letは変数を宣言するキーワードです。numは変数名です。123.456は数値リテラルで、この値がnumに代入されます。
数値を文字列に変換:
console.log(num.toString()); // "123.456"toString()メソッドは数値を文字列に変換します。- この場合、数値
123.456が文字列"123.456"に変換されます。 - 変換された文字列がコンソールに出力されます。
小数点以下の桁数を指定:
console.log(num.toFixed(2)); // "123.46"toFixed()メソッドは数値を指定した小数点以下の桁数に丸めて、文字列として返します。- 引数
2は小数点以下の桁数を指定しています。 - 結果は
"123.46"となります（小数点第3位で四捨五入されます）。 - 返される値は文字列であることに注意してください。
数値かどうかを判定:
console.log(Number.isNaN(NaN)); // trueNumber.isNaN()は引数がNaN（Not-a-Number）かどうかを判定するメソッドです。NaNは「数値ではない」ことを表す特殊な値です。- この場合、引数として
NaNを渡しているので、結果はtrueとなります。
全体の流れ:
- まず、数値を変数に格納します。
- その数値を文字列に変換して表示します。
- 数値を指定した小数点以下の桁数に丸めて文字列として表示します。
NaNかどうかを判定するメソッドの使用例を示しています。
このコードは、数値操作の基本的な方法をいくつか示しています。toString() メソッド、toFixed() メソッド、Number.isNaN() メソッドは、数値を扱う際によく使用される機能です。
特に重要なポイント：
toString()は数値を文字列に変換します。toFixed()は小数点以下の桁数を指定して丸めた結果を文字列として返します。Number.isNaN()は値がNaNかどうかを判定するのに使用します。
これらのメソッドを理解し適切に使用することで、数値データの操作や表示を効果的に行うことができます。
日付／時刻値を操作する – Dateオブジェクト
Dateオブジェクトは、日付と時刻の操作を行うためのメソッドを提供します。
// 現在の日時を取得
let now = new Date();
console.log(now.toLocaleString()); // 現在の日時を表示
// 特定の日時を設定
let specificDate = new Date(2023, 0, 1); // 2023年1月1日
console.log(specificDate.toDateString()); // "Sun Jan 01 2023"
// 日付の計算
specificDate.setDate(specificDate.getDate() + 7); // 7日後
console.log(specificDate.toDateString()); // "Sun Jan 08 2023"出力結果：
2024/10/13 16:41:14
Sun Jan 01 2023
Sun Jan 08 2023このコードでは、new Date()で現在の日時を取得し、toLocaleString()メソッドで読みやすい形式に変換しています。また、特定の日付を設定し、setDate()とgetDate()メソッドを使用して日付の計算を行っています。
コード解説
現在の日時を取得:
let now = new Date();
console.log(now.toLocaleString());new Date()は現在の日時を表す Date オブジェクトを作成します。toLocaleString()メソッドは日時をローカルの形式で文字列に変換します。- この行は現在の日時を人間が読みやすい形式で表示します。
特定の日時を設定:
let specificDate = new Date(2023, 0, 1);
console.log(specificDate.toDateString());new Date(2023, 0, 1)は2023年1月1日を表す Date オブジェクトを作成します。- JavaScript では月は0から始まるため、0は1月を表します。
toDateString()メソッドは日付部分のみを文字列として返します。
日付の計算:
specificDate.setDate(specificDate.getDate() + 7);
console.log(specificDate.toDateString());getDate()メソッドは日付（1-31）を取得します。setDate()メソッドは新しい日付を設定します。getDate() + 7は現在の日付に7を加えています（7日後）。- この操作により、
specificDateは7日後の日付に更新されます。
全体の流れ:
- まず、現在の日時を取得して表示します。
- 次に、特定の日付（2023年1月1日）を設定し、表示します。
- 最後に、その日付に7日を加えて新しい日付を計算し、表示します。
重要なポイント:
Dateオブジェクトは JavaScript で日付と時刻を扱うための基本的なツールです。- 月は0から始まる（0=1月、1=2月、…、11=12月）ことに注意が必要です。
setDate()メソッドは自動的に月や年を調整します。例えば、1月31日に7日を加えると、自動的に2月7日になります。
よく使用されるメソッド:
toLocaleString(): 日時を地域の形式で文字列に変換toDateString(): 日付部分のみを文字列として返すgetDate(),setDate(): 日を取得・設定- その他
getMonth(),getFullYear(),getHours()などがあります
このコードは、日付と時刻の操作の基本を示しています。日付の取得、設定、計算は多くのアプリケーションで必要となる重要な操作です。Date オブジェクトの使い方を理解することで、カレンダー機能やスケジュール管理など、時間に関連する様々な機能を実装できるようになります。
値の集合を管理／操作する – Arrayオブジェクト
Arrayオブジェクトは、複数の値を順序付けて格納し、操作するためのメソッドを提供します。
// 配列の作成と要素の追加
let fruits = ["Apple", "Banana"];
fruits.push("Orange"); // 末尾に追加
// 配列の要素を操作
console.log(fruits.length); // 3
console.log(fruits[1]); // "Banana"
// 配列のメソッドを使用
let upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // ["APPLE", "BANANA", "ORANGE"]出力結果：
3
Banana
[ 'APPLE', 'BANANA', 'ORANGE' ]ここでは、push()メソッドで配列に要素を追加し、lengthプロパティで配列の長さを取得しています。また、map()メソッドを使用して、各要素に対して関数を適用した新しい配列を作成しています。
コード解説
配列の作成:
let fruits = ["Apple", "Banana"];- 配列は複数の値を順序付けて格納するデータ構造です。
[]を使用して配列を作成し、要素をカンマで区切って列挙します。- この場合、
fruitsという名前の配列に “Apple” と “Banana” が格納されています。
要素の追加:
fruits.push("Orange");push()メソッドは配列の末尾に新しい要素を追加します。- この操作により、”Orange” が
fruits配列の最後に追加されます。
配列の長さを取得:
console.log(fruits.length); // 3lengthプロパティは配列の要素数を返します。- この時点で
fruits配列には3つの要素があるため、3が出力されます。
特定の要素にアクセス:
console.log(fruits[1]); // "Banana"- 配列の要素にはインデックス（添字）を使ってアクセスします。
- インデックスは0から始まるため、
fruitsは2番目の要素 “Banana” を返します。
配列のメソッドを使用（map）:
let upperFruits = fruits.map(fruit => fruit.toUpperCase());map()メソッドは配列の各要素に対して関数を適用し、新しい配列を作成します。fruit => fruit.toUpperCase()はアロー関数で、各要素を大文字に変換します。- 結果は新しい配列
upperFruitsに格納されます。
結果の表示:
console.log(upperFruits); // ["APPLE", "BANANA", "ORANGE"]- 変換された新しい配列がコンソールに出力されます。
全体の流れ:
- 配列を作成し、要素を追加します。
- 配列の長さと特定の要素にアクセスして表示します。
map()メソッドを使用して、全ての要素を大文字に変換した新しい配列を作成します。
重要なポイント:
- 配列は0からインデックスが始まることを覚えておくことが重要です。
push()は配列を直接変更しますが、map()は新しい配列を返します。- JavaScriptの配列は動的で、サイズを自由に変更できます。
このコードは、配列の基本的な操作と高度な機能を示しています。配列の作成、要素の追加、アクセス、そしてmap()のような高度なメソッドの使用方法を理解することは、JavaScriptプログラミングにおいて非常に重要です。これらの操作を使いこなすことで、データの効率的な管理と操作が可能になります。
まとめ
- オブジェクトはJavaScriptの基本的な構成要素であり、データと機能をカプセル化します。
- Stringオブジェクトは文字列の操作に使用され、テキストデータの処理に不可欠です。
- Numberオブジェクトは数値の操作と変換に使用され、数学的計算に重要です。
- Dateオブジェクトは日付と時刻の操作に使用され、時間関連の処理に必要不可欠です。
- Arrayオブジェクトは複数の値を管理し、データの集合を効率的に操作するために使用されます。
各オブジェクトのメソッドとプロパティを理解し、適切に活用することで、複雑なデータ処理や計算を簡潔に表現できるようになります。また、これらのオブジェクトを組み合わせることで、より高度なプログラムの作成が可能になります。
コメント