JavaScriptの構文 |

JavaScript の制御構文 if そして、比較演算子

JavaScriptには、プログラムの流れを制御するためのルールや命令の書き方があります。

これらを構文と呼びます。

特によく使われるのが if 構文です。

if 構文を使うと、特定の条件が満たされたときにだけ、特定の処理を実行することができます。

また、条件をチェックするために比較演算子が使われます。

if 構文の基本的な使い方

例 : 数値が10以上かどうかをチェックする

let number = 15;
if (number >= 10) {
  console.log("10以上の数値です");
} else {
  console.log("10未満の数値です");
}

意味 :

- number という名前の変数を作成し、15という数値を入れます。

- if (number >= 10) は、 number が10以上かどうかをチェックする条件です。

- number が10以上であれば、 console.log("10以上の数値です") が実行され、メッセージが表示されます。

- もし number が10未満であれば、 else の部分が実行され、 console.log("10未満の数値です") が実行されます。

比較演算子

演算子とは、2つの値を比較したり計算したりするための記号やキーワードのことです。

以下が主な比較演算子です：

1. === （厳密等価）

- 例 : number === 10

- 意味 : number が10と等しいかどうかをチェックします。値と型の両方が同じである必要があります。

2. !== （厳密不等価）

- 例 : number !== 10

- 意味 : number が10と等しくないかどうかをチェックします。値または型のいずれかが異なる場合に true となります。

3. > （大なり）

- 例 : number > 10

- 意味 : number が10より大きいかどうかをチェックします。

4. < （小なり）

- 例 : number < 10

- 意味 : number が10より小さいかどうかをチェックします。

5. >= （大なりイコール）

- 例 : number >= 10

- 意味 : number が10以上かどうかをチェックします。

6. <= （小なりイコール）

- 例 : number <= 10

- 意味 : number が10以下かどうかをチェックします。

条件の組み合わせ

複数の条件を組み合わせることもできます。

そのためには、論理演算子を使います。

論理とは、条件を組み合わせたり反転させたりする考え方です。論理演算子を使うと、複数の条件を一緒に扱うことができます：

1. && （論理AND）

例 : (10 <= number) && (number <= 20)

- 意味 : number が10以上かつ20以下であるかどうかをチェックします。この場合、両方の条件が満たされるときにだけ、 true になります。

2. || （論理OR）

例 : (number < 10) || (20 < number)

- 意味 : number が10未満または20より大きいかどうかをチェックします。この場合、どちらか一方の条件が満たされるときに、 true になります。

3. ! （論理NOT）

- 例 : !(number === 10)
　　例 : number !== 10

- 意味 : number が10と等しくないかどうかをチェックします。条件を反転させるために使います。この場合、 number が10と等しくないときに、 true になります。

まとめ

if 構文と比較演算子を使うと、プログラムの中で条件に基づいた処理を実行することができます。

これにより、より柔軟で複雑な動作を実現することができます。

条件を正しく設定し、適切な処理を行うことで、プログラムの流れを制御することができます。

JavaScript の制御構文 for...of

JavaScriptには、繰り返し処理（ループ）を行うための構文がいくつかあります。

その中でも特によく使われるのが for...of 構文です。 for...of 構文を使うと、配列などの反復可能なオブジェクトの各要素に対して、順番に繰り返し処理を行うことができます。

for...of 構文の基本的な使い方

例 : 配列の各要素を順番に表示する

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

意味 :

- fruits という名前の配列を作成し、["apple", "banana", "cherry"]という3つの文字列を格納します。

- for (let fruit of fruits) は、配列 fruits の各要素を順番に取り出して、変数 fruit に代入することを意味します。

- { console.log(fruit); } の部分は、 fruit の値をコンソールに表示する命令です。

- ループが実行されるたびに、配列の次の要素が fruit に代入され、その値がコンソールに表示されます。

結果として、以下のように表示されます：

   apple
   banana
   cherry

まとめ

for...of 構文を使うと、配列の各要素に対して、順番に繰り返し処理を行うことができます

これにより、配列の要素を一括で処理することができ、非常に便利です。

また、オブジェクトを使うと、複数の値をまとめて管理することができます。条件を正しく設定し、適切な処理を行うことで、プログラムの流れを制御することができます。

for...of と array.entries

for...of 構文と、配列の各要素のインデックス(位置)を同時に取得するために array.entries を使うことができます。

for...of と array.entries の基本的な使い方

例 : 配列の各要素とそのインデックスを順番に表示する

let fruits = ["apple", "banana", "cherry"];
for (let [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

意味 : - fruits という名前の配列を作成し、["apple", "banana", "cherry"]という3つの文字列を格納します。 - fruits.entries() は、配列 fruits の各要素とそのインデックス（位置）が組になった２つの値の配列の、配列を取得することができます。[[0, “apple”], [1, “banana”], [2, “cherry”]]という内容になり、配列の中に配列がある構造です。 - for (let [index, fruit] of fruits.entries()) は、配列の各要素とそのインデックスを順番に取り出し、変数 index と fruit に代入します。 - [index, fruit] のように角括弧で囲まれた部分は、分割代入と呼ばれる構文です。これにより、配列の要素を個別の変数に一度に代入することができます。　※分割代入とは、配列やオブジェクトの要素を個別の変数に一度に割り当てる方法です。たとえば、 [index, fruit] = [0, “apple”]とすることで、indexに0が代入され、fruit に ”apple”が代入されます。 - { console.log(index, fruit); } の部分は、 index と fruit の値をコンソールに表示する命令です。

結果として、以下のように表示されます：

　0 "apple"
　1 "banana"
　2 "cherry"

まとめ

for...of 構文と array.entries を組み合わせると、配列の各要素とそのインデックス（位置）を一緒に取り出して処理することができます。

これにより、配列の要素を扱う際に、その位置情報も同時に利用できるため、より柔軟で便利な操作が可能になります。

条件を正しく設定し、適切な処理を行うことで、プログラムの流れを制御することができます。

JavaScript の制御構文 for...of と Object.entries()

JavaScriptには、オブジェクトの各プロパティ（キーと値）に対して繰り返し処理を行うための for...of 構文と Object.entries() という方法があります。

Object.entries() を使うと、オブジェクトの各プロパティをキーと値のペアとして取得することができます。

この組み合わせを使うと、オブジェクトのプロパティを簡単に扱うことができます。

for...of と Object.entries() の基本的な使い方

例 : オブジェクトの各プロパティとその値を順番に表示する

let person = {
  name: "Alice",
  age: 30,
  isStudent: false
};
for (let [key, value] of Object.entries(person)) {
  console.log(key, value);
}

意味 :

- person という名前のオブジェクトを作成し、 name , age , isStudent というプロパティを持たせます。それぞれに値 "Alice" , 30 , false を設定しています。

- Object.entries(person) は、オブジェクト person の各プロパティをキーと値のペアとして取得します。

※プロパティとは、オブジェクトの中にある情報の単位で、キーと値のペアで構成されます。

※キーとは、プロパティの名前のことです。たとえば、 name , age , isStudent がキーです。

※値とは、キーに対応するデータのことです。たとえば、 "Alice" , 30 , false が値です。

- for (let [key, value] of Object.entries(person)) は、返された配列の各ペアを順番に取り出し、変数 key と value に代入します。

- [key, value] は、分割代入です。

- { console.log(key, value); } の部分は、 key と value の値をコンソールに表示する命令です。

- ループが実行されるたびに、オブジェクトの次のプロパティとその値が key と value に代入され、その値がコンソールに表示されます。

結果として、以下のように表示されます：

name "Alice"
age 30
isStudent false

まとめ

for...of 構文と Object.entries() メソッドを組み合わせると、オブジェクトの各プロパティとその値を一緒に取り出して処理することができます。

これにより、オブジェクトのプロパティを扱う際に、キーと値の両方を同時に利用できるため、より柔軟で便利な操作が可能になります。

条件を正しく設定し、適切な処理を行うことで、プログラムの流れを制御することができます。

JavaScript スプレッド構文によるコピー

JavaScriptには、オブジェクトや配列を簡単にコピーするための便利な方法があります。

それがスプレッド構文です。

スプレッド構文を使うと、元のオブジェクトや配列を変更せずに新しいオブジェクトや配列を作成できます。

スプレッド構文の基本的な使い方

例 : 配列のコピー

let originalArray = [1, 2, 3];
let copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]

意味 :

- originalArray という名前の配列を作成し、[1, 2, 3]という3つの数値を格納します。

- copiedArray という名前の新しい配列を作成し、スプレッド構文 [...originalArray] を使って originalArray の内容をコピーします。

- スプレッド構文は、配列やオブジェクトの中身を一つ一つ取り出して、新しい配列やオブジェクトに入れる方法です。つまり、originalArrayの各要素をcopiedArrayに入れています。

- console.log(copiedArray); は、新しく作成した配列 copiedArray の内容をコンソールに表示する命令です。

// [1, 2, 3] は、期待される出力結果を示しています。これは、コードを読む人がコンソールに何が表示されるかを理解しやすくするための説明です。実行には影響しません。

オブジェクトのコピー

スプレッド構文はオブジェクトのコピーにも使えます。

例 : オブジェクトのコピー

let originalObject = { name: "Alice", age: 30 };
let copiedObject = { ...originalObject };
console.log(copiedObject); // { name: "Alice", age: 30 }

意味 :

- originalObject という名前のオブジェクトを作成し、 name と age というプロパティにそれぞれ値 "Alice" と 30 を設定します。

- copiedObject という名前の新しいオブジェクトを作成し、スプレッド構文 { ...originalObject } を使って originalObject の内容をコピーします。

- console.log(copiedObject); は、新しく作成したオブジェクト copiedObject の内容をコンソールに表示する命令です。

- コメント // { name: "Alice", age: 30 } は、期待される出力結果を示しています。

これは、コードを読む人がコンソールに何が表示されるかを理解しやすくするための説明です。実行には影響しません。

まとめ

スプレッド構文は、配列やオブジェクトをコピーするための便利な方法です。

これにより、元のデータを変更せずに新しいデータを作成できるため、安全にデータを操作することができます。

スプレッド構文を使うことで、コードが簡潔で読みやすくなります。

文法

その他にも多数のプログラミングの文法がありますが、全てを知らなくてもプログラミングはすることができます。

また、JavaScript の特徴ですが、進化の早い言語で、開発がどんどん進んでいるので、古い構文は現代ではほとんど使う必要がない、という場合があります。

これらの文法の細かいことを知っていることで、クイズ番組の上級者のように、正解に近づけたりしますので、文法の細かいルールは、どしどし覚えていく必要があります。

これは、書くときに必要となる、というより、他の人のプログラムを読むときに必要となることが多いので、他の人と共同作業するときに必要となったら学んでいくというのがよいでしょう。