JavaScriptのSetメソッドについて学びます。

new Set()メソッド

new Set()コンストラクタに配列を渡します：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

add()メソッド

値を追加する：

letters.add("d");
letters.add("e");

同じ要素を追加しても、最初の1つしか保存されません：

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c"); // この行は無視されます

Set要素のリスト化

for..ofループを使ってすべてのSet要素（値）をリストアップできます：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// すべての要素をリストアップする
let text = "";
for (const x of letters) {
  text += x;
}

has()メソッド

指定した値がSet内に存在する場合、trueを返します：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// Setに "d" が含まれているか？
const answer = letters.has("d");

forEach()メソッド

forEach()メソッドは各Set要素に対して関数を呼び出します：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// すべてのエントリーをリストアップする
let text = "";
letters.forEach(function(value) {
  text += value;
});

values()メソッド

values()メソッドはSet内の値を持つIteratorオブジェクトを返します：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// すべての値を取得する
const myIterator = letters.values();

// すべての値をリストアップする
let text = "";
for (const entry of myIterator) {
  text += entry;
}

keys()メソッド

keys()メソッドはSet内の値を持つIteratorオブジェクトを返します：

注意: Setにはキーがないため、keys()はvalues()と同じ結果を返します。これにより、SetsはMapsと互換性があります。

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// Iteratorを作成する
const myIterator = letters.keys();

// すべての要素をリストアップする
let text = "";
for (const x of myIterator) {
  text += x;
}

entries()メソッド

entries()メソッドはSetから[value, value]のペアを持つIteratorを返します：

注意: entries()メソッドはオブジェクトから[key, value]のペアを返すことを意図していますが、Setにはキーがないため[value, value]のペアを返します。これにより、SetsはMapsと互換性があります。

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// すべてのエントリーを取得する
const myIterator = letters.entries();

// すべてのエントリーをリストアップする
let text = "";
for (const entry of myIterator) {
  text += entry;
}

JavaScriptのSetはユニークな値のコレクションです。

各値はSet内で一度しか出現しません。

値はどんな型でも構いません。プリミティブ値やオブジェクトです。

Setの作成方法

new Set()メソッド

new Set()コンストラクタに配列を渡します：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

空のSetを作成し、add()メソッドを使って値を追加する：

// Setを作成する
const letters = new Set();

// Setに値を追加する
letters.add("a");
letters.add("b");
letters.add("c");

変数を使ってSetを作成し、値を追加する：

// Setを作成する
const letters = new Set();

// 変数を作成する
const a = "a";
const b = "b";
const c = "c";

// 変数をSetに追加する
letters.add(a);
letters.add(b);
letters.add(c);

add()メソッド

値を追加する：

letters.add("d");
letters.add("e");

同じ要素を追加しても、最初の1つしか保存されません：

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c"); // この行は無視されます

要素のリスト化

for..ofループを使ってすべてのSet要素（値）をリストアップできます：

// Setを作成する
const letters = new Set(["a", "b", "c"]);

// すべての要素をリストアップする
let text = "";
for (const x of letters) {
  text += x;
}

Setはオブジェクトです

typeof演算子はオブジェクトを返します：

typeof letters;      // objectを返す

instanceof演算子はtrueを返します：

letters instanceof Set;  // trueを返す

Break文

Break文はループから抜け出します。

for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

上記の例では、ループカウンタ(i)が3のときにループを終了します。

Continue文

Continue文は特定の条件が発生した場合、そのイテレーションをスキップし、次のイテレーションに進みます。

for (let i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

JavaScriptラベル

JavaScript文にラベルを付けるには、文の前にラベル名とコロンを付けます。

labelname:
statements

Break文とContinue文は、コードブロックから「ジャンプアウト」できる唯一のJavaScript文です。

ラベル付きのBreakとContinue

ラベルを参照するBreak文は、任意のコードブロックから「ジャンプアウト」できます。

const cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
  text += cars[0] + "<br>";
  text += cars[1] + "<br>";
  break list;
  text += cars[2] + "<br>";
  text += cars[3] + "<br>";
}

コードブロックとは、{ と } で囲まれたコードの塊です。

Whileループ

ループは指定された条件がtrueである限り、ブロックのコードを実行します。

while (condition) {
  // 実行するコードブロック
}

例

次の例では、変数(i)が10未満である限り、ループ内のコードが繰り返し実行されます:

while (i < 10) {
  text += "The number is " + i;
  i++;
}

条件で使用する変数の増加を忘れると、ループが終了しなくなります。これはブラウザをクラッシュさせる原因になります。

Do Whileループ

do whileループはwhileループの変形です。このループは、条件がtrueであるかどうかをチェックする前に、コードブロックを少なくとも1回実行し、条件がtrueである限り繰り返します。

do {
  // 実行するコードブロック
}
while (condition);

例

次の例では、do whileループが使用されています。条件がfalseであっても、コードブロックが最初に1回は必ず実行されます。その後、条件がtrueである限り繰り返されます:

do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

条件で使用する変数の増加を忘れないようにしてください。そうしないと、ループが終了しなくなります！

ForとWhileの比較

前の章で学んだforループについて、whileループはステートメント1とステートメント3が省略されたものと言えます。

この例では、forループを使用してcars配列から車の名前を収集しています:

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (; cars[i];) {
  text += cars[i];
  i++;
}

この例では、whileループを使用してcars配列から車の名前を収集しています:

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

while (cars[i]) {
  text += cars[i];
  i++;
}

For Ofループ

JavaScriptのfor of文は、反復可能オブジェクトの値を反復処理します。

for (variable of iterable) {
  // 実行するコードブロック
}

variable – 各反復ごとに次のプロパティの値が変数に代入されます。変数はconst、let、またはvarで宣言できます。

iterable – 反復可能なプロパティを持つオブジェクトです。

ブラウザサポート

For/ofは2015年（ES6）にJavaScriptに追加されました。

Internet ExplorerではFor/ofはサポートされていません。

配列を反復処理する

例

const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x;
}

文字列を反復処理する

例

let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x;
}

For Inループ

JavaScriptのfor in文は、オブジェクトのプロパティをループします:

for (key in object) {
  // 実行するコードブロック
}

例

const person = {fname:"John", lname:"Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

例の説明

• for inループはpersonオブジェクトを反復処理します
• 各反復ではキー(x)が返されます
• キーを使用してそのキーの値にアクセスします
• キーの値はperson[x]で取得します

配列でのFor In

JavaScriptのfor in文は、配列のプロパティをループすることもできます:

for (variable in array) {
  code
}

例

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}

重要: インデックスの順序が重要な場合、配列でfor inを使用しないでください。

インデックスの順序は実装に依存し、配列の値が期待通りの順序でアクセスされない可能性があります。

インデックスの順序が重要な場合は、forループ、for ofループ、またはArray.forEach()を使用することが良いです。

Array.forEach()

forEach()メソッドは、各配列要素に対して1度だけ関数（コールバック関数）を呼び出します。

例

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value;
}

関数は3つの引数を取ります:

• アイテムの値
• アイテムのインデックス
• 配列自体

上記の例では、値パラメータのみを使用しています。以下のように書き直すこともできます:

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value;
}

ループは、コードブロックを何度も実行するために使用されます。

JavaScriptのループ

ループは便利であり、同じコードを何度も異なる値で実行したい場合に使用されます。

これは、配列を操作する場合に特に便利です:

次のように書かずに:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

次のように書くことができます:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

異なる種類のループ

JavaScriptは異なる種類のループをサポートしています:

• for – 指定された回数だけコードブロックをループします
• for/in – オブジェクトのプロパティをループします
• for/of – イテラブルオブジェクトの値をループします
• while – 指定された条件がtrueの間、コードブロックをループします
• do/while – 指定された条件がtrueの間、コードブロックをループします（最低1回は実行されます）

Forループ

for文は、3つのオプションの式でループを作成します:

for (expression 1; expression 2; expression 3) {
  // 実行するコードブロック
}

Expression 1は、コードブロックの実行前に1度だけ実行されます。

Expression 2は、ループの実行条件を定義します。

Expression 3は、コードブロックの実行後に毎回実行されます。

例

for (let i = 0; i < 5; i++) {
  text += "数値は " + i + "<br>";
}

上記の例から、以下を読み取ることができます:

• Expression 1は、ループが開始する前に変数を設定します（let i = 0）。
• Expression 2は、ループが実行される条件を定義します（iは5未満である必要があります）。
• Expression 3は、コードブロックが実行された後に値を増やします（i++）。

Expression 1

通常、Expression 1ではループで使用する変数を初期化します（let i = 0）。

これは常に必要なわけではありません。JavaScriptでは問題ありません。Expression 1はオプションです。

Expression 1で多くの値を初期化することができます（カンマで区切って）:

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

また、Expression 1を省略することもできます（ループが開始する前に値が設定されている場合など）:

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Expression 2

通常、Expression 2は初期変数の条件を評価するために使用されます。

これは常に必要なわけではありません。JavaScriptでは問題ありません。Expression 2もオプションです。

Expression 2がtrueを返す場合、ループは再び開始されます。falseを返す場合、ループは終了します。

Expression 2を省略する場合、ループ内にbreak文を提供する必要があります。そうしないと、ループが終了しません。これによりブラウザがクラッシュします。

Expression 3

通常、Expression 3は初期変数の値を増加させます。

これは常に必要なわけではありません。JavaScriptでは問題ありません。Expression 3もオプションです。

Expression 3は、負の増加（i–）、正の増加（i = i + 15）、その他何でも行うことができます。

Expression 3も省略することができます（ループ内で値を増加させる場合など）:

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

ループのスコープ

ループ内でvarを使用する場合:

var i = 5;

for (var i = 0; i < 10; i++) {
  // 何らかのコード
}

// ここではiは10です

ループ内でletを使用する場合:

let i = 5;

for (let i = 0; i < 10; i++) {
  // 何らかのコード
}

// ここではiは5です

最初の例ではvarを使用し、ループ内で宣言された変数はループ外の変数を再宣言します。

2番目の例ではletを使用し、ループ内で宣言された変数はループ外の変数を再宣言しません。

ループ内でletを使用して変数iを宣言する場合、その変数はループ内でのみ見えます。

Switch文は、異なる条件に基づいて異なるアクションを実行するために使用されます。

Switch文を使用して、実行する多くのコードブロックのうちの1つを選択します。

Syntax

switch (expression) {
  case x:
    // コードブロック
    break;
  case y:
    // コードブロック
    break;
  default:
    // コードブロック
}

Switch文の動作は次の通りです:

• Switch式は1度評価されます。
• 式の値は各caseの値と比較されます。
• 一致する場合、関連するコードブロックが実行されます。
• 一致するcaseがない場合、defaultのコードブロックが実行されます。

例

getDay()メソッドは、0から6の数字で曜日を返します。

(日曜日=0, 月曜日=1, 火曜日=2 ..)

この例では、曜日の数字を使用して曜日の名前を計算しています:

switch (new Date().getDay()) {
  case 0:
    day = "日曜日";
    break;
  case 1:
    day = "月曜日";
    break;
  case 2:
    day = "火曜日";
    break;
  case 3:
    day = "水曜日";
    break;
  case 4:
    day = "木曜日";
    break;
  case 5:
    day = "金曜日";
    break;
  case 6:
    day = "土曜日";
}

breakキーワード

JavaScriptはbreakキーワードに達すると、Switchブロックから抜け出します。

これにより、Switchブロック内の実行が停止します。

Switchブロックの最後のcaseにbreakを記述する必要はありません。ブロックはそこで終了します。

Note: break文を省略すると、評価が一致しなくても次のcaseが実行されます。

defaultキーワード

defaultキーワードは、caseと一致するものがない場合に実行するコードを指定します:

例

getDay()メソッドは、0から6の数字で曜日を返します。

もし今日が土曜日(6)でも日曜日(0)でもない場合、デフォルトのメッセージを表示します:

switch (new Date().getDay()) {
  case 6:
    text = "今日は土曜日です";
    break;
  case 0:
    text = "今日は日曜日です";
    break;
  default:
    text = "週末を楽しみにしています";
}

defaultはSwitchブロック内で最後のcaseである必要はありません:

例

switch (new Date().getDay()) {
  default:
    text = "週末を楽しみにしています";
    break;
  case 6:
    text = "今日は土曜日です";
    break;
  case 0:
    text = "今日は日曜日です";
}

defaultがSwitchブロック内の最後のcaseでない場合は、defaultのcaseもbreakで終了させることを忘れないでください。

共通のコードブロック

時々、異なるSwitchケースが同じコードブロックを使用することがあります。

この例では、case 4と5が同じコードブロックを共有し、0と6が別のコードブロックを共有しています:

例

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "週末が近づいています";
    break;
  case 0:
  case 6:
    text = "週末です";
    break;
  default:
    text = "週末を楽しみにしています";
}

Switchの詳細

複数のケースが同じケース値に一致する場合、最初のケースが選択されます。

一致するcaseが見つからない場合、プログラムはdefaultラベルに進みます。

defaultラベルが見つからない場合、Switchの後の文（ステートメント）に進みます。

厳密な比較

Switchのケースは厳密な比較（===）を使用します。

一致するためには、値は同じ型でなければなりません。

オペランドが同じ型である場合、厳密な比較はのみtrueになります。

この例では、xには一致するものがありません:

例

let x = "0";
switch (x) {
  case 0:
    text = "オフ";
    break;
  case 1:
    text = "オン";
    break;
  default:
    text = "値が見つかりません";
}

条件文は、異なる条件に基づいて異なるアクションを実行するために使用されます。

条件文

コードを書く際に、しばしば異なる条件で異なるアクションを行いたいと思うことがあります。

JavaScriptでは、次の条件文が利用可能です:

• 条件がtrueの場合、指定されたコードブロックを実行するにはifを使用します。
• 条件がfalseの場合、同じ条件で別のコードブロックを実行するにはelseを使用します。
• 最初の条件がfalseの場合に新しい条件をテストするにはelse ifを使用します。
• 多くの代替コードブロックを指定するにはswitchを使用します。

if文

条件がtrueの場合、指定されたJavaScriptコードブロックを実行するためにif文を使用します。

if (条件) {
  // 条件がtrueの場合に実行されるコードブロック
}

ifは小文字で記述します。大文字（IfまたはIF）を使用するとJavaScriptエラーが発生します。

例:

let hour = 10;
if (hour < 18) {
  greeting = "良い一日を";
}

greetingの結果は次の通りです:

良い一日を

else文

条件がfalseの場合、指定されたコードブロックを実行するためにelse文を使用します。

if (条件) {
  // 条件がtrueの場合に実行されるコードブロック
} else {
  // 条件がfalseの場合に実行されるコードブロック
}

例:

let hour = 10;
if (hour < 18) {
  greeting = "良い一日を";
} else {
  greeting = "良い夜を";
}

greetingの結果は次の通りです:

良い一日を

else if文

最初の条件がfalseの場合、新しい条件を指定するためにelse if文を使用します。

if (条件1) {
  // 条件1がtrueの場合に実行されるコードブロック
} else if (条件2) {
  // 条件1がfalseで条件2がtrueの場合に実行されるコードブロック
} else {
  // 条件1と条件2がどちらもfalseの場合に実行されるコードブロック
}

例:

let time = 12;
if (time < 10) {
  greeting = "おはようございます";
} else if (time < 20) {
  greeting = "良い一日を";
} else {
  greeting = "良い夜を";
}

greetingの結果は次の通りです:

良い一日を

比較演算子と論理演算子は、真偽をテストするために使用されます。

比較演算子

比較演算子は論理文で使用され、変数や値の等価性または差異を判断します。

例として、x = 5 とした場合、以下のテーブルは比較演算子を説明します:

使用方法

比較演算子は条件文で使用して、値を比較し、その結果に応じてアクションを取ることができます:

if (age < 18) {
  text = "アルコールを購入するには若すぎます";
}

このチュートリアルの次の章で条件文の使用方法についてさらに学びます。

論理演算子

論理演算子は変数や値の間の論理を決定するために使用されます。

例として、x = 6 および y = 3 とした場合、以下のテーブルは論理演算子を説明します:

条件（三項）演算子

JavaScriptには条件演算子も含まれており、ある条件に基づいて変数に値を割り当てます。

構文:

variablename = (condition) ? value1 : value2;

例:

let voteable = (age < 18) ? "アルコールを購入するには若すぎます" : "成人です";

もし変数 age が18未満の値であれば、変数 voteable の値は "アルコールを購入するには若すぎます" となります。それ以外の場合は "成人です" となります。

異なる型の比較

異なる型のデータを比較すると予期しない結果が得られることがあります。

文字列と数値を比較する場合、JavaScriptは比較を行う際に文字列を数値に変換します。空の文字列は0に変換され、非数値文字列は常にfalseになるNaNに変換されます。

二つの文字列を比較するとき、"2" は "12" より大きいと判断されます。なぜなら（辞書順で）1は2より小さいからです。

正しい結果を得るためには、比較する前に変数を適切な型に変換する必要があります:

age = Number(age);
if (isNaN(age)) {
  voteable = "数値ではありません";
} else {
  voteable = (age < 18) ? "アルコールを購入するには若すぎます" : "成人です";
}

Nullish結合演算子 (??)

??演算子は、最初の引数がnullish（nullまたはundefined）でない場合、その値を返します。そうでない場合は、第二引数を返します。

例:

let name = null;
let text = "欠落";
let result = name ?? text;

nullish演算子は2020年3月以降のすべてのブラウザでサポートされています:

• Chrome 80
• Edge 80
• Firefox 72
• Safari 13.1
• Opera 67

オプショナルチェイニング演算子 (?.)

?.演算子はオブジェクトがundefinedまたはnullの場合、エラーをスローせずにundefinedを返します。

例:

// オブジェクトを作成:
const car = {type:"Fiat", model:"500", color:"white"};
// 車の名前を取得:
document.getElementById("demo").innerHTML = car?.name;

オプショナルチェイニング演算子は2020年3月以降のすべてのブラウザでサポートされています:

• Chrome 80
• Edge 80
• Firefox 72
• Safari 13.1
• Opera 67