From 2b470b85772788b3ace19a802bf4b6468d478dbf Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Tue, 1 Aug 2023 22:19:09 -0700 Subject: [PATCH] ja: Format /web/javascript using Prettier (part 7) --- .../reference/operators/in/index.md | 88 +++++----- .../reference/operators/increment/index.md | 4 +- .../reference/operators/inequality/index.md | 42 ++--- .../reference/operators/instanceof/index.md | 73 ++++---- .../reference/operators/left_shift/index.md | 4 +- .../operators/left_shift_assignment/index.md | 2 +- .../reference/operators/less_than/index.md | 52 +++--- .../operators/less_than_or_equal/index.md | 48 ++--- .../reference/operators/logical_and/index.md | 58 ++++--- .../operators/logical_and_assignment/index.md | 2 +- .../reference/operators/logical_not/index.md | 26 +-- .../reference/operators/logical_or/index.md | 52 +++--- .../operators/logical_or_assignment/index.md | 4 +- .../operators/multiplication/index.md | 12 +- .../multiplication_assignment/index.md | 6 +- .../reference/operators/new.target/index.md | 40 +++-- .../reference/operators/new/index.md | 56 +++--- .../reference/operators/null/index.md | 22 +-- .../operators/nullish_coalescing/index.md | 33 ++-- .../nullish_coalescing_assignment/index.md | 2 +- .../operators/object_initializer/index.md | 164 +++++++++--------- .../operators/operator_precedence/index.md | 14 +- .../operators/optional_chaining/index.md | 33 ++-- .../operators/property_accessors/index.md | 41 ++--- .../reference/operators/remainder/index.md | 26 +-- .../operators/remainder_assignment/index.md | 8 +- .../reference/operators/right_shift/index.md | 8 +- .../operators/right_shift_assignment/index.md | 10 +- .../operators/spread_syntax/index.md | 62 +++---- .../operators/strict_equality/index.md | 34 ++-- .../operators/strict_inequality/index.md | 38 ++-- .../reference/operators/subtraction/index.md | 8 +- .../operators/subtraction_assignment/index.md | 6 +- .../reference/operators/super/index.md | 28 +-- .../reference/operators/this/index.md | 89 +++++----- .../reference/operators/typeof/index.md | 159 +++++++++-------- .../operators/unary_negation/index.md | 2 +- .../reference/operators/unary_plus/index.md | 12 +- .../operators/unsigned_right_shift/index.md | 4 +- .../unsigned_right_shift_assignment/index.md | 8 +- .../reference/operators/void/index.md | 16 +- .../reference/operators/yield/index.md | 40 ++--- .../reference/operators/yield_star_/index.md | 10 +- .../statements/async_function/index.md | 2 +- .../reference/statements/empty/index.md | 4 +- .../reference/statements/import/index.md | 2 +- .../reference/statements/switch/index.md | 16 +- .../reference/statements/throw/index.md | 14 +- .../reference/statements/try...catch/index.md | 2 +- .../reference/statements/var/index.md | 7 +- .../reference/statements/with/index.md | 2 +- .../javascript/reference/strict_mode/index.md | 2 +- .../reference/template_literals/index.md | 79 +++++---- .../reference/trailing_commas/index.md | 42 ++--- 54 files changed, 835 insertions(+), 783 deletions(-) diff --git a/files/ja/web/javascript/reference/operators/in/index.md b/files/ja/web/javascript/reference/operators/in/index.md index a2c3818d24b2fa..0e538554825e8d 100644 --- a/files/ja/web/javascript/reference/operators/in/index.md +++ b/files/ja/web/javascript/reference/operators/in/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/in ## 構文 ```js -prop in object +prop in object; ``` ### 引数 @@ -30,32 +30,32 @@ prop in object ```js // 配列 -let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -0 in trees // true を返す -3 in trees // true を返す -6 in trees // false を返す -'bay' in trees // false を返す (添字の指す値ではなく、添字の数値を指定しなければならない) -'length' in trees // true を返す (length は Array のプロパティ) -Symbol.iterator in trees // true を返す (配列は反復可能。 ES2015 以上で動作する) +let trees = ["redwood", "bay", "cedar", "oak", "maple"]; +0 in trees; // true を返す +3 in trees; // true を返す +6 in trees; // false を返す +"bay" in trees; // false を返す (添字の指す値ではなく、添字の数値を指定しなければならない) +"length" in trees; // true を返す (length は Array のプロパティ) +Symbol.iterator in trees; // true を返す (配列は反復可能。 ES2015 以上で動作する) // 定義済みオブジェクト -'PI' in Math // true を返す +"PI" in Math; // true を返す // ユーザー定義オブジェクト -let mycar = {make: 'Honda', model: 'Accord', year: 1998}; -'make' in mycar // true を返す -'model' in mycar // true を返す +let mycar = { make: "Honda", model: "Accord", year: 1998 }; +"make" in mycar; // true を返す +"model" in mycar; // true を返す ``` `in` 演算子の右側には、オブジェクトを指定しなければなりません。例えば、`String` コンストラクターで作成した文字列は指定できますが、文字列リテラルは指定できません。 ```js -let color1 = new String('green') -'length' in color1 // true を返す +let color1 = new String("green"); +"length" in color1; // true を返す -let color2 = 'coral' +let color2 = "coral"; // エラーが発生 (color2 は String オブジェクトではない) -'length' in color2 +"length" in color2; ``` ### 削除済みあるいは未定義状態のプロパティへの `in` の使用 @@ -63,42 +63,42 @@ let color2 = 'coral' [`delete`](/ja/docs/Web/JavaScript/Reference/Operators/delete) 演算子で削除されたプロパティについては、`in` 演算子は `false` を返します。 ```js -let mycar = {make: 'Honda', model: 'Accord', year: 1998} -delete mycar.make -'make' in mycar // false を返す +let mycar = { make: "Honda", model: "Accord", year: 1998 }; +delete mycar.make; +"make" in mycar; // false を返す -let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple') -delete trees[3] -3 in trees // false を返す +let trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +delete trees[3]; +3 in trees; // false を返す ``` {{jsxref("Global_Objects/undefined", "undefined")}} を設定しているが削除されていないプロパティについて、`in` 演算子は true を返します。 ```js -let mycar = {make: 'Honda', model: 'Accord', year: 1998} -mycar.make = undefined -'make' in mycar // true を返す +let mycar = { make: "Honda", model: "Accord", year: 1998 }; +mycar.make = undefined; +"make" in mycar; // true を返す ``` ```js -let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple') -trees[3] = undefined -3 in trees // true を返す +let trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +trees[3] = undefined; +3 in trees; // true を返す ``` `in` 演算子は、空の配列スロットに対して `false` を返します。直接アクセスしても `undefined` が返されます。 ```js -let empties = new Array(3) -empties[2] // undefined を返す -2 in empties // false を返す +let empties = new Array(3); +empties[2]; // undefined を返す +2 in empties; // false を返す ``` これを避けるためには、新しい配列が常に空でない値で埋められるようにするか、配列の終わりを超える位置に書き込まないようにしてください。 ```js -let empties = new Array(3).fill(undefined) -2 in empties // true を返す +let empties = new Array(3).fill(undefined); +2 in empties; // true を返す ``` ### 継承されたプロパティ @@ -106,7 +106,7 @@ let empties = new Array(3).fill(undefined) `in` 演算子は、プロトタイプチェーンのプロパティに対して `true` を返します。(*継承されていない*プロパティのみをチェックする場合は、代わりに {{jsxref("Object.prototype.hasOwnProperty()")}} を使用してください)。 ```js -'toString' in {} // true を返す +"toString" in {}; // true を返す ``` ### プライベートフィールドとメソッド @@ -118,17 +118,17 @@ let empties = new Array(3).fill(undefined) 以下のコードは、指定されたクラスが特定のプライベートメソッドやフィールドを持っているかどうかをチェックする静的関数です。 ```js - class ClassWithPrivateFeatures { - #a; - #b = null; - #c() {} - get #d() {} - static f(o) { - return #a in o && #b in o && #c in o && #d in o; - } +class ClassWithPrivateFeatures { + #a; + #b = null; + #c() {} + get #d() {} + static f(o) { + return #a in o && #b in o && #c in o && #d in o; } - ClassWithPrivateFeatures.f(new ClassWithPrivateFeatures()) // true を返す - ClassWithPrivateFeatures.f({}) // false を返す +} +ClassWithPrivateFeatures.f(new ClassWithPrivateFeatures()); // true を返す +ClassWithPrivateFeatures.f({}); // false を返す ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/increment/index.md b/files/ja/web/javascript/reference/operators/increment/index.md index f5cd83216af023..18f5eb1193cc33 100644 --- a/files/ja/web/javascript/reference/operators/increment/index.md +++ b/files/ja/web/javascript/reference/operators/increment/index.md @@ -12,8 +12,8 @@ slug: Web/JavaScript/Reference/Operators/Increment ## 構文 ```js -x++ -++x +x++; +++x; ``` ## 解説 diff --git a/files/ja/web/javascript/reference/operators/inequality/index.md b/files/ja/web/javascript/reference/operators/inequality/index.md index 68fff3fa4fbede..ee2021521ec29e 100644 --- a/files/ja/web/javascript/reference/operators/inequality/index.md +++ b/files/ja/web/javascript/reference/operators/inequality/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Inequality ## 構文 ```js -x != y +x != y; ``` ## 解説 @@ -20,9 +20,9 @@ x != y 不等価演算子は、そのオペランドが等しくないことを検査します。これは[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。 ```js -x != y +x != y; -!(x == y) +!(x == y); ``` 比較アルゴリズムの詳細については、[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子のページを参照して下さい。 @@ -44,39 +44,39 @@ x != y ### 型変換がない場合の比較 ```js -1 != 2; // true -"hello" != "hola"; // true +1 != 2; // true +"hello" != "hola"; // true -1 != 1; // false -"hello" != "hello"; // false +1 != 1; // false +"hello" != "hello"; // false ``` ### 型変換がある場合の比較 ```js -"1" != 1; // false -1 != "1"; // false -0 != false; // false -0 != null; // true -0 != undefined; // true -0 != !!null; // false (論理 NOT 演算子を参照) -0 != !!undefined; // false (論理 NOT 演算子を参照) -null != undefined; // false +"1" != 1; // false +1 != "1"; // false +0 != false; // false +0 != null; // true +0 != undefined; // true +0 != !!null; // false (論理 NOT 演算子を参照) +0 != !!undefined; // false (論理 NOT 演算子を参照) +null != undefined; // false const number1 = new Number(3); const number2 = new Number(3); -number1 != 3; // false -number1 != number2; // true +number1 != 3; // false +number1 != number2; // true ``` ### オブジェクトの比較 ```js -const object1 = {"key": "value"} -const object2 = {"key": "value"}; +const object1 = { key: "value" }; +const object2 = { key: "value" }; -object1 != object2 // true -object2 != object2 // false +object1 != object2; // true +object2 != object2; // false ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/instanceof/index.md b/files/ja/web/javascript/reference/operators/instanceof/index.md index e2506591bc3991..8c848e2abd9475 100644 --- a/files/ja/web/javascript/reference/operators/instanceof/index.md +++ b/files/ja/web/javascript/reference/operators/instanceof/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/instanceof ## 構文 ```js -object instanceof constructor +object instanceof constructor; ``` ### 引数 @@ -31,30 +31,30 @@ object instanceof constructor function C() {} function D() {} -let o = new C() +let o = new C(); // true : Object.getPrototypeOf(o) === C.prototype であるため -o instanceof C +o instanceof C; // false : D.prototype は o のプロトタイプチェーンのどこにも存在しないため -o instanceof D +o instanceof D; -o instanceof Object // true : なぜなら... -C.prototype instanceof Object // true であるため +o instanceof Object; // true : なぜなら... +C.prototype instanceof Object; // true であるため -C.prototype = {} -let o2 = new C() +C.prototype = {}; +let o2 = new C(); -o2 instanceof C // true +o2 instanceof C; // true // false : C.prototype は o のプロトタイプチェーンの // どこにも存在しないため -o instanceof C +o instanceof C; -D.prototype = new C() // 継承を使用 -let o3 = new D() -o3 instanceof D // true -o3 instanceof C // true : o3 のプロトタイプチェーンに C.prototype があるため +D.prototype = new C(); // 継承を使用 +let o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true : o3 のプロトタイプチェーンに C.prototype があるため ``` なお、 `instanceof` の値の検査結果はコンストラクターの `prototype` プロパティが変化すると変わることがあります。また、オブジェクトのプロトタイプを `Object.setPrototypeOf` を用いて変更した場合や、標準外の `__proto__` プロパティを用いた場合も変わることがあります。 @@ -74,16 +74,16 @@ o3 instanceof C // true : o3 のプロトタイプチェーンに C.prototype 以下の例では、 `instanceof` を `String` オブジェクトに使用した場合の動作を示しています。 ```js -let literalString = 'これは文字列リテラルです'; -let stringObject = new String('コンストラクターで作成された String です'); +let literalString = "これは文字列リテラルです"; +let stringObject = new String("コンストラクターで作成された String です"); -literalString instanceof String; // false : 文字列リテラルは String ではない -stringObject instanceof String; // true +literalString instanceof String; // false : 文字列リテラルは String ではない +stringObject instanceof String; // true -literalString instanceof Object; // false : 文字列リテラルは Object ではない -stringObject instanceof Object; // true +literalString instanceof Object; // false : 文字列リテラルは Object ではない +stringObject instanceof Object; // true -stringObject instanceof Date; // false +stringObject instanceof Date; // false ``` ### instanceof を Date に対して使用 @@ -93,9 +93,9 @@ stringObject instanceof Date; // false ```js let myDate = new Date(); -myDate instanceof Date; // true -myDate instanceof Object; // true -myDate instanceof String; // false +myDate instanceof Date; // true +myDate instanceof Object; // true +myDate instanceof String; // false ``` ### Object.create() で生成された Object @@ -103,8 +103,7 @@ myDate instanceof String; // false 以下の例では、 `instanceof` を `Object.create()` で生成したオブジェクトに使用した場合の動作を示しています。 ```js -function Shape() { -} +function Shape() {} function Rectangle() { Shape.call(this); // スーパークラスのコンストラクターを呼び出す。 @@ -116,18 +115,18 @@ Rectangle.prototype.constructor = Rectangle; let rect = new Rectangle(); -rect instanceof Object; // true -rect instanceof Shape; // true +rect instanceof Object; // true +rect instanceof Shape; // true rect instanceof Rectangle; // true -rect instanceof String; // false +rect instanceof String; // false -let literalObject = {}; -let nullObject = Object.create(null); +let literalObject = {}; +let nullObject = Object.create(null); nullObject.name = "My object"; -literalObject instanceof Object; // true : すべてのオブジェクトリテラルは Object.prototype をプロトタイプとして持つ -({}) instanceof Object; // true : 上記と同じ -nullObject instanceof Object; // false : プロトタイプはプロトタイプチェーンの末尾 (null) +literalObject instanceof Object; // true : すべてのオブジェクトリテラルは Object.prototype をプロトタイプとして持つ +({}) instanceof Object; // true : 上記と同じ +nullObject instanceof Object; // false : プロトタイプはプロトタイプチェーンの末尾 (null) ``` ### `mycar` が `Car` 型および `Object` 型であることを示す @@ -140,9 +139,9 @@ function Car(make, model, year) { this.model = model; this.year = year; } -let mycar = new Car('Honda', 'Accord', 1998) -let a = mycar instanceof Car // true を返す -let b = mycar instanceof Object // true を返す +let mycar = new Car("Honda", "Accord", 1998); +let a = mycar instanceof Car; // true を返す +let b = mycar instanceof Object; // true を返す ``` ### instanceof の否定 diff --git a/files/ja/web/javascript/reference/operators/left_shift/index.md b/files/ja/web/javascript/reference/operators/left_shift/index.md index cb0e0ae3cdf9c8..33c029fb3773bf 100644 --- a/files/ja/web/javascript/reference/operators/left_shift/index.md +++ b/files/ja/web/javascript/reference/operators/left_shift/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Left_shift ## 構文 ```js -a << b +a << b; ``` ## 解説 @@ -28,7 +28,7 @@ a << b ``` 任意の数 `x` を `y` ビット分だけ左にビット単位にずらすと、 `x * 2 ** y` になります。 - ですから、例えば `9 << 3` は `9 * (2 ** 3) = 9 * (8) = 72` になります。 +ですから、例えば `9 << 3` は `9 * (2 ** 3) = 9 * (8) = 72` になります。 ## 例 diff --git a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md index 310b0b9229e742..ee812a68d63673 100644 --- a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Left_shift_assignment ## 構文 ```js -x <<= y // x = x << y +x <<= y; // x = x << y ``` ## 例 diff --git a/files/ja/web/javascript/reference/operators/less_than/index.md b/files/ja/web/javascript/reference/operators/less_than/index.md index 633491906f75dd..7ed1821f933374 100644 --- a/files/ja/web/javascript/reference/operators/less_than/index.md +++ b/files/ja/web/javascript/reference/operators/less_than/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Less_than ## 構文 ```js -x < y +x < y; ``` ## 解説 @@ -36,57 +36,57 @@ x < y ### 文字列と文字列の比較 ```js -console.log("a" < "b"); // true -console.log("a" < "a"); // false -console.log("a" < "3"); // false +console.log("a" < "b"); // true +console.log("a" < "a"); // false +console.log("a" < "3"); // false ``` ### 文字列と数値の比較 ```js -console.log("5" < 3); // false -console.log("3" < 3); // false -console.log("3" < 5); // true +console.log("5" < 3); // false +console.log("3" < 3); // false +console.log("3" < 5); // true -console.log("hello" < 5); // false -console.log(5 < "hello"); // false +console.log("hello" < 5); // false +console.log(5 < "hello"); // false -console.log("5" < 3n); // false -console.log("3" < 5n); // true +console.log("5" < 3n); // false +console.log("3" < 5n); // true ``` ### 数値と数値の比較 ```js -console.log(5 < 3); // false -console.log(3 < 3); // false -console.log(3 < 5); // true +console.log(5 < 3); // false +console.log(3 < 3); // false +console.log(3 < 5); // true ``` ### Number と BigInt の比較 ```js -console.log(5n < 3); // false -console.log(3 < 5n); // true +console.log(5n < 3); // false +console.log(3 < 5n); // true ``` ### 論理値、null、undefined、NaN の比較 ```js -console.log(true < false); // false -console.log(false < true); // true +console.log(true < false); // false +console.log(false < true); // true -console.log(0 < true); // true -console.log(true < 1); // false +console.log(0 < true); // true +console.log(true < 1); // false -console.log(null < 0); // false -console.log(null < 1); // true +console.log(null < 0); // false +console.log(null < 1); // true -console.log(undefined < 3); // false -console.log(3 < undefined); // false +console.log(undefined < 3); // false +console.log(3 < undefined); // false -console.log(3 < NaN); // false -console.log(NaN < 3); // false +console.log(3 < NaN); // false +console.log(NaN < 3); // false ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md index d1d0b167e69cf3..293500c06c7697 100644 --- a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md +++ b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Less_than_or_equal ## 構文 ```js -x <= y +x <= y; ``` ## 解説 @@ -24,56 +24,56 @@ x <= y ### 文字列と文字列の比較 ```js -console.log("a" <= "b"); // true -console.log("a" <= "a"); // true -console.log("a" <= "3"); // false +console.log("a" <= "b"); // true +console.log("a" <= "a"); // true +console.log("a" <= "3"); // false ``` ### 文字列と数値の比較 ```js -console.log("5" <= 3); // false -console.log("3" <= 3); // true -console.log("3" <= 5); // true +console.log("5" <= 3); // false +console.log("3" <= 3); // true +console.log("3" <= 5); // true -console.log("hello" <= 5); // false -console.log(5 <= "hello"); // false +console.log("hello" <= 5); // false +console.log(5 <= "hello"); // false ``` ### 数値と数値の比較 ```js -console.log(5 <= 3); // false -console.log(3 <= 3); // true -console.log(3 <= 5); // true +console.log(5 <= 3); // false +console.log(3 <= 3); // true +console.log(3 <= 5); // true ``` ### Number と BigInt の比較 ```js -console.log(5n <= 3); // false -console.log(3 <= 3n); // true -console.log(3 <= 5n); // true +console.log(5n <= 3); // false +console.log(3 <= 3n); // true +console.log(3 <= 5n); // true ``` ### 論理値、null、undefined、NaN の比較 ```js -console.log(true <= false); // false -console.log(true <= true); // true -console.log(false <= true); // true +console.log(true <= false); // false +console.log(true <= true); // true +console.log(false <= true); // true -console.log(true <= 0); // false -console.log(true <= 1); // true +console.log(true <= 0); // false +console.log(true <= 1); // true -console.log(null <= 0); // true -console.log(1 <= null); // false +console.log(null <= 0); // true +console.log(1 <= null); // false console.log(undefined <= 3); // false console.log(3 <= undefined); // false -console.log(3 <= NaN); // false -console.log(NaN <= 3); // false +console.log(3 <= NaN); // false +console.log(NaN <= 3); // false ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/logical_and/index.md b/files/ja/web/javascript/reference/operators/logical_and/index.md index e9189615cf78ad..0fb267f069b290 100644 --- a/files/ja/web/javascript/reference/operators/logical_and/index.md +++ b/files/ja/web/javascript/reference/operators/logical_and/index.md @@ -14,7 +14,7 @@ slug: Web/JavaScript/Reference/Operators/Logical_AND ## 構文 ```js -expr1 && expr2 +expr1 && expr2; ``` ## 解説 @@ -35,9 +35,9 @@ false に変換することができる式の例を示します。 論理積演算子は次のように、論理型でない値はそのまま温存して返します。 ```js -result = '' && 'foo'; // result には "" (空文字列) が代入される -result = 2 && 0; // result には 0 が代入される -result = 'foo' && 4; // result には 4 が代入される +result = "" && "foo"; // result には "" (空文字列) が代入される +result = 2 && 0; // result には 0 が代入される +result = "foo" && 4; // result には 4 が代入される ``` `&&` 演算子では論理値以外のオペランドを使用することができますが、返値が常に[論理型プリミティブ](/ja/docs/Web/JavaScript/Data_structures#論理型)に変換することが可能であるため、論理演算子と見なすことができます。 @@ -59,10 +59,16 @@ result = 'foo' && 4; // result には 4 が代入される 以下の例を参照してください。 ```js -function A() { console.log('called A'); return false; } -function B() { console.log('called B'); return true; } - -console.log( A() && B() ); +function A() { + console.log("called A"); + return false; +} +function B() { + console.log("called B"); + return true; +} + +console.log(A() && B()); // 関数 A の呼び出しによって "called A" をログ出力し、 // && が false に評価され（関数 A が false を返し）、それから false をコンソールに出力します。 // 論理積演算子はここで短絡となり、関数 B は無視されます。 @@ -73,9 +79,9 @@ console.log( A() && B() ); 以下の式は同じであるように見えるかもしれませんが、異なります。 `&&` 演算子は `||` 演算子よりも先に実行されるからです（[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)を参照）。 ```js -false || true && true // true を返す -true && (false || false) // false を返す -(2 == 3) || (4 < 0) && (1 == 1) // false を返す +false || true && true; // true を返す +true && (false || false); // false を返す +(2 == 3) || (4 < 0) && (1 == 1); // false を返す ``` ## 例 @@ -85,15 +91,15 @@ true && (false || false) // false を返す 以下のコードは `&&` (論理積) 演算子の例を示しています。 ```js -a1 = true && true // t && t は true を返す -a2 = true && false // t && f は false を返す -a3 = false && true // f && t は false を返す -a4 = false && (3 == 4) // f && f は false を返す -a5 = 'Cat' && 'Dog' // t && t は "Dog" を返す -a6 = false && 'Cat' // f && t は false を返す -a7 = 'Cat' && false // t && f は false を返す -a8 = '' && false // f && f は "" を返す -a9 = false && '' // f && f は false を返す +a1 = true && true; // t && t は true を返す +a2 = true && false; // t && f は false を返す +a3 = false && true; // f && t は false を返す +a4 = false && 3 == 4; // f && f は false を返す +a5 = "Cat" && "Dog"; // t && t は "Dog" を返す +a6 = false && "Cat"; // f && t は false を返す +a7 = "Cat" && false; // t && f は false を返す +a8 = "" && false; // f && f は "" を返す +a9 = false && ""; // f && f は false を返す ``` ### 論理型の変換規則 @@ -103,13 +109,13 @@ a9 = false && '' // f && f は false を返す **論理型**に関する以下の操作は、 ```js -bCondition1 && bCondition2 +bCondition1 && bCondition2; ``` 常に以下のものと等しくなります。 ```js -!(!bCondition1 || !bCondition2) +!(!bCondition1 || !bCondition2); ``` #### OR から AND への変換 @@ -117,13 +123,13 @@ bCondition1 && bCondition2 **論理型**に関する以下の操作は、 ```js -bCondition1 || bCondition2 +bCondition1 || bCondition2; ``` 常に以下のものと等しくなります。 ```js -!(!bCondition1 && !bCondition2) +!(!bCondition1 && !bCondition2); ``` ### 入れ子になった括弧の除去 @@ -133,13 +139,13 @@ bCondition1 || bCondition2 以下の**論理型**に関する複合操作は、 ```js -bCondition1 || (bCondition2 && bCondition3) +bCondition1 || (bCondition2 && bCondition3); ``` 常に以下のものと等しくなります。 ```js -bCondition1 || bCondition2 && bCondition3 +bCondition1 || (bCondition2 && bCondition3); ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md index a128b4321b918f..55b1ddda423f88 100644 --- a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment ## 構文 ```js -expr1 &&= expr2 +expr1 &&= expr2; ``` ## 解説 diff --git a/files/ja/web/javascript/reference/operators/logical_not/index.md b/files/ja/web/javascript/reference/operators/logical_not/index.md index c6ba34b526e9be..f3800f16e57a8c 100644 --- a/files/ja/web/javascript/reference/operators/logical_not/index.md +++ b/files/ja/web/javascript/reference/operators/logical_not/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Logical_NOT ## 構文 ```js -!expr +!expr; ``` ## 解説 @@ -38,10 +38,10 @@ false に変換することができる式の例を示します。 以下のコードは `!` (論理否定) 演算子の例を示しています。 ```js -n1 = !true // !t は false を返す -n2 = !false // !f は true を返す -n3 = !'' // !f は true を返す -n4 = !'Cat' // !t は false を返す +n1 = !true; // !t は false を返す +n2 = !false; // !f は true を返す +n3 = !""; // !f は true を返す +n4 = !"Cat"; // !t は false を返す ``` ### 二重否定 (`!!`) @@ -51,12 +51,12 @@ n4 = !'Cat' // !t は false を返す 同じ変換は {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} 関数を通じて行うこともできます。 ```js -n1 = !!true // !!truthy は true を返す -n2 = !!{} // !!truthy は true: *あらゆる*オブジェクトは真値になります... -n3 = !!(new Boolean(false)) // ... .valueOF() が false の Boolean オブジェクトであっても -n4 = !!false // !!falsy は false を返す -n5 = !!"" // !!falsy は false を返す -n6 = !!Boolean(false) // !!falsy は false を返す +n1 = !!true; // !!truthy は true を返す +n2 = !!{}; // !!truthy は true: *あらゆる*オブジェクトは真値になります... +n3 = !!new Boolean(false); // ... .valueOF() が false の Boolean オブジェクトであっても +n4 = !!false; // !!falsy は false を返す +n5 = !!""; // !!falsy は false を返す +n6 = !!Boolean(false); // !!falsy は false を返す ``` ### 否定同士の変換 @@ -64,13 +64,13 @@ n6 = !!Boolean(false) // !!falsy は false を返す 以下の操作を**論理値**で行った場合、 ```js -!!bCondition +!!bCondition; ``` 常に以下のものと等しくなります。 ```js -bCondition +bCondition; ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/logical_or/index.md b/files/ja/web/javascript/reference/operators/logical_or/index.md index 18645edf2db386..2155307bd8b034 100644 --- a/files/ja/web/javascript/reference/operators/logical_or/index.md +++ b/files/ja/web/javascript/reference/operators/logical_or/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Logical_OR ## 構文 ```js -expr1 || expr2 +expr1 || expr2; ``` ## 解説 @@ -40,10 +40,16 @@ false に変換されうる式の例を示します。 短絡とは、上記の `expr` の部分が**評価されず**、したがって、これを行うことの副作用が効果を及ぼさないことを意味します（例えば、 `expr` が関数呼び出しであった場合、この場では呼び出されません）。これは、最初のオペランドが評価された時点で、すでに演算子の値が決定しているためです。例を示します。 ```js -function A(){ console.log('called A'); return false; } -function B(){ console.log('called B'); return true; } - -console.log( B() || A() ); +function A() { + console.log("called A"); + return false; +} +function B() { + console.log("called B"); + return true; +} + +console.log(B() || A()); // 関数呼び出しによって "called B" がログ出力され、 // それから true (演算子の結果の値) が出力されます。 ``` @@ -53,8 +59,8 @@ console.log( B() || A() ); 以下の式は同じであるように見えるかもしれませんが、異なります。 `&&` 演算子は `||` 演算子よりも先に実行されるからです（[演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)を参照）。 ```js -true || false && false // true を返す。 && が先に実行されるため -(true || false) && false // false を返す。演算子の優先順位が適用されないため +true || false && false; // true を返す。 && が先に実行されるため +(true || false) && false; // false を返す。演算子の優先順位が適用されないため ``` ## 例 @@ -64,16 +70,16 @@ true || false && false // true を返す。 && が先に実行されるた 以下のコードは `||` (論理和) 演算子の例を示しています。 ```js -o1 = true || true // t || t は true を返す -o2 = false || true // f || t は true を返す -o3 = true || false // t || f は true を返す -o4 = false || (3 == 4) // f || f は false を返す -o5 = 'Cat' || 'Dog' // t || t は "Cat" を返す -o6 = false || 'Cat' // f || t は "Cat" を返す -o7 = 'Cat' || false // t || f は "Cat" を返す -o8 = '' || false // f || f は false を返す -o9 = false || '' // f || f は "" を返す -o10 = false || varObject // f || オブジェクトは varObject を返す +o1 = true || true; // t || t は true を返す +o2 = false || true; // f || t は true を返す +o3 = true || false; // t || f は true を返す +o4 = false || 3 == 4; // f || f は false を返す +o5 = "Cat" || "Dog"; // t || t は "Cat" を返す +o6 = false || "Cat"; // f || t は "Cat" を返す +o7 = "Cat" || false; // t || f は "Cat" を返す +o8 = "" || false; // f || f は false を返す +o9 = false || ""; // f || f は "" を返す +o10 = false || varObject; // f || オブジェクトは varObject を返す ``` > **メモ:** この演算子を使用していくつかの変数に既定値を提供する場合、*偽値*が使用されないことに注意してください。 {{jsxref("null")}} や {{jsxref("undefined")}} をフィルタリングする必要がある場合は、[Null 合体演算子](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)の使用を検討してください。 @@ -85,13 +91,13 @@ o10 = false || varObject // f || オブジェクトは varObject を返す **論理型**に関する以下の操作は、 ```js -bCondition1 && bCondition2 +bCondition1 && bCondition2; ``` 常に以下のものと等しくなります。 ```js -!(!bCondition1 || !bCondition2) +!(!bCondition1 || !bCondition2); ``` #### OR から AND への変換 @@ -99,13 +105,13 @@ bCondition1 && bCondition2 **論理型**に関する以下の操作は、 ```js -bCondition1 || bCondition2 +bCondition1 || bCondition2; ``` 常に以下のものと等しくなります。 ```js -!(!bCondition1 && !bCondition2) +!(!bCondition1 && !bCondition2); ``` ### 入れ子になった括弧の除去 @@ -115,13 +121,13 @@ bCondition1 || bCondition2 **論理型**に関する以下の複合操作は、 ```js -bCondition1 && (bCondition2 || bCondition3) +bCondition1 && (bCondition2 || bCondition3); ``` 常に以下のものと等しくなります。 ```js -!(!bCondition1 || !bCondition2 && !bCondition3) +!(!bCondition1 || (!bCondition2 && !bCondition3)); ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md index 890fa3feebf90c..6f09e77e857a7f 100644 --- a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment ## 構文 ```js -expr1 ||= expr2 +expr1 ||= expr2; ``` ## 解説 @@ -50,7 +50,7 @@ x = x || y; "lyrics" 要素が空の場合は、既定値を表示します。 ```js -document.getElementById('lyrics').textContent ||= 'No lyrics.' +document.getElementById("lyrics").textContent ||= "No lyrics."; ``` ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。 diff --git a/files/ja/web/javascript/reference/operators/multiplication/index.md b/files/ja/web/javascript/reference/operators/multiplication/index.md index eb279696cfbc7e..58dfeaac5e3c1f 100644 --- a/files/ja/web/javascript/reference/operators/multiplication/index.md +++ b/files/ja/web/javascript/reference/operators/multiplication/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Multiplication ## 構文 ```js -x * y +x * y; ``` ## 例 @@ -20,21 +20,21 @@ x * y ### 数値を用いた乗算 ```js - 2 * 2 // 4 --2 * 2 // -4 +2 * 2; // 4 +-2 * 2; // -4 ``` ### 無限大との乗算 ```js -Infinity * 0 // NaN -Infinity * Infinity // Infinity +Infinity * 0; // NaN +Infinity * Infinity; // Infinity ``` ### 非数との乗算 ```js -'foo' * 2 // NaN +"foo" * 2; // NaN ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md index 1380eb4c18fd8c..37729aea009b27 100644 --- a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Multiplication_assignment ## 構文 ```js -x *= y // x = x * y +x *= y; // x = x * y ``` ## 例 @@ -23,8 +23,8 @@ x *= y // x = x * y // 次の変数を想定 // bar = 5 -bar *= 2 // 10 -bar *= 'foo' // NaN +bar *= 2; // 10 +bar *= "foo"; // NaN ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/new.target/index.md b/files/ja/web/javascript/reference/operators/new.target/index.md index 2cb373b9a434a9..5e0f1f0aa2137d 100644 --- a/files/ja/web/javascript/reference/operators/new.target/index.md +++ b/files/ja/web/javascript/reference/operators/new.target/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/new.target ## 構文 ```js -new.target +new.target; ``` ## 解説 @@ -35,12 +35,14 @@ new.target ```js function Foo() { - if (!new.target) { throw 'Foo() must be called with new' } - console.log('Foo instantiated with new') + if (!new.target) { + throw "Foo() must be called with new"; + } + console.log("Foo instantiated with new"); } -new Foo() // "Foo instantiated with new" を出力 -Foo() // "Foo() must be called with new" 例外が発生 +new Foo(); // "Foo instantiated with new" を出力 +Foo(); // "Foo() must be called with new" 例外が発生 ``` ### コンストラクターにおける new\.target @@ -50,20 +52,32 @@ Foo() // "Foo() must be called with new" 例外が発生 ```js class A { constructor() { - console.log(new.target.name) + console.log(new.target.name); } } -class B extends A { constructor() { super() } } +class B extends A { + constructor() { + super(); + } +} -let a = new A() // logs "A" -let b = new B() // logs "B" +let a = new A(); // logs "A" +let b = new B(); // logs "B" -class C { constructor() { console.log(new.target) } } -class D extends C { constructor() { super() } } +class C { + constructor() { + console.log(new.target); + } +} +class D extends C { + constructor() { + super(); + } +} -let c = new C() // logs class C{constructor(){console.log(new.target);}} -let d = new D() // logs class D extends C{constructor(){super();}} +let c = new C(); // logs class C{constructor(){console.log(new.target);}} +let d = new D(); // logs class D extends C{constructor(){super();}} ``` 上記の `C` および `D` クラスの例から、 `new.target` は初期化されたクラスのクラス定義を指しているように見えます。たとえば、`d` を `new D()` で初期化した場合は、 `D` のクラス定義が出力され、同様に `c` の場合は `C` のクラスが出力されます。 diff --git a/files/ja/web/javascript/reference/operators/new/index.md b/files/ja/web/javascript/reference/operators/new/index.md index c5281390eb8727..917f92844e5b50 100644 --- a/files/ja/web/javascript/reference/operators/new/index.md +++ b/files/ja/web/javascript/reference/operators/new/index.md @@ -11,8 +11,8 @@ slug: Web/JavaScript/Reference/Operators/new ## 構文 -```js -new constructor[([arguments])] +```js-nolint +new constructor[([arguments])]; ``` ### 引数 @@ -29,29 +29,29 @@ new constructor[([arguments])] 1. 空のプレーンな JavaScript オブジェクトを生成します。 2. 新しいオブジェクトにプロパティ (`__proto__`) を追加し、コンストラクター関数のプロトタイプオブジェクトに結びつけます。 - > **メモ:** コンストラクター関数のプロトタイプに追加されたプロトタイプやオブジェクトは、そのためそのコンストラクター関数で（`new` を使用して）生成されたすべてのインスタンスからアクセスできます。 + > **メモ:** コンストラクター関数のプロトタイプに追加されたプロトタイプやオブジェクトは、そのためそのコンストラクター関数で（`new` を使用して）生成されたすべてのインスタンスからアクセスできます。 3. 新しく生成されたオブジェクトインスタンスを `this` コンテキストとして結びつけます。 - （すなわち、コンストラクター関数内の `this` へのすべての参照は、最初のステップで作成されたオブジェクトを参照するようになります。） + （すなわち、コンストラクター関数内の `this` へのすべての参照は、最初のステップで作成されたオブジェクトを参照するようになります。） 4. 関数がオブジェクトを返さない場合は `this` を返します。 ユーザー定義のオブジェクトを生成するには、2 つのステップが必要です。 1. オブジェクトの名前とプロパティを指定する関数を書くことで、オブジェクトの型を定義します。 - 例えば、オブジェクト `Foo` を生成するコンストラクター関数は以下のようになります。 + 例えば、オブジェクト `Foo` を生成するコンストラクター関数は以下のようになります。 - ```js - function Foo(bar1, bar2) { - this.bar1 = bar1; - this.bar2 = bar2; - } - ``` + ```js + function Foo(bar1, bar2) { + this.bar1 = bar1; + this.bar2 = bar2; + } + ``` 2. `new` 演算子を使用して、オブジェクトのインスタンスを生成します。 - ```js - var myFoo = new Foo('Bar 1', 2021); - ``` + ```js + var myFoo = new Foo("Bar 1", 2021); + ``` > **メモ:** オブジェクトは、別のオブジェクトそのものをプロパティとして持つことができます。後述の例をご覧ください。 @@ -72,18 +72,18 @@ function Car() {} car1 = new Car(); car2 = new Car(); -console.log(car1.color); // undefined +console.log(car1.color); // undefined -Car.prototype.color = 'original color'; -console.log(car1.color); // 'original color' +Car.prototype.color = "original color"; +console.log(car1.color); // 'original color' -car1.color = 'black'; -console.log(car1.color); // 'black' +car1.color = "black"; +console.log(car1.color); // 'black' console.log(Object.getPrototypeOf(car1).color); // 'original color' console.log(Object.getPrototypeOf(car2).color); // 'original color' -console.log(car1.color); // 'black' -console.log(car2.color); // 'original color' +console.log(car1.color); // 'black' +console.log(car2.color); // 'original color' ``` > **メモ:** コンストラクター関数は通常の関数と同様に（つまり `new` 演算子なしで）呼び出すことができますが、この場合、新しいオブジェクトは作成されず、`this` の値も異なります。 @@ -105,7 +105,7 @@ function Car(make, model, year) { これで、以下のようにして `myCar` という名前のオブジェクトを生成できます。 ```js -var myCar = new Car('Eagle', 'Talon TSi', 1993); +var myCar = new Car("Eagle", "Talon TSi", 1993); ``` この構文は `myCar` を生成して、プロパティに特定の値を代入しています。`myCar.make` の値は文字列 "Eagle"、`myCar.year` の値は整数 1993 などとなります。 @@ -113,7 +113,7 @@ var myCar = new Car('Eagle', 'Talon TSi', 1993); `new` を呼び出して、`car` オブジェクトをいくつも生成できます。例えば、 ```js -var kensCar = new Car('Nissan', '300ZX', 1992); +var kensCar = new Car("Nissan", "300ZX", 1992); ``` ### それ自身が別のオブジェクトであるプロパティ @@ -131,8 +131,8 @@ function Person(name, age, sex) { そして、以下のように `Person` オブジェクトのインスタンスを新たに 2 つ生成します。 ```js -var rand = new Person('Rand McNally', 33, 'M'); -var ken = new Person('Ken Jones', 39, 'M'); +var rand = new Person("Rand McNally", 33, "M"); +var ken = new Person("Ken Jones", 39, "M"); ``` さらに `Car` の定義を、以下のように `Person` オブジェクトを値としてとる `owner` プロパティを持つように書き換えます: @@ -149,14 +149,14 @@ function Car(make, model, year, owner) { 新しいオブジェクトを生成するため、以下のように使用します。 ```js -var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); -var car2 = new Car('Nissan', '300ZX', 1992, ken); +var car1 = new Car("Eagle", "Talon TSi", 1993, rand); +var car2 = new Car("Nissan", "300ZX", 1992, ken); ``` この構文では新しいオブジェクトを生成するときに文字列や整数のリテラル値を渡す代わりに、owner の引数としてオブジェクト `rand` や `ken` を渡しています。`car2` の所有者名を調べるには、以下のようにしてプロパティにアクセスできます。 ```js -car2.owner.name +car2.owner.name; ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/null/index.md b/files/ja/web/javascript/reference/operators/null/index.md index 37fb2c2e7e0828..1d5256b72470d3 100644 --- a/files/ja/web/javascript/reference/operators/null/index.md +++ b/files/ja/web/javascript/reference/operators/null/index.md @@ -1,5 +1,5 @@ --- -title: 'null' +title: "null" slug: Web/JavaScript/Reference/Operators/null original_slug: Web/JavaScript/Reference/Global_Objects/null --- @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/null ## 構文 ```js -null +null; ``` ## 解説 @@ -38,15 +38,15 @@ foo; //null `null` や `undefined` をチェックする際は、[等価 (==) と 厳密等価 (===) 演算子の違い](/ja/docs/Web/JavaScript/Reference/Operators) に注意してください（前者では型変換が行われます）。 ```js -typeof null // "object" (歴史的な理由で "null" ではありません) -typeof undefined // "undefined" -null === undefined // false -null == undefined // true -null === null // true -null == null // true -!null // true -isNaN(1 + null) // false -isNaN(1 + undefined) // true +typeof null; // "object" (歴史的な理由で "null" ではありません) +typeof undefined; // "undefined" +null === undefined; // false +null == undefined; // true +null === null; // true +null == null; // true +!null; // true +isNaN(1 + null); // false +isNaN(1 + undefined); // true ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md b/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md index bb12910190a65d..4a0f6a0cd2e199 100644 --- a/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md +++ b/files/ja/web/javascript/reference/operators/nullish_coalescing/index.md @@ -17,7 +17,7 @@ Null 合体演算子は[演算子の優先順位](/ja/docs/Web/JavaScript/Refere ## 構文 ```js -leftExpr ?? rightExpr +leftExpr ?? rightExpr; ``` ## 例 @@ -48,7 +48,7 @@ console.log(valC); // 42 let foo; // foo には何も値が代入されていないので、 undefined のままです -let someDummyText = foo || 'Hello!'; +let someDummyText = foo || "Hello!"; ``` しかし、`||` が論理演算子であるため、左辺の値は評価によって強制的に論理値になり、偽値（`0`, `''`, `NaN`, `null`, `undefined`）が返されることはありません。この動作は、 `0` や `''`, `NaN` を有効な値と考えている場合、予期せぬ結果を引き起こす可能性があります。 @@ -59,19 +59,19 @@ let text = ""; let qty = count || 42; let message = text || "hi!"; -console.log(qty); // 42 であり 0 ではない +console.log(qty); // 42 であり 0 ではない console.log(message); // "hi!" であり "" ではない ``` Null 合体演算子は、左辺の値が `null` もしくは `undefined` のどちらか（その他の falsy な値は含みません）に評価された場合にのみ右辺の値を返すことで、この潜在的な危険を回避します。 ```js -let myText = ''; // 空文字列（偽値） +let myText = ""; // 空文字列（偽値） -let notFalsyText = myText || 'Hello world'; +let notFalsyText = myText || "Hello world"; console.log(notFalsyText); // Hello world -let preservingFalsy = myText ?? 'Hi neighborhood'; +let preservingFalsy = myText ?? "Hi neighborhood"; console.log(preservingFalsy); // '' (myText は undefined でも null でもない) ``` @@ -80,15 +80,24 @@ console.log(preservingFalsy); // '' (myText は undefined でも null でもな OR 演算子や AND 演算子と同様に、左辺が `null` でも `undefined` でもないことが判明した場合、右辺の式は評価されません。 ```js -function A() { console.log('A was called'); return undefined;} -function B() { console.log('B was called'); return false;} -function C() { console.log('C was called'); return "foo";} - -console.log( A() ?? C() ); +function A() { + console.log("A was called"); + return undefined; +} +function B() { + console.log("B was called"); + return false; +} +function C() { + console.log("C was called"); + return "foo"; +} + +console.log(A() ?? C()); // "A was called"、 "C was called" のあと "foo" と出力 // A() は undefined を返すため、両方の式が評価されるため -console.log( B() ?? C() ); +console.log(B() ?? C()); // "B was called" のあと "false" と出力 // B() は false を返すため（そして null も undefined も返さない）、 // 右辺の式は評価されない diff --git a/files/ja/web/javascript/reference/operators/nullish_coalescing_assignment/index.md b/files/ja/web/javascript/reference/operators/nullish_coalescing_assignment/index.md index 9dcf1f4a2847cc..428f9904645b87 100644 --- a/files/ja/web/javascript/reference/operators/nullish_coalescing_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/nullish_coalescing_assignment/index.md @@ -13,7 +13,7 @@ Null 合体代入 (`x ??= y`) 演算子は、`x` が {{Glossary("nullish")}} (`n ## 構文 ```js -expr1 ??= expr2 +expr1 ??= expr2; ``` ## 解説 diff --git a/files/ja/web/javascript/reference/operators/object_initializer/index.md b/files/ja/web/javascript/reference/operators/object_initializer/index.md index 537deb5f21b77e..84780ada71b66f 100644 --- a/files/ja/web/javascript/reference/operators/object_initializer/index.md +++ b/files/ja/web/javascript/reference/operators/object_initializer/index.md @@ -12,16 +12,18 @@ slug: Web/JavaScript/Reference/Operators/Object_initializer ## 構文 ```js -let o = {} -let o = {a: 'foo', b: 42, c: {}} +let o = {}; +let o = { a: "foo", b: 42, c: {} }; -let a = 'foo', b = 42, c = {} -let o = {a: a, b: b, c: c} +let a = "foo", + b = 42, + c = {}; +let o = { a: a, b: b, c: c }; let o = { property: function (parameters) {}, get property() {}, - set property(value) {} + set property(value) {}, }; ``` @@ -31,20 +33,22 @@ let o = { ```js // 略記プロパティ名 (ES2015) -let a = 'foo', b = 42, c = {}; -let o = {a, b, c} +let a = "foo", + b = 42, + c = {}; +let o = { a, b, c }; // 略記メソッド名 (ES2015) let o = { - property(parameters) {} -} + property(parameters) {}, +}; // 計算プロパティ名 (ES2015) -let prop = 'foo'; +let prop = "foo"; let o = { - [prop]: 'hey', - ['b' + 'ar']: 'there' -} + [prop]: "hey", + ["b" + "ar"]: "there", +}; ``` ## 解説 @@ -68,7 +72,7 @@ let o = { プロパティを持たない空のオブジェクトは、下記のように中括弧を記述することで生成されます。 ```js -let object = {} +let object = {}; ``` しかし、*リテラル*記法、*初期化子*記法の利点は、中括弧内にプロパティをもつオブジェクトを簡潔に生成できる点です。 `key: value` の組をカンマで区切ったリストで記述することができます。 @@ -77,10 +81,10 @@ let object = {} ```js let object = { - foo: 'bar', + foo: "bar", age: 42, - baz: {myProp: 12} -} + baz: { myProp: 12 }, +}; ``` ### プロパティへのアクセス @@ -88,10 +92,10 @@ let object = { オブジェクトを生成すると、読み取ったり変更したりしたくなるでしょう。オブジェクトのプロパティには、ドット記法またはブラケット記法でアクセスすることができます。（詳細については、[プロパティへのアクセス](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)をご覧ください。） ```js -object.foo // "bar" -object['age'] // 42 -object.baz // {myProp: 12} -object.baz.myProp //12 +object.foo; // "bar" +object["age"]; // 42 +object.baz; // {myProp: 12} +object.baz.myProp; //12 ``` ### プロパティの定義 @@ -99,29 +103,29 @@ object.baz.myProp //12 初期化構文を使用してプロパティを記述する方法について既に学びました。多くの場合、コード内には、オブジェクトに設定したい変数があります。下記のコードをご覧ください。 ```js -let a = 'foo', - b = 42, - c = {}; +let a = "foo", + b = 42, + c = {}; let o = { a: a, b: b, - c: c -} + c: c, +}; ``` ECMAScript 2015 では、同じことを実現するために利用できる短い記法があります。 ```js -let a = 'foo', - b = 42, - c = {}; +let a = "foo", + b = 42, + c = {}; // 略記プロパティ名 (ES2015) -let o = {a, b, c} +let o = { a, b, c }; // In other words, -console.log((o.a === {a}.a)) // true +console.log(o.a === { a }.a); // true ``` #### 重複したプロパティ名 @@ -129,21 +133,21 @@ console.log((o.a === {a}.a)) // true プロパティに対して同じ名前を使用するとき、二番目のプロパティは最初のプロパティを上書きします。 ```js -let a = {x: 1, x: 2} -console.log(a) // {x: 2} +let a = { x: 1, x: 2 }; +console.log(a); // {x: 2} ``` ECMAScript 5 の厳格モードのコードでは、重複したプロパティの名前は {{jsxref("SyntaxError")}} とみなされます。実行時に重複を可能にする計算プロパティ名の導入により、 ECMAScript 2015 ではこの制限は取り除かれました。 ```js function haveES2015DuplicatePropertySemantics() { - 'use strict'; + "use strict"; try { - ({prop: 1, prop: 2}); + ({ prop: 1, prop: 2 }); // 厳格モードで重複するプロパティ名が許可されているため、エラーが発生しない場合。 return true; - } catch(e) { + } catch (e) { // 厳格モードで重複が禁止されているため、エラーが発生する場合。 return false; } @@ -158,8 +162,8 @@ function haveES2015DuplicatePropertySemantics() { let o = { property: function (parameters) {}, get property() {}, - set property(value) {} -} + set property(value) {}, +}; ``` ECMAScript 2015 では、略記法が利用可能ですので、キーワード "`function`" は必要なくなりました。 @@ -168,7 +172,7 @@ ECMAScript 2015 では、略記法が利用可能ですので、キーワード // メソッド名の略記法 (ES2015) let o = { property(parameters) {}, -} +}; ``` ECMAScript 2015 では、ジェネレーター関数であるプロパティを簡潔に定義する方法があります。 @@ -201,31 +205,31 @@ ECMAScript 2015 から、オブジェクト初期化子構文でも、計算プ ```js // Computed property names (ES2015) -let i = 0 +let i = 0; let a = { - ['foo' + ++i]: i, - ['foo' + ++i]: i, - ['foo' + ++i]: i -} + ["foo" + ++i]: i, + ["foo" + ++i]: i, + ["foo" + ++i]: i, +}; -console.log(a.foo1) // 1 -console.log(a.foo2) // 2 -console.log(a.foo3) // 3 +console.log(a.foo1); // 1 +console.log(a.foo2); // 2 +console.log(a.foo3); // 3 -const items = ["A","B","C"]; +const items = ["A", "B", "C"]; const obj = { -[items]: "Hello" -} + [items]: "Hello", +}; console.log(obj); // A,B,C: "Hello" -console.log(obj["A,B,C"]) // "Hello" +console.log(obj["A,B,C"]); // "Hello" -let param = 'size' +let param = "size"; let config = { [param]: 12, - ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 -} + ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4, +}; -console.log(config) // {size: 12, mobileSize: 4} +console.log(config); // {size: 12, mobileSize: 4} ``` ### スプレッドプロパティ @@ -235,13 +239,13 @@ console.log(config) // {size: 12, mobileSize: 4} {{jsxref("Object.assign()")}} を使うよりも短いコードで `prototype` を除いた浅いコピーの作成や、マージしたオブジェクトの作成を書くことができます。 ```js -let obj1 = { foo: 'bar', x: 42 } -let obj2 = { foo: 'baz', y: 13 } +let obj1 = { foo: "bar", x: 42 }; +let obj2 = { foo: "baz", y: 13 }; -let clonedObj = { ...obj1 } +let clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } -let mergedObj = { ...obj1, ...obj2 } +let mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` @@ -252,19 +256,19 @@ let mergedObj = { ...obj1, ...obj2 } `__proto__: value` 形式、または `"__proto__": value` 形式でプロパティを定義しても、 `__proto__` という名をもつプロパティを生成しません。代わりに、与えられた値がオブジェクトまたは [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) の場合、その値に生成されたオブジェクトの `[[Prototype]]` を変更します（その値がオブジェクト、または null ではない場合、オブジェクトは変更されません）。 ```js -let obj1 = {} -assert(Object.getPrototypeOf(obj1) === Object.prototype) +let obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); -let obj2 = {__proto__: null} -assert(Object.getPrototypeOf(obj2) === null) +let obj2 = { __proto__: null }; +assert(Object.getPrototypeOf(obj2) === null); -let protoObj = {} -let obj3 = {'__proto__': protoObj} -assert(Object.getPrototypeOf(obj3) === protoObj) +let protoObj = {}; +let obj3 = { __proto__: protoObj }; +assert(Object.getPrototypeOf(obj3) === protoObj); -let obj4 = {__proto__: 'not an object or null'} -assert(Object.getPrototypeOf(obj4) === Object.prototype) -assert(!obj4.hasOwnProperty('__proto__')) +let obj4 = { __proto__: "not an object or null" }; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty("__proto__")); ``` オブジェクトリテラルでは、単一のプロトタイプの変更のみが許可されています。すなわち、複数のプロトタイプを変更すると構文エラーになります。 @@ -272,18 +276,22 @@ assert(!obj4.hasOwnProperty('__proto__')) 「コロン」表記法を使用しないプロパティ定義は、プロトタイプの変更にはなりません。任意の他の名称を使用する同様の定義と同じように動作するプロパティ定義です。 ```js -let __proto__ = 'variable' +let __proto__ = "variable"; -let obj1 = {__proto__} -assert(Object.getPrototypeOf(obj1) === Object.prototype) -assert(obj1.hasOwnProperty('__proto__')) -assert(obj1.__proto__ === 'variable') +let obj1 = { __proto__ }; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty("__proto__")); +assert(obj1.__proto__ === "variable"); -let obj2 = {__proto__() { return 'hello'; }} -assert(obj2.__proto__() === 'hello') +let obj2 = { + __proto__() { + return "hello"; + }, +}; +assert(obj2.__proto__() === "hello"); -let obj3 = {['__prot' + 'o__']: 17} -assert(obj3.__proto__ === 17) +let obj3 = { ["__prot" + "o__"]: 17 }; +assert(obj3.__proto__ === 17); ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/operator_precedence/index.md b/files/ja/web/javascript/reference/operators/operator_precedence/index.md index 12cfd032b9909e..b2db15587384e6 100644 --- a/files/ja/web/javascript/reference/operators/operator_precedence/index.md +++ b/files/ja/web/javascript/reference/operators/operator_precedence/index.md @@ -20,8 +20,8 @@ a OP1 b OP2 c `OP1` と `OP2` の優先順位（下記の一覧表を参照）が異なる場合は、優先順位の高い演算子が先に実行され、結合性は関係ありません。コードの中で加算が先に書かれているにもかかわらず、乗算の方が加算よりも優先順位が高く、先に実行されていることを確認してください。 ```js -console.log(3 + 10 * 2); // 23 を出力 -console.log(3 + (10 * 2)); // 括弧の優先順位が高いので、23 を出力 +console.log(3 + 10 * 2); // 23 を出力 +console.log(3 + 10 * 2); // 括弧の優先順位が高いので、23 を出力 console.log((3 + 10) * 2); // 括弧が順位を変更するので 26 を出力 ``` @@ -162,19 +162,19 @@ Evaluating the right side 短絡評価は、条件付き評価を表す用語です。例えば、`a && (b + c)` という式において、`a` が{{Glossary("falsy", "偽値")}}である場合、従属式である `(b + c)` は括弧で囲まれていても評価されません。この論理的分離演算子 ("OR") は「短絡的」といえるでしょう。論理的分離演算子の他にも、ほかに短絡が発生する演算子には、論理的結合 ("AND") 演算子、Null 合体演算子、オプション連鎖演算子、条件演算子があります。以下に例を示します。 ```js -a || (b * c); // 最初に `a` を評価し、 `a` が「真値」であれば `a` を出力 -a && (b < c); // 最初に `a` を評価し、 `a` が「偽値」であれば `a` を出力 +a || b * c; // 最初に `a` を評価し、 `a` が「真値」であれば `a` を出力 +a && b < c; // 最初に `a` を評価し、 `a` が「偽値」であれば `a` を出力 a ?? (b || c); // 最初に `a` を評価し、 `a` が `null` または `undefined` でなければ `a` を出力 -a?.b.c; // 最初に `a` を評価し、 `a` が `null` または `undefined` であれば `undefined` を出力 +a?.b.c; // 最初に `a` を評価し、 `a` が `null` または `undefined` であれば `undefined` を出力 ``` ## 例 ```js -3 > 2 && 2 > 1 +3 > 2 && 2 > 1; // true を返す -3 > 2 > 1 +3 > 2 > 1; // 結果は false となる。3 > 2 は true であり、true は // 不等号で 1 に変換されるため、true > 1 は 1 > 1 となり、 // false となる。(3 > 2) > 1 のように括弧を付けると明確になる。 diff --git a/files/ja/web/javascript/reference/operators/optional_chaining/index.md b/files/ja/web/javascript/reference/operators/optional_chaining/index.md index 72c1ff32f75eb5..73d892a3196146 100644 --- a/files/ja/web/javascript/reference/operators/optional_chaining/index.md +++ b/files/ja/web/javascript/reference/operators/optional_chaining/index.md @@ -7,7 +7,7 @@ slug: Web/JavaScript/Reference/Operators/Optional_chaining **オプショナルチェーン** (optional chaining) 演算子 (**`?.`**) は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。 - `?.` 演算子の機能は `.` チェーン演算子と似ていますが、参照が [nullish](/ja/docs/Glossary/Nullish) ({{JSxRef("null")}} または {{JSxRef("undefined")}}) の場合にエラーとなるのではなく、式が短絡され `undefined` が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 `undefined` を返します。 +`?.` 演算子の機能は `.` チェーン演算子と似ていますが、参照が [nullish](/ja/docs/Glossary/Nullish) ({{JSxRef("null")}} または {{JSxRef("undefined")}}) の場合にエラーとなるのではなく、式が短絡され `undefined` が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 `undefined` を返します。 これは、参照が失われた可能性のある連結されたプロパティにアクセスする時、結果的に短く単純な式になります。また、必要なプロパティの存在が保証されていない場合にオブジェクトのコンテンツを探索するのにも役立ちます。 @@ -19,10 +19,10 @@ slug: Web/JavaScript/Reference/Operators/Optional_chaining ## 構文 ```js -obj.val?.prop -obj.val?.[expr] -obj.arr?.[index] -obj.func?.(args) +obj.val?.prop; +obj.val?.[expr]; +obj.arr?.[index]; +obj.func?.(args); ``` ## 解説 @@ -49,7 +49,7 @@ let nestedProp = obj.first?.second; ```js let temp = obj.first; -let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); +let nestedProp = temp === null || temp === undefined ? undefined : temp.second; ``` ### 関数呼び出しにおけるオプショナルチェーン演算子 @@ -76,9 +76,9 @@ let result = someInterface.customMethod?.(); function doSomething(onContent, onError) { try { // ... do something with the data - } - catch (err) { - if (onError) { // Testing if onError really exists + } catch (err) { + if (onError) { + // Testing if onError really exists onError(err.message); } } @@ -89,9 +89,8 @@ function doSomething(onContent, onError) { // Using optional chaining with function calls function doSomething(onContent, onError) { try { - // ... do something with the data - } - catch (err) { + // ... do something with the data + } catch (err) { onError?.(err.message); // no exception if onError is undefined } } @@ -102,7 +101,7 @@ function doSomething(onContent, onError) { [プロパティアクセサーのブラケット表記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation)を使用している式のプロパティにアクセスする際にも、オプショナルチェーン演算子を使用することができます。 ```js -let nestedProp = obj?.['prop' + 'Name']; +let nestedProp = obj?.["prop" + "Name"]; ``` ### オプショナルチェーン演算子は代入の左辺値では使用できない @@ -126,7 +125,7 @@ let arrayItem = arr?.[42]; ```js let myMap = new Map(); -myMap.set("foo", {name: "baz", desc: "inga"}); +myMap.set("foo", { name: "baz", desc: "inga" }); let nameBar = myMap.get("bar")?.name; ``` @@ -152,8 +151,8 @@ let customer = { name: "Carl", details: { age: 82, - location: "Paradise Falls" // 詳細な住所は不明 - } + location: "Paradise Falls", // 詳細な住所は不明 + }, }; let customerCity = customer.details?.address?.city; @@ -168,7 +167,7 @@ let customerName = customer.name?.getName?.(); // メソッドが存在しない ```js let customer = { name: "Carl", - details: { age: 82 } + details: { age: 82 }, }; const customerCity = customer?.city ?? "Unknown city"; console.log(customerCity); // Unknown city diff --git a/files/ja/web/javascript/reference/operators/property_accessors/index.md b/files/ja/web/javascript/reference/operators/property_accessors/index.md index 202db2907ff6da..7fd8eee9e20618 100644 --- a/files/ja/web/javascript/reference/operators/property_accessors/index.md +++ b/files/ja/web/javascript/reference/operators/property_accessors/index.md @@ -12,8 +12,8 @@ slug: Web/JavaScript/Reference/Operators/Property_accessors ## 構文 ```js -object.property -object['property'] +object.property; +object["property"]; ``` ## 解説 @@ -47,22 +47,21 @@ console.log(object.1); // SyntaxError ここで、 `createElement` というメソッドを `document` から取得し、呼び出します。 ```js -document.createElement('pre') +document.createElement("pre"); ``` 数値リテラルに対してメソッドを使用する場合で、その数値リテラルに指数や小数点がない場合、メソッド呼び出しをするドットの前に[ホワイトスペース](/ja/docs/Glossary/Whitespace)を入れることで、ドットが小数点とみなされることを防ぐことができます。 ```js -77 .toExponential(); +(77).toExponential(); // or -77 -.toExponential() +(77).toExponential(); // or -;(77).toExponential() +(77).toExponential(); // or -77..toExponential() +(77).toExponential(); // or -77.0.toExponential() +(77.0).toExponential(); // because 77. === 77.0, no ambiguity ``` @@ -71,20 +70,20 @@ document.createElement('pre') `object[property_name]` の構文では、 `property_name` は文字列または[シンボル](/ja/docs/Glossary/Symbol)です。ですから、これは任意の文字列、例えば `'1foo'`、`'!bar!'`、または `' '` (空白) であっても構いません。 ```js -const variable = object[property_name] +const variable = object[property_name]; object[property_name] = value; ``` これは前の例とまったく同じです。 ```js -document['createElement']('pre') +document["createElement"]("pre"); ``` ブラケット表記法の前には空白を入れることができます。 ```js -document ['createElement']('pre') +document["createElement"]("pre"); ``` ### プロパティ名 @@ -92,17 +91,19 @@ document ['createElement']('pre') プロパティ名は文字列または[シンボル](/ja/docs/Glossary/Symbol)です。それ以外の値は、数値を含めて、文字列へ強制変換されます。これは `'value'` を出力します。 `1` が `'1'` に強制変換されるからです。 ```js -let object = {} -object['1'] = 'value' -console.log(object[1]) +let object = {}; +object["1"] = "value"; +console.log(object[1]); ``` こちらも `'value'` を出力します。`foo` と `bar` は同じ文字列に変換されるからです。 ```js -let foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; -object[foo] = 'value' -console.log(object[bar]) +let foo = { unique_prop: 1 }, + bar = { unique_prop: 2 }, + object = {}; +object[foo] = "value"; +console.log(object[bar]); ``` [SpiderMonkey](/ja/docs/Mozilla/Projects/SpiderMonkey) JavaScript エンジンでは、この文字列は "`[object Object]`" となります。 @@ -120,13 +121,13 @@ JavaScript 初心者はしばしば、代わりにブラケット表記法を使 例えば、以下のような構文がたくさんのスクリプトで見られます。 ```js -x = eval('document.forms.form_name.elements.' + strFormControl + '.value') +x = eval("document.forms.form_name.elements." + strFormControl + ".value"); ``` `eval()` は低速であり、可能な限り避けるべきです。また、 `strFormControl` は ID を必要としますが、フォームコントロールの名前と `id` は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。 ```js -x = document.forms['form_name'].elements[strFormControl].value +x = document.forms["form_name"].elements[strFormControl].value; ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/remainder/index.md b/files/ja/web/javascript/reference/operators/remainder/index.md index 727378876ad9f9..e21424845d1b70 100644 --- a/files/ja/web/javascript/reference/operators/remainder/index.md +++ b/files/ja/web/javascript/reference/operators/remainder/index.md @@ -14,7 +14,7 @@ slug: Web/JavaScript/Reference/Operators/Remainder ## 構文 ```js -x % y +x % y; ``` ## 例 @@ -22,33 +22,33 @@ x % y ### 正の値の剰余 ```js - 12 % 5 // 2 - 1 % -2 // 1 - 1 % 2 // 1 - 2 % 3 // 2 -5.5 % 2 // 1.5 +12 % 5; // 2 +1 % -2; // 1 +1 % 2; // 1 +2 % 3; // 2 +5.5 % 2; // 1.5 ``` ### 負の値の剰余 ```js --12 % 5 // -2 --1 % 2 // -1 --4 % 2 // -0 +-12 % 5; // -2 +-1 % 2; // -1 +-4 % 2; // -0 ``` ### NaN の剰余 ```js -NaN % 2 // NaN +NaN % 2; // NaN ``` ### 無限大の剰余 ```js -Infinity % 2 // NaN -Infinity % 0 // NaN -Infinity % Infinity // NaN +Infinity % 2; // NaN +Infinity % 0; // NaN +Infinity % Infinity; // NaN ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/remainder_assignment/index.md b/files/ja/web/javascript/reference/operators/remainder_assignment/index.md index f3d7f31be270ce..6bb35d3e577afe 100644 --- a/files/ja/web/javascript/reference/operators/remainder_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/remainder_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Remainder_assignment ## 構文 ```js -x %= y // x = x % y +x %= y; // x = x % y ``` ## 例 @@ -23,9 +23,9 @@ x %= y // x = x % y // 以下の変数を想定 // bar = 5 -bar %= 2 // 1 -bar %= 'foo' // NaN -bar %= 0 // NaN +bar %= 2; // 1 +bar %= "foo"; // NaN +bar %= 0; // NaN ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/right_shift/index.md b/files/ja/web/javascript/reference/operators/right_shift/index.md index db335392b7849d..844133f1600a57 100644 --- a/files/ja/web/javascript/reference/operators/right_shift/index.md +++ b/files/ja/web/javascript/reference/operators/right_shift/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Right_shift ## 構文 ```js -a >> b +a >> b; ``` ## 解説 @@ -21,7 +21,7 @@ a >> b 例えば、 `9 >> 2` は 2 となります。 -```js +```plain . 9 (10 進数): 00000000000000000000000000001001 (2 進数) -------------------------------- 9 >> 2 (10 進数): 00000000000000000000000000000010 (2 進数) = 2 (10 進数) @@ -29,7 +29,7 @@ a >> b 同様に、 `-9 >> 2` は符号が保存されるため、 `-3` になります。 -```js +```plain . -9 (10 進数): 11111111111111111111111111110111 (2 進数) -------------------------------- -9 >> 2 (10 進数): 11111111111111111111111111111101 (2 進数) = -3 (10 進数) @@ -40,7 +40,7 @@ a >> b ### 右シフトの使用 ```js - 9 >> 2; // 2 +9 >> 2; // 2 -9 >> 2; // -3 ``` diff --git a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md index ce15db778fb3e2..ef35b06f37f3d2 100644 --- a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Right_shift_assignment ## 構文 ```js -x >>= y // x = x >> y +x >>= y; // x = x >> y ``` ## 例 @@ -20,11 +20,11 @@ x >>= y // x = x >> y ### 右シフト代入の使用 ```js -let a = 5; // (00000000000000000000000000000101) -a >>= 2; // 1 (00000000000000000000000000000001) +let a = 5; // (00000000000000000000000000000101) +a >>= 2; // 1 (00000000000000000000000000000001) -let b = -5; // (-00000000000000000000000000000101) -b >>= 2; // -2 (-00000000000000000000000000000010) +let b = -5; // (-00000000000000000000000000000101) +b >>= 2; // -2 (-00000000000000000000000000000010) ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/spread_syntax/index.md b/files/ja/web/javascript/reference/operators/spread_syntax/index.md index dc1e9b11eb3aa5..ea919192bd0712 100644 --- a/files/ja/web/javascript/reference/operators/spread_syntax/index.md +++ b/files/ja/web/javascript/reference/operators/spread_syntax/index.md @@ -48,7 +48,7 @@ myFunction(...iterableObj); // iterableObj のすべての要素を関数 myFunc 配列リテラルや文字列の場合: ```js -[...iterableObj, '4', 'five', 6]; // iterableObj のすべての要素を挿入することで、2 つの配列を組み合わせる +[...iterableObj, "4", "five", 6]; // iterableObj のすべての要素を挿入することで、2 つの配列を組み合わせる ``` オブジェクトリテラルの場合 (ECMAScript 2018 の新機能) @@ -70,7 +70,7 @@ let objClone = { ...obj }; // オブジェクトのすべてのキーと値の 配列の要素を引数にして関数を呼び出すには {{jsxref("Function.prototype.apply()")}} を使うのが一般的です。 ```js -function myFunction(x, y, z) { } +function myFunction(x, y, z) {} let args = [0, 1, 2]; myFunction.apply(null, args); ``` @@ -78,7 +78,7 @@ myFunction.apply(null, args); スプレッド構文を使うと、上のコードは次のように書くことができます。 ```js -function myFunction(x, y, z) { } +function myFunction(x, y, z) {} let args = [0, 1, 2]; myFunction(...args); ``` @@ -86,7 +86,7 @@ myFunction(...args); スプレッド構文は、引数リストのどの引数でも使用でき、またスプレッド構文は複数回使用することもできます。 ```js -function myFunction(v, w, x, y, z) { } +function myFunction(v, w, x, y, z) {} let args = [0, 1]; myFunction(-1, ...args, 2, ...[3]); ``` @@ -96,7 +96,7 @@ myFunction(-1, ...args, 2, ...[3]); {{jsxref("Operators/new", "new")}} によってコンストラクターを呼び出すとき、配列と `apply()` を**直接**使用することはできません (`apply()` は `[[Call]]` を実行するのであり `[[Construct]]` ではない)。ただし、配列はスプレッド構文のおかげで簡単に `new` を使用することができます。 ```js -let dateFields = [1970, 0, 1]; // 1 Jan 1970 +let dateFields = [1970, 0, 1]; // 1 Jan 1970 let d = new Date(...dateFields); ``` @@ -104,26 +104,26 @@ let d = new Date(...dateFields); ```js function applyAndNew(constructor, args) { - function partial () { - return constructor.apply(this, args); - }; - if (typeof constructor.prototype === "object") { - partial.prototype = Object.create(constructor.prototype); - } - return partial; + function partial() { + return constructor.apply(this, args); + } + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; } -function myConstructor () { - console.log("arguments.length: " + arguments.length); - console.log(arguments); - this.prop1="val1"; - this.prop2="val2"; -}; +function myConstructor() { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1 = "val1"; + this.prop2 = "val2"; +} let myArguments = ["hi", "how", "are", "you", "mr", null]; let myConstructorWithArguments = applyAndNew(myConstructor, myArguments); -console.log(new myConstructorWithArguments); +console.log(new myConstructorWithArguments()); // (internal log of myConstructor): arguments.length: 6 // (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] // (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"} @@ -136,8 +136,8 @@ console.log(new myConstructorWithArguments); スプレッド構文を使用しない場合、既存の配列を一部として使用して新しい配列を作成するには、配列リテラル構文は十分ではなく、{{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} などを組み合わせて使う高圧的なコードを使用しなければなりません。 ```js -let parts = ['shoulders', 'knees']; -let lyrics = ['head', ...parts, 'and', 'toes']; +let parts = ["shoulders", "knees"]; +let lyrics = ["head", ...parts, "and", "toes"]; // ["head", "shoulders", "knees", "and", "toes"] ``` @@ -164,7 +164,7 @@ arr2.push(4); > // 1 > > // しまった。 'a' も影響を受けてしまった。 -> a +> a; > // [[], [2], [3]] > ``` @@ -198,7 +198,7 @@ let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; // arr2 のすべての要素を arr1 へ移植します -Array.prototype.unshift.apply(arr1, arr2) +Array.prototype.unshift.apply(arr1, arr2); // arr1 is now [3, 4, 5, 0, 1, 2] ``` @@ -222,8 +222,8 @@ arr1 = [...arr2, ...arr1]; 浅いコピー (プロトタイプを除く) の作成や、マージしたオブジェクトの作成が {{jsxref("Object.assign()")}} を使うよりも短いコードで書けます。 ```js -let obj1 = { foo: 'bar', x: 42 }; -let obj2 = { foo: 'baz', y: 13 }; +let obj1 = { foo: "bar", x: 42 }; +let obj2 = { foo: "baz", y: 13 }; let clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } @@ -237,14 +237,14 @@ let mergedObj = { ...obj1, ...obj2 }; スプレッド構文は {{jsxref("Object.assign()")}} 関数を置き換えたり模倣することはできないことに注意してください。 ```js -let obj1 = { foo: 'bar', x: 42 }; -let obj2 = { foo: 'baz', y: 13 }; -const merge = ( ...objects ) => ( { ...objects } ); +let obj1 = { foo: "bar", x: 42 }; +let obj2 = { foo: "baz", y: 13 }; +const merge = (...objects) => ({ ...objects }); -let mergedObj1 = merge (obj1, obj2); +let mergedObj1 = merge(obj1, obj2); // Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } -let mergedObj2 = merge ({}, obj1, obj2); +let mergedObj2 = merge({}, obj1, obj2); // Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } } ``` @@ -257,7 +257,7 @@ let mergedObj2 = merge ({}, obj1, obj2); スプレッド構文 (スプレッドプロパティの場合を除く) は、[反復可能](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator)オブジェクトにのみ適用できます。 ```js -let obj = {'key1': 'value1'}; +let obj = { key1: "value1" }; let array = [...obj]; // TypeError: obj is not iterable ``` diff --git a/files/ja/web/javascript/reference/operators/strict_equality/index.md b/files/ja/web/javascript/reference/operators/strict_equality/index.md index d308141cc9bfa3..66f6f29a078e0e 100644 --- a/files/ja/web/javascript/reference/operators/strict_equality/index.md +++ b/files/ja/web/javascript/reference/operators/strict_equality/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Strict_equality ## 構文 ```js -x === y +x === y; ``` ## 解説 @@ -36,41 +36,41 @@ x === y ### オペランドが同じ型である場合の比較 ```js -console.log("hello" === "hello"); // true -console.log("hello" === "hola"); // false +console.log("hello" === "hello"); // true +console.log("hello" === "hola"); // false -console.log(3 === 3); // true -console.log(3 === 4); // false +console.log(3 === 3); // true +console.log(3 === 4); // false -console.log(true === true); // true -console.log(true === false); // false +console.log(true === true); // true +console.log(true === false); // false -console.log(null === null); // true +console.log(null === null); // true ``` ### オペランドが異なる型である場合の比較 ```js -console.log("3" === 3); // false +console.log("3" === 3); // false -console.log(true === 1); // false +console.log(true === 1); // false -console.log(null === undefined); // false +console.log(null === undefined); // false ``` ### オブジェクトの比較 ```js const object1 = { - name: "hello" -} + name: "hello", +}; const object2 = { - name: "hello" -} + name: "hello", +}; -console.log(object1 === object2); // false -console.log(object1 === object1); // true +console.log(object1 === object2); // false +console.log(object1 === object1); // true ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/strict_inequality/index.md b/files/ja/web/javascript/reference/operators/strict_inequality/index.md index 2953bdaff693dc..7315e8976a8577 100644 --- a/files/ja/web/javascript/reference/operators/strict_inequality/index.md +++ b/files/ja/web/javascript/reference/operators/strict_inequality/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Strict_inequality ## 構文 ```js -x !== y +x !== y; ``` ## 解説 @@ -20,9 +20,9 @@ x !== y 厳密不等価演算子は、オペランドが等しくないことを検査します。これは[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。 ```js -x !== y +x !== y; -!(x === y) +!(x === y); ``` 比較アルゴリズムの詳細については、[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子のページを参照して下さい。 @@ -38,41 +38,41 @@ x !== y ### オペランドが同じ型である場合の比較 ```js -console.log("hello" !== "hello"); // false -console.log("hello" !== "hola"); // true +console.log("hello" !== "hello"); // false +console.log("hello" !== "hola"); // true -console.log(3 !== 3); // false -console.log(3 !== 4); // true +console.log(3 !== 3); // false +console.log(3 !== 4); // true -console.log(true !== true); // false -console.log(true !== false); // true +console.log(true !== true); // false +console.log(true !== false); // true -console.log(null !== null); // false +console.log(null !== null); // false ``` ### オペランドが異なる型である場合の比較 ```js -console.log("3" !== 3); // true +console.log("3" !== 3); // true -console.log(true !== 1); // true +console.log(true !== 1); // true -console.log(null !== undefined); // true +console.log(null !== undefined); // true ``` ### オブジェクトの比較 ```js const object1 = { - name: "hello" -} + name: "hello", +}; const object2 = { - name: "hello" -} + name: "hello", +}; -console.log(object1 !== object2); // true -console.log(object1 !== object1); // false +console.log(object1 !== object2); // true +console.log(object1 !== object1); // false ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/subtraction/index.md b/files/ja/web/javascript/reference/operators/subtraction/index.md index 85bd73deecd328..eb413a459b4301 100644 --- a/files/ja/web/javascript/reference/operators/subtraction/index.md +++ b/files/ja/web/javascript/reference/operators/subtraction/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Subtraction ## 構文 ```js -x - y +x - y; ``` ## 例 @@ -20,14 +20,14 @@ x - y ### 数値の減算 ```js -5 - 3 // 2 -3 - 5 // -2 +5 - 3; // 2 +3 - 5; // -2 ``` ### 非数の減算 ```js -'foo' - 3 // NaN +"foo" - 3; // NaN ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md index 81e3d4a7440084..92eabc2df2edac 100644 --- a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Subtraction_assignment ## 構文 ```js -x -= y // x = x - y +x -= y; // x = x - y ``` ## 例 @@ -23,8 +23,8 @@ x -= y // x = x - y // 次の変数を想定 // bar = 5 -bar -= 2 // 3 -bar -= 'foo' // NaN +bar -= 2; // 3 +bar -= "foo"; // NaN ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/super/index.md b/files/ja/web/javascript/reference/operators/super/index.md index 305bc028beb536..87f750e3c92f6f 100644 --- a/files/ja/web/javascript/reference/operators/super/index.md +++ b/files/ja/web/javascript/reference/operators/super/index.md @@ -29,12 +29,12 @@ super.functionOnParent([arguments]); ```js class Rectangle { constructor(height, width) { - this.name = 'Rectangle'; + this.name = "Rectangle"; this.height = height; this.width = width; } sayName() { - console.log('Hi, I am a ', this.name + '.'); + console.log("Hi, I am a ", this.name + "."); } get area() { return this.height * this.width; @@ -54,7 +54,7 @@ class Square extends Rectangle { // Note: 'this' を使う前に super() をコールしなければなりません。 // でないと reference error になります。 - this.name = 'Square'; + this.name = "Square"; } } ``` @@ -66,13 +66,13 @@ class Square extends Rectangle { ```js class Rectangle { static logNbSides() { - return 'I have 4 sides'; + return "I have 4 sides"; } } class Square extends Rectangle { static logDescription() { - return super.logNbSides() + ' which are all equal'; + return super.logNbSides() + " which are all equal"; } } Square.logDescription(); // 'I have 4 sides which are all equal' @@ -92,7 +92,7 @@ class Derived extends Base { } } -new Derived().delete(); // ReferenceError: invalid delete involving 'super'. +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. ``` ### `super.prop` は書き込み不可能なプロパティを上書きできない @@ -102,10 +102,10 @@ new Derived().delete(); // ReferenceError: invalid delete involving 'super'. ```js class X { constructor() { - Object.defineProperty(this, 'prop', { + Object.defineProperty(this, "prop", { configurable: true, writable: false, - value: 1 + value: 1, }); } } @@ -115,7 +115,7 @@ class Y extends X { super(); } foo() { - super.prop = 2; // 値を上書きできない + super.prop = 2; // 値を上書きできない } } @@ -131,15 +131,15 @@ super は[オブジェクト初期化子 / リテラル](/ja/docs/Web/JavaScript ```js var obj1 = { method1() { - console.log('method 1'); - } -} + console.log("method 1"); + }, +}; var obj2 = { method2() { super.method1(); - } -} + }, +}; Object.setPrototypeOf(obj2, obj1); obj2.method2(); // logs "method 1" diff --git a/files/ja/web/javascript/reference/operators/this/index.md b/files/ja/web/javascript/reference/operators/this/index.md index 24c52f939b2bc1..ff8c0f26a58b2e 100644 --- a/files/ja/web/javascript/reference/operators/this/index.md +++ b/files/ja/web/javascript/reference/operators/this/index.md @@ -27,7 +27,7 @@ strict モードでない場合は、実行コンテキスト (グローバル グローバル実行コンテキスト (すべての関数の外側) では、strict モードであるかどうかにかかわらず、`this` はグローバルオブジェクトを参照します。 -``` js +```js // ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。 console.log(this === window); // true @@ -35,8 +35,8 @@ a = 37; console.log(window.a); // 37 this.b = "MDN"; -console.log(window.b) // "MDN" -console.log(b) // "MDN" +console.log(window.b); // "MDN" +console.log(b); // "MDN" ``` > **メモ:** コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。 @@ -63,7 +63,7 @@ f1() === global; // true ```js function f2() { - 'use strict'; // strict モードにする + "use strict"; // strict モードにする return this; } @@ -86,9 +86,9 @@ class Example { const proto = Object.getPrototypeOf(this); console.log(Object.getOwnPropertyNames(proto)); } - first(){} - second(){} - static third(){} + first() {} + second() {} + static third() {} } new Example(); // ['constructor', 'first', 'second'] @@ -113,7 +113,7 @@ class Base {} class Good extends Base {} class AlsoGood extends Base { constructor() { - return {a: 5}; + return { a: 5 }; } } class Bad extends Base { @@ -131,17 +131,17 @@ new Bad(); // 参照エラー ```js // オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます。 -var obj = {a: 'Custom'}; +var obj = { a: "Custom" }; // 変数を定義すると、その変数がグローバルの window のプロパティとして割り当てられます。 -var a = 'Global'; +var a = "Global"; function whatsThis() { - return this.a; // this の値は関数の呼び出し方によって変わります + return this.a; // this の値は関数の呼び出し方によって変わります } -whatsThis(); // 'Global' はこの関数では this として設定されていないので、既定でグローバルの window オブジェクトになります -whatsThis.call(obj); // 'Custom' が関数内の this として obj に設定されています +whatsThis(); // 'Global' はこの関数では this として設定されていないので、既定でグローバルの window オブジェクトになります +whatsThis.call(obj); // 'Custom' が関数内の this として obj に設定されています whatsThis.apply(obj); // 'Custom' が関数内の this として obj に設定されています ``` @@ -152,7 +152,7 @@ function add(c, d) { return this.a + this.b + c + d; } -var o = {a: 1, b: 3}; +var o = { a: 1, b: 3 }; // 最初の引数は 'this' として使用する // オブジェクトで、続く引数は関数呼び出しの @@ -172,8 +172,8 @@ function bar() { console.log(Object.prototype.toString.call(this)); } -bar.call(7); // [object Number] -bar.call('foo'); // [object String] +bar.call(7); // [object Number] +bar.call("foo"); // [object String] bar.call(undefined); // [object global] ``` @@ -186,13 +186,13 @@ function f() { return this.a; } -var g = f.bind({a: 'azerty'}); +var g = f.bind({ a: "azerty" }); console.log(g()); // azerty -var h = g.bind({a: 'yoo'}); // bind は一度しか機能しない +var h = g.bind({ a: "yoo" }); // bind は一度しか機能しない console.log(h()); // azerty -var o = {a: 37, f: f, g: g, h: h}; +var o = { a: 37, f: f, g: g, h: h }; console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty ``` @@ -202,7 +202,7 @@ console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty ```js var globalObject = this; -var foo = (() => this); +var foo = () => this; console.log(foo() === globalObject); // true ``` @@ -210,7 +210,7 @@ console.log(foo() === globalObject); // true ```js // オブジェクトのメソッドとして呼び出す。 -var obj = {func: foo}; +var obj = { func: foo }; console.log(obj.func() === globalObject); // true // call を使用して this の設定を試みる @@ -231,10 +231,10 @@ console.log(foo() === globalObject); // true // されます。bar の値は呼び出し時に設定でき、 // 返値の関数の値に順に設定します。 var obj = { - bar: function() { - var x = (() => this); + bar: function () { + var x = () => this; return x; - } + }, }; // bar を obj のメソッドとして呼び出す際、その this を obj に設定します @@ -263,9 +263,9 @@ console.log(fn2()() == window); // true ```js var o = { prop: 37, - f: function() { + f: function () { return this.prop; - } + }, }; console.log(o.f()); // 37 @@ -274,7 +274,7 @@ console.log(o.f()); // 37 この動作は、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、`o` の定義中に `f` メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から `o.f` に付け足すことができます。その結果は同じ動作になります。 ```js -var o = {prop: 37}; +var o = { prop: 37 }; function independent() { return this.prop; @@ -290,7 +290,7 @@ console.log(o.f()); // 37 同様に、`this` の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト `o.b` の `g` メソッドとして呼び出しています。実行時に、関数内の `this` は `o.b` を参照します。オブジェクト自体が `o` のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。 ```js -o.b = {g: independent, prop: 42}; +o.b = { g: independent, prop: 42 }; console.log(o.b.g()); // 42 ``` @@ -299,7 +299,11 @@ console.log(o.b.g()); // 42 同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、`this` はメソッドを呼び出したオブジェクトを参照します。 ```js -var o = {f: function() { return this.a + this.b; }}; +var o = { + f: function () { + return this.a + this.b; + }, +}; var p = Object.create(o); p.a = 1; p.b = 4; @@ -324,11 +328,14 @@ var o = { c: 3, get average() { return (this.a + this.b + this.c) / 3; - } + }, }; -Object.defineProperty(o, 'sum', { - get: sum, enumerable: true, configurable: true}); +Object.defineProperty(o, "sum", { + get: sum, + enumerable: true, + configurable: true, +}); console.log(o.average, o.sum); // 2, 6 ``` @@ -367,7 +374,7 @@ console.log(o.a); // 37 function C2() { this.a = 37; - return {a: 38}; + return { a: 38 }; } o = new C2(); @@ -387,16 +394,16 @@ function bluify(e) { console.log(this === e.currentTarget); // currentTarget と target が同じオブジェクトであれば true console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; + this.style.backgroundColor = "#A5D9F3"; } // 文書内の各要素の一覧を取得 -var elements = document.getElementsByTagName('*'); +var elements = document.getElementsByTagName("*"); // クリックリスナーとして bluify を追加することで、 // 要素をクリックすると青くなるようになる for (var i = 0; i < elements.length; i++) { - elements[i].addEventListener('click', bluify, false); + elements[i].addEventListener("click", bluify, false); } ``` @@ -405,9 +412,7 @@ for (var i = 0; i < elements.length; i++) { コードがインラインの [on-イベントハンドラー](/ja/docs/Web/Events/Event_handlers)から呼び出されたとき、その `this` にはリスナーが配置されている DOM 要素が設定されます。 ```html - + ``` 上記のアラートは `button` と表示します。ただし、外側のコードがこのように設定された `this` を持っているだけだということに注意してください。 @@ -437,13 +442,13 @@ class Car { console.log(`Bye from ${this.name}`); } get name() { - return 'Ferrari'; + return "Ferrari"; } } class Bird { get name() { - return 'Tweety'; + return "Tweety"; } } @@ -457,7 +462,7 @@ bird.sayHi(); // Hello from Tweety // バインドされたメソッドの場合、'this' は呼び出し元に依存しません bird.sayBye = car.sayBye; -bird.sayBye(); // Bye from Ferrari +bird.sayBye(); // Bye from Ferrari ``` > **メモ:** クラスは常に strict モードのコードです。これを定義せずに `this` でメソッドを呼び出すとエラーが発生します。 diff --git a/files/ja/web/javascript/reference/operators/typeof/index.md b/files/ja/web/javascript/reference/operators/typeof/index.md index dc4da004082ca3..9063f7a280a48e 100644 --- a/files/ja/web/javascript/reference/operators/typeof/index.md +++ b/files/ja/web/javascript/reference/operators/typeof/index.md @@ -13,9 +13,9 @@ slug: Web/JavaScript/Reference/Operators/typeof `typeof` 演算子の後に、オペランドを続けて書きます。 -```js -typeof operand -typeof(operand) +```js-nolint +typeof operand; +typeof(operand); ``` ### 引数 @@ -27,17 +27,17 @@ typeof(operand) 以下は `typeof` が返す可能性がある値の一覧です。型とプリミティブの詳細については、[JavaScript のデータ構造](/ja/docs/Web/JavaScript/Data_structures)のページも参照してください。 -| 型 | 結果 | -| ---------------------------------------------------------------------------------------- | -------------------------------------- | -| [Undefined](/ja/docs/Glossary/Undefined) | `"undefined"` | +| 型 | 結果 | +| ------------------------------------------------------------------------------------- | ------------------------------------- | +| [Undefined](/ja/docs/Glossary/Undefined) | `"undefined"` | | [Null](/ja/docs/Glossary/Null) | `"object"` ([下記参照](#typeof_null)) | -| [論理値](/ja/docs/Glossary/Boolean) | `"boolean"` | -| [Number](/ja/docs/Glossary/Number) | `"number"` | -| [BigInt](/ja/docs/Glossary/BigInt) (ECMAScript 2020 の新機能) | `"bigint"` | -| [文字列](/ja/docs/Glossary/String) | `"string"` | -| [シンボル](/ja/docs/Glossary/Symbol) (ECMAScript 2015 の新機能) | `"symbol"` | -| [関数](/ja/docs/Glossary/Function) オブジェクト (ECMA-262 の用語では [[Call]] を実装) | `"function"` | -| その他のオブジェクト | `"object"` | +| [論理値](/ja/docs/Glossary/Boolean) | `"boolean"` | +| [Number](/ja/docs/Glossary/Number) | `"number"` | +| [BigInt](/ja/docs/Glossary/BigInt) (ECMAScript 2020 の新機能) | `"bigint"` | +| [文字列](/ja/docs/Glossary/String) | `"string"` | +| [シンボル](/ja/docs/Glossary/Symbol) (ECMAScript 2015 の新機能) | `"symbol"` | +| [関数](/ja/docs/Glossary/Function) オブジェクト (ECMA-262 の用語では [[Call]] を実装) | `"function"` | +| その他のオブジェクト | `"object"` | > **メモ:** ECMAScript 2019 およびそれ以前の実装では、呼び出し可能な標準外のオブジェクトに対して、`typeof` が任意の実装定義の文字列値を返すことを許可していました。 > @@ -49,68 +49,67 @@ typeof(operand) ```js // 数値 -typeof 37 === 'number'; -typeof 3.14 === 'number'; -typeof(42) === 'number'; -typeof Math.LN2 === 'number'; -typeof Infinity === 'number'; -typeof NaN === 'number'; // "Not-A-Number" であるにもかかわらず。 -typeof Number('1') === 'number'; // Number は数値に型強制できない値を含めて、 -typeof Number('shoe') === 'number'; // あらゆるものを数字に解釈します。 +typeof 37 === "number"; +typeof 3.14 === "number"; +typeof 42 === "number"; +typeof Math.LN2 === "number"; +typeof Infinity === "number"; +typeof NaN === "number"; // "Not-A-Number" であるにもかかわらず。 +typeof Number("1") === "number"; // Number は数値に型強制できない値を含めて、 +typeof Number("shoe") === "number"; // あらゆるものを数字に解釈します。 -typeof 42n === 'bigint'; +typeof 42n === "bigint"; // 文字列 -typeof '' === 'string'; -typeof 'bla' === 'string'; -typeof `template literal` === 'string'; -typeof '1' === 'string'; // 文字列内の数値は文字列型のままです。 -typeof (typeof 1) === 'string'; // typeof は常に文字列を返します。 -typeof String(1) === 'string'; // String は何でも文字列に変換するので、toString よりも安全です。 +typeof "" === "string"; +typeof "bla" === "string"; +typeof `template literal` === "string"; +typeof "1" === "string"; // 文字列内の数値は文字列型のままです。 +typeof typeof 1 === "string"; // typeof は常に文字列を返します。 +typeof String(1) === "string"; // String は何でも文字列に変換するので、toString よりも安全です。 // 論理値 -typeof true === 'boolean'; -typeof false === 'boolean'; -typeof Boolean(1) === 'boolean'; // Boolean は、値が真値か偽値かに基づいて変換します。 -typeof !!(1) === 'boolean'; // ! (論理 NOT) を 2 回呼び出すと Boolean() と同等になります。 +typeof true === "boolean"; +typeof false === "boolean"; +typeof Boolean(1) === "boolean"; // Boolean は、値が真値か偽値かに基づいて変換します。 +typeof !!1 === "boolean"; // ! (論理 NOT) を 2 回呼び出すと Boolean() と同等になります。 // シンボル -typeof Symbol() === 'symbol' -typeof Symbol('foo') === 'symbol' -typeof Symbol.iterator === 'symbol' +typeof Symbol() === "symbol"; +typeof Symbol("foo") === "symbol"; +typeof Symbol.iterator === "symbol"; // Undefined -typeof undefined === 'undefined'; -typeof declaredButUndefinedVariable === 'undefined'; -typeof undeclaredVariable === 'undefined'; +typeof undefined === "undefined"; +typeof declaredButUndefinedVariable === "undefined"; +typeof undeclaredVariable === "undefined"; // オブジェクト -typeof {a: 1} === 'object'; +typeof { a: 1 } === "object"; // Array.isArray または Object.prototype.toString.call を使用して、 // 通常のオブジェクトと配列を区別します。 -typeof [1, 2, 4] === 'object'; - -typeof new Date() === 'object'; -typeof /regex/ === 'object'; // 過去の実装は正規表現の章を参照してください。 +typeof [1, 2, 4] === "object"; +typeof new Date() === "object"; +typeof /regex/ === "object"; // 過去の実装は正規表現の章を参照してください。 // 以下のようなものは、紛らわしく、危険で、無駄なものです。これらは使用しないようにしてください。 -typeof new Boolean(true) === 'object'; -typeof new Number(1) === 'object'; -typeof new String('abc') === 'object'; +typeof new Boolean(true) === "object"; +typeof new Number(1) === "object"; +typeof new String("abc") === "object"; // 関数 -typeof function() {} === 'function'; -typeof class C {} === 'function'; -typeof Math.sin === 'function'; +typeof function () {} === "function"; +typeof class C {} === "function"; +typeof Math.sin === "function"; ``` ### `typeof null` ```js // JavaScript の初期からの実装に基づく -typeof null === 'object'; +typeof null === "object"; ``` JavaScript の最初の実装では、JavaScript の値は型タグと値で表現されていました。オブジェクトの型タグは `0` で、`null` は NULL ポインター (ほとんどのプラットフォームで `0x00`) として表されていました。その結果、`null` はタグの型として `0` を持っていたため、`typeof` の戻り値は `"object"` です。([リファレンス](http://www.2ality.com/2013/10/typeof-null.html)) @@ -122,7 +121,7 @@ ECMAScript の修正案が (オプトインを使用して) 提案されまし ```js // Function コンストラクターを除くすべてのコンストラクター関数は、 // 常に typeof 'object' です -let str = new String('String'); +let str = new String("String"); let num = new Number(100); typeof str; // 'object' を返す @@ -139,8 +138,8 @@ typeof func; // 'function' を返す // 式のデータ型を特定するために、かっこを使用することができます。 let iData = 99; -typeof iData + ' Wisen'; // 'number Wisen' -typeof (iData + ' Wisen'); // 'string' +typeof iData + " Wisen"; // 'number Wisen' +typeof (iData + " Wisen"); // 'string' ``` ### 正規表現 @@ -148,8 +147,8 @@ typeof (iData + ' Wisen'); // 'string' 呼び出し可能な正規表現は、一部のブラウザーにおける標準外の追加機能でした。 ```js -typeof /s/ === 'function'; // Chrome 1-12 ECMAScript5.1 に非準拠 -typeof /s/ === 'object'; // Firefox 5+ ECMAScript 5.1 に準拠 +typeof /s/ === "function"; // Chrome 1-12 ECMAScript5.1 に非準拠 +typeof /s/ === "object"; // Firefox 5+ ECMAScript 5.1 に準拠 ``` ### エラー @@ -160,15 +159,15 @@ ECMAScript 2015 より前では、`typeof` は常にそれが供給されたオ {{JSxRef("Statements/const", "const")}} が追加されたことで、変数が宣言される前のブロック内で `let` と `const` に `typeof` を使用すると（またはクラスに `typeof` を使用すると）、 {{JSxRef("ReferenceError")}} が発生します。ブロックスコープ内の変数は、ブロックの開始から初期化が処理されるまで「[一時的なデッドゾーン](/ja/docs/Web/JavaScript/Reference/Statements/let#一時的なデッドゾーン_tdz)」にあり、その間にアクセスされるとエラーが発生します。 ```js -typeof undeclaredVariable === 'undefined'; +typeof undeclaredVariable === "undefined"; typeof newLetVariable; // ReferenceError typeof newConstVariable; // ReferenceError typeof newClass; // ReferenceError let newLetVariable; -const newConstVariable = 'hello'; -class newClass{}; +const newConstVariable = "hello"; +class newClass {} ``` ### 例外 @@ -176,7 +175,7 @@ class newClass{}; 現在のブラウザーではすべて、標準外のホストオブジェクト [`document.all`](/ja/docs/Web/API/Document/all) は `undefined` 型になります。 ```js -typeof document.all === 'undefined'; +typeof document.all === "undefined"; ``` 仕様では、標準外のオブジェクトのために独自の型タグが設定できるようにしていますが、定義済みの型タグとは異なる必要があります。 `document.all` が `'undefined'` という型であるというのは、ウェブ標準では元の ECMA JavaScript 標準において「故意の違反」として分類されています。 @@ -188,24 +187,32 @@ typeof document.all === 'undefined'; 型のチェックをより具体的にするためには、実用レベルのコードで使用するための `typeof` ラッパーは以下のようになります。（`obj` が存在する場合） ```js - function type(obj, fullClass) { - - // obj の toPrototypeString() を取得します。（すべての型を処理します） - if (showFullClass && typeof obj === "object") { - return Object.prototype.toString.call(obj); - } - if (obj == null) { return (obj + '').toLowerCase(); } // 暗黙の toString() 変換 - - var deepType = Object.prototype.toString.call(obj).slice(8,-1).toLowerCase(); - if (deepType === 'generatorfunction') { return 'function' } - - // 過剰な特異性を防いでください。(例えば、[object HTMLDivElement] など) - // 関数的な正規表現 (Android 2.3 以前)、関数的な 要素 (Chrome 57 以前, Firefox 52 以前) などを考慮してください。 - // String.prototype.match は普遍的にサポートされています。 +function type(obj, fullClass) { + // obj の toPrototypeString() を取得します。（すべての型を処理します） + if (showFullClass && typeof obj === "object") { + return Object.prototype.toString.call(obj); + } + if (obj == null) { + return (obj + "").toLowerCase(); + } // 暗黙の toString() 変換 - return deepType.match(/^(array|bigint|date|error|function|generator|regexp|symbol)$/) ? deepType : - (typeof obj === 'object' || typeof obj === 'function') ? 'object' : typeof obj; + var deepType = Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); + if (deepType === "generatorfunction") { + return "function"; } + + // 過剰な特異性を防いでください。(例えば、[object HTMLDivElement] など) + // 関数的な正規表現 (Android 2.3 以前)、関数的な 要素 (Chrome 57 以前, Firefox 52 以前) などを考慮してください。 + // String.prototype.match は普遍的にサポートされています。 + + return deepType.match( + /^(array|bigint|date|error|function|generator|regexp|symbol)$/, + ) + ? deepType + : typeof obj === "object" || typeof obj === "function" + ? "object" + : typeof obj; +} ``` 存在しない変数をチェックすると、{{JSxRef("ReferenceError")}} が発生するため、`typeof nonExistentVar === 'undefined'` を使用します。 @@ -223,7 +230,7 @@ typeof document.all === 'undefined'; IE 6、7、8 では、以下のように多くのホストオブジェクトがオブジェクト型であり、関数ではありません。 ```js -typeof alert === 'object' +typeof alert === "object"; ``` 一部の標準外 IE プロパティは他の値を返します。([tc39/ecma262#1440 (comment)](https://github.com/tc39/ecma262/issues/1440#issuecomment-461963872)) diff --git a/files/ja/web/javascript/reference/operators/unary_negation/index.md b/files/ja/web/javascript/reference/operators/unary_negation/index.md index 9488a6df4fd1cd..ff2cb72eba2387 100644 --- a/files/ja/web/javascript/reference/operators/unary_negation/index.md +++ b/files/ja/web/javascript/reference/operators/unary_negation/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Unary_negation ## 構文 ```js --x +-x; ``` ## 例 diff --git a/files/ja/web/javascript/reference/operators/unary_plus/index.md b/files/ja/web/javascript/reference/operators/unary_plus/index.md index dfae39c2dbd712..d8dfb68c62f279 100644 --- a/files/ja/web/javascript/reference/operators/unary_plus/index.md +++ b/files/ja/web/javascript/reference/operators/unary_plus/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Unary_plus ## 構文 ```js -+x ++x; ``` ## 解説 @@ -36,11 +36,11 @@ console.log(+y); ### 数値以外での使い方 ```js -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -+1n // BigInt 値は数値に変換できないためエラーになります ++true; // 1 ++false; // 0 ++null; // 0 ++function(val){ return val }; // NaN ++1n; // BigInt 値は数値に変換できないためエラーになります ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md index 020688c01d8c5f..044ca0cab1fbca 100644 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift ## 構文 ```js -a >>> b +a >>> b; ``` ## 解説 @@ -40,7 +40,7 @@ a >>> b ### 符号なし右シフトの使用 ```js - 9 >>> 2; // 2 +9 >>> 2; // 2 -9 >>> 2; // 1073741821 ``` diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md index fa08428442572b..cb7ae35753c1d0 100644 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment ## 構文 ```js -x >>>= y // x = x >>> y +x >>>= y; // x = x >>> y ``` ## 例 @@ -20,11 +20,11 @@ x >>>= y // x = x >>> y ### 符号なし右シフト代入の使用 ```js -let a = 5; // (00000000000000000000000000000101) -a >>>= 2; // 1 (00000000000000000000000000000001) +let a = 5; // (00000000000000000000000000000101) +a >>>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000101) -b >>>= 2; // 1073741822 (00111111111111111111111111111110) +b >>>= 2; // 1073741822 (00111111111111111111111111111110) ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/operators/void/index.md b/files/ja/web/javascript/reference/operators/void/index.md index 90a51266a0fd79..d4735568323ace 100644 --- a/files/ja/web/javascript/reference/operators/void/index.md +++ b/files/ja/web/javascript/reference/operators/void/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/void ## 構文 ```js -void expression +void expression; ``` ## 解説 @@ -24,8 +24,8 @@ void expression なお、`void` 演算子の [優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) を考慮するべきであり、括弧は `void` 演算子に続く式の解決を明確にするのに役立つとされています。 ```js -void 2 == '2'; // (void 2) == '2', false を返す -void (2 == '2'); // void (2 == '2'), undefined を返す +void 2 == "2"; // (void 2) == '2', false を返す +void (2 == "2"); // void (2 == '2'), undefined を返す ``` ## 例 @@ -35,11 +35,9 @@ void (2 == '2'); // void (2 == '2'), undefined を返す [即時実行関数式](/ja/docs/Glossary/IIFE) を使用する場合、 `void` により `function` キーワードが宣言ではなく式として扱うよう強制することができます。 ```js -void function iife() { - +void (function iife() { console.log("Executed!"); - -}(); +})(); // Output: "Executed!" ``` @@ -51,9 +49,7 @@ void function iife() { `javascript:` の URI に対応しているブラウザーでは、 URI の中のコードを評価し、返値が {{jsxref("undefined")}} でない限り、返された値でページの内容を置き換えます。 `void` 演算子は、`undefined` を返すために使用できます。 ```html - - Click here to do nothing - + Click here to do nothing Click here for green background diff --git a/files/ja/web/javascript/reference/operators/yield/index.md b/files/ja/web/javascript/reference/operators/yield/index.md index ce6d81de3343a4..812b2cc2ee71af 100644 --- a/files/ja/web/javascript/reference/operators/yield/index.md +++ b/files/ja/web/javascript/reference/operators/yield/index.md @@ -12,7 +12,7 @@ slug: Web/JavaScript/Reference/Operators/yield ## 構文 ```js -[rv] = yield [expression] +[rv] = yield[expression]; ``` - `expression` {{optional_inline}} @@ -48,10 +48,10 @@ slug: Web/JavaScript/Reference/Operators/yield 次のコードはジェネレーター関数の定義例です。 ```js -function* countAppleSales () { - let saleList = [3, 7, 5] +function* countAppleSales() { + let saleList = [3, 7, 5]; for (let i = 0; i < saleList.length; i++) { - yield saleList[i] + yield saleList[i]; } } ``` @@ -59,34 +59,34 @@ function* countAppleSales () { ジェネレーター関数が定義されると、ご覧のようにイテレーターを構築するために使用されます。 ```js -let appleStore = countAppleSales() // Generator { } -console.log(appleStore.next()) // { value: 3, done: false } -console.log(appleStore.next()) // { value: 7, done: false } -console.log(appleStore.next()) // { value: 5, done: false } -console.log(appleStore.next()) // { value: undefined, done: true } +let appleStore = countAppleSales(); // Generator { } +console.log(appleStore.next()); // { value: 3, done: false } +console.log(appleStore.next()); // { value: 7, done: false } +console.log(appleStore.next()); // { value: 5, done: false } +console.log(appleStore.next()); // { value: undefined, done: true } ``` next(value) でジェネレーターに値を送ることができます。 'step' はこの \[_rv_] = **yield** \[_expression_] の構文では返値として評価されます。 ```js function* counter(value) { - let step; + let step; - while (true) { - step = yield ++value; + while (true) { + step = yield ++value; - if (step) { - value += step; - } - } + if (step) { + value += step; + } + } } const generatorFunc = counter(0); -console.log(generatorFunc.next().value); // 1 -console.log(generatorFunc.next().value); // 2 -console.log(generatorFunc.next().value); // 3 +console.log(generatorFunc.next().value); // 1 +console.log(generatorFunc.next().value); // 2 +console.log(generatorFunc.next().value); // 3 console.log(generatorFunc.next(10).value); // 14 -console.log(generatorFunc.next().value); // 15 +console.log(generatorFunc.next().value); // 15 console.log(generatorFunc.next(10).value); // 26 ``` diff --git a/files/ja/web/javascript/reference/operators/yield_star_/index.md b/files/ja/web/javascript/reference/operators/yield_star_/index.md index ceb4b6685a12f2..636f484c000a74 100644 --- a/files/ja/web/javascript/reference/operators/yield_star_/index.md +++ b/files/ja/web/javascript/reference/operators/yield_star_/index.md @@ -11,8 +11,8 @@ slug: Web/JavaScript/Reference/Operators/yield* ## 構文 -```js -yield* expression +```js-nolint +yield* expression; ``` - `expression` @@ -60,7 +60,7 @@ console.log(iterator.next()); // {value: undefined, done: true} ```js function* g3() { yield* [1, 2]; - yield* '34'; + yield* "34"; yield* Array.from(arguments); } @@ -82,12 +82,12 @@ console.log(iterator.next()); // {value: undefined, done: true} ```js function* g4() { yield* [1, 2, 3]; - return 'foo'; + return "foo"; } function* g5() { const g4ReturnValue = yield* g4(); - console.log(g4ReturnValue) // 'foo' + console.log(g4ReturnValue); // 'foo' return g4ReturnValue; } diff --git a/files/ja/web/javascript/reference/statements/async_function/index.md b/files/ja/web/javascript/reference/statements/async_function/index.md index 61024614b9f427..6bd6984a625c46 100644 --- a/files/ja/web/javascript/reference/statements/async_function/index.md +++ b/files/ja/web/javascript/reference/statements/async_function/index.md @@ -229,7 +229,7 @@ setTimeout(parallel, 10000); // 本当に並列処理となるため 1 秒後に `sequentialStart` では、最初の `await` のために実行が 2 秒間待機し、 2 つ目の `await` のためにさらに 1 秒間待機します。 2 つ目のタイマーは最初のタイマーが起動している間は作成されません。コードは 3 秒後に終了します。 `concurrentStart` では、両方のタイマーが作成され、両方とも `await` される、すなわち待機させられます。タイマーは同時に実行されているため、 3 秒後ではなく 2 秒後に、すなわち最も遅いタイマーにあわせて終了します。 - しかし、 `await` の呼び出しは依然として逐次処理であり、これは 2 つ目の `await` が 1 つ目の終了まで待つことを意味します。このケースでは、最も速いタイマーが最も遅いタイマーのあとに処理されることになります。 +しかし、 `await` の呼び出しは依然として逐次処理であり、これは 2 つ目の `await` が 1 つ目の終了まで待つことを意味します。このケースでは、最も速いタイマーが最も遅いタイマーのあとに処理されることになります。 複数の処理を安全に並列に実行したい場合は、 [`Promise.all`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) または [`Promise.allSettled`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) の呼び出しで待つ必要があります。 diff --git a/files/ja/web/javascript/reference/statements/empty/index.md b/files/ja/web/javascript/reference/statements/empty/index.md index 0b9b7c62f51a7d..ccddaceb140d48 100644 --- a/files/ja/web/javascript/reference/statements/empty/index.md +++ b/files/ja/web/javascript/reference/statements/empty/index.md @@ -46,8 +46,8 @@ console.log(arr); 次の例は、おそらく意図的でない使用例です。 ```js example-bad -if (condition); // 注意: この "if" は何の意味もない! - killTheUniverse(); // この関数が常に実行される!!! +if (condition); // 注意: この "if" は何の意味もない! +killTheUniverse(); // この関数が常に実行される!!! ``` ## 仕様書 diff --git a/files/ja/web/javascript/reference/statements/import/index.md b/files/ja/web/javascript/reference/statements/import/index.md index ddaaf58aa035a5..fccff9f08b3590 100644 --- a/files/ja/web/javascript/reference/statements/import/index.md +++ b/files/ja/web/javascript/reference/statements/import/index.md @@ -7,7 +7,7 @@ l10n: {{jsSidebar("Statements")}} -静的な **`import`** 宣言は、他のモジュールによって[エクスポート](/ja/docs/Web/JavaScript/Reference/Statements/export)された読み込み専用のライブ{{glossary("binding", "バインディング")}}をインポートするために使用します。インポートしたバインディングは、バインディングをエクスポートしたモジュールによって更新される一方、インポートしているモジュールによって再代入することができないために、「*ライブバインディング*」と呼ばれています。 +静的な **`import`** 宣言は、他のモジュールによって[エクスポート](/ja/docs/Web/JavaScript/Reference/Statements/export)された読み込み専用のライブ{{glossary("binding", "バインディング")}}をインポートするために使用します。インポートしたバインディングは、バインディングをエクスポートしたモジュールによって更新される一方、インポートしているモジュールによって再代入することができないために、「_ライブバインディング_」と呼ばれています。 ソースファイルの中で `import` 宣言を使用するためには、ランタイムがそのファイルを[モジュール](/ja/docs/Web/JavaScript/Guide/Modules)と見なす必要があります。HTML では、{{HTMLElement("script")}} タグに `type="module"` を加えることがこれに相当します。モジュールは、宣言するかどうかにかかわらず、 {{JSxRef("Strict_mode","Strict モード")}}になります。 diff --git a/files/ja/web/javascript/reference/statements/switch/index.md b/files/ja/web/javascript/reference/statements/switch/index.md index 92ff4afa582421..29dd5a76bbd29e 100644 --- a/files/ja/web/javascript/reference/statements/switch/index.md +++ b/files/ja/web/javascript/reference/statements/switch/index.md @@ -226,15 +226,15 @@ switch (foo) { この例の出力は以下のとおりです。 -| 値 | 出力するテキスト | -| ----------------------------------------------------- | --------------------------------- | +| 値 | 出力するテキスト | +| --------------------------------------------------------------------- | --------------------------------- | | `foo` が `NaN` であるか、 `1`, `2`, `3`, `4`, `5`, `0` のどれでもない | Please pick a number from 0 to 5! | -| `0` | Output: So What Is Your Name? | -| `1` | Output: What Is Your Name? | -| `2` | Output: Your Name? | -| `3` | Output: Name? | -| `4` | Output: ? | -| `5` | Output: ! | +| `0` | Output: So What Is Your Name? | +| `1` | Output: What Is Your Name? | +| `2` | Output: Your Name? | +| `3` | Output: Name? | +| `4` | Output: ? | +| `5` | Output: ! | ### if...else チェーンによる代替 diff --git a/files/ja/web/javascript/reference/statements/throw/index.md b/files/ja/web/javascript/reference/statements/throw/index.md index c53c729c0e0830..2683d5b3180f46 100644 --- a/files/ja/web/javascript/reference/statements/throw/index.md +++ b/files/ja/web/javascript/reference/statements/throw/index.md @@ -48,8 +48,18 @@ function UserException(message) { function getMonthName(mo) { mo--; // 配列の添字のために月の数を調整する (1 = Jan, 12 = Dec) const months = [ - "Jan", "Feb", "Mar", "Apr", "May", "Jun", - "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", ]; if (months[mo] !== undefined) { return months[mo]; diff --git a/files/ja/web/javascript/reference/statements/try...catch/index.md b/files/ja/web/javascript/reference/statements/try...catch/index.md index f78513b63f6927..16f2a7e95148c6 100644 --- a/files/ja/web/javascript/reference/statements/try...catch/index.md +++ b/files/ja/web/javascript/reference/statements/try...catch/index.md @@ -100,7 +100,7 @@ try { if (e instanceof RangeError) { // 頻発する想定済みのエラーを処理する文 } else { - throw e; // エラーを変更しないまま送出し直す + throw e; // エラーを変更しないまま送出し直す } } ``` diff --git a/files/ja/web/javascript/reference/statements/var/index.md b/files/ja/web/javascript/reference/statements/var/index.md index 5b4db2082eaa3f..32dc4ad1c0c289 100644 --- a/files/ja/web/javascript/reference/statements/var/index.md +++ b/files/ja/web/javascript/reference/statements/var/index.md @@ -87,14 +87,14 @@ delete x; // 厳格モードでは SyntaxError。それ以外の場合は暗黙 ```js function foo() { - String("s") // `String` 関数が暗黙に見える + String("s"); // `String` 関数が暗黙に見える } ``` つまり、グローバルオブジェクトは最終的に修飾されていない識別子を検索することになります。`globalThis.String` と記述する必要はなく、修飾されていない `String` と記述すればよいのです。厳格モードでない場合は、スコープチェインで宣言されている同名の変数がない場合は、グローバルオブジェクト上にその名前のプロパティを作成しようとしていると仮定して、非修飾識別子に代入することになります。 ```js -foo = "f" // 厳格モードでない場合は、`foo` という名前のプロパティを作成しようとしていると見なす +foo = "f"; // 厳格モードでない場合は、`foo` という名前のプロパティを作成しようとしていると見なす Object.hasOwn(globalThis, "foo"); // true ``` @@ -212,7 +212,8 @@ var x = 0; // x はファイルスコープで宣言して、値 0 を代入 console.log(typeof z); // z はまだ存在していないため、 "undefined" になる -function a() { // a を呼び出すと、 +function a() { + // a を呼び出すと、 var y = 2; // y を関数 a のスコープで宣言して、値 2 を代入 console.log(x, y); // 0 2 diff --git a/files/ja/web/javascript/reference/statements/with/index.md b/files/ja/web/javascript/reference/statements/with/index.md index 92609b094a2912..b93e930ccc11eb 100644 --- a/files/ja/web/javascript/reference/statements/with/index.md +++ b/files/ja/web/javascript/reference/statements/with/index.md @@ -128,7 +128,7 @@ const r = 10; ```js const objectHavingAnEspeciallyLengthyName = { foo: true, bar: false }; -if ((o => o.foo && !o.bar)(objectHavingAnEspeciallyLengthyName)) { +if (((o) => o.foo && !o.bar)(objectHavingAnEspeciallyLengthyName)) { // This branch runs. } ``` diff --git a/files/ja/web/javascript/reference/strict_mode/index.md b/files/ja/web/javascript/reference/strict_mode/index.md index 7e8df8e0387d6b..9dd1e865377990 100644 --- a/files/ja/web/javascript/reference/strict_mode/index.md +++ b/files/ja/web/javascript/reference/strict_mode/index.md @@ -65,7 +65,7 @@ function sum(a = 1, b = 2) { ```js function myStrictFunction() { - // これはモジュールなので、既定で厳格モードです + // これはモジュールなので、既定で厳格モードです } export default myStrictFunction; ``` diff --git a/files/ja/web/javascript/reference/template_literals/index.md b/files/ja/web/javascript/reference/template_literals/index.md index 1bdd9ff42d2df1..2f6232593dd0dd 100644 --- a/files/ja/web/javascript/reference/template_literals/index.md +++ b/files/ja/web/javascript/reference/template_literals/index.md @@ -8,24 +8,24 @@ slug: Web/JavaScript/Reference/Template_literals テンプレートリテラルはバッククォート (`` ` ``) で区切られたリテラルで、*substitution*と呼ばれる埋め込み式が利用できます。 タグなし*テンプレートリテラルは文字列となるため、文字列の補間に便利です（エスケープされていない改行が許されるため、複数行の文字列も可能です）。 -タグつき*テンプレートリテラルは、リテラルから任意のテキストセグメントの配列と、任意の置換の値を引数として関数（*タグ関数*）を呼び出します。これは、 [DSL](https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%9B%BA%E6%9C%89%E8%A8%80%E8%AA%9E) に便利です。 +タグつき*テンプレートリテラルは、リテラルから任意のテキストセグメントの配列と、任意の置換の値を引数として関数（_タグ関数_）を呼び出します。これは、 [DSL](https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%9B%BA%E6%9C%89%E8%A8%80%E8%AA%9E) に便利です。 -テンプレートリテラルは非公式に「*テンプレート文字列*」と呼ばれることもありますが、文字列リテラルではないので、文字列リテラルが使えるところならばどこでも使えるわけではありません。また、タグ付けされたテンプレートリテラルが文字列になるとは限りません。何を作成するかはタグ関数次第です（もし何か作成するのであれば）。 +テンプレートリテラルは非公式に「_テンプレート文字列_」と呼ばれることもありますが、文字列リテラルではないので、文字列リテラルが使えるところならばどこでも使えるわけではありません。また、タグ付けされたテンプレートリテラルが文字列になるとは限りません。何を作成するかはタグ関数次第です（もし何か作成するのであれば）。 ## 構文 ```js // タグなし。これらは文字列を生成します。 -`string text` +`string text`; `string text line 1 - string text line 2` + string text line 2`; -`string text ${expression} string text` +`string text ${expression} string text`; // タグを付けると、関数 "example" を最初の引数にテンプレート、 // 後続の引数に置換値を指定して呼び出します。 -example`string text ${expression} string text` +example`string text ${expression} string text`; ``` ## 解説 @@ -39,7 +39,7 @@ example`string text ${expression} string text` テンプレートリテラル内でバッククォート文字をエスケープするには、バッククォート文字の前にバックスラッシュ (`\`) を置きます。 ```js -`\`` === '`' // --> true +`\`` === "`"; // --> true ``` ### 複数行の文字列 @@ -49,8 +49,7 @@ example`string text ${expression} string text` 通常の文字列を使う場合は、複数行の文字列を得るために次のような構文を使用する必要があります。 ```js -console.log('string text line 1\n' + -'string text line 2'); +console.log("string text line 1\n" + "string text line 2"); // "string text line 1 // string text line 2" ``` @@ -71,7 +70,7 @@ string text line 2`); ```js let a = 5; let b = 10; -console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); +console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20." ``` @@ -96,24 +95,28 @@ not ${2 * a + b}.`); ES5 の場合: ```js -let classes = 'header'; -classes += (isLargeScreen() ? - '' : item.isCollapsed ? - ' icon-expander' : ' icon-collapser'); +let classes = "header"; +classes += isLargeScreen() + ? "" + : item.isCollapsed + ? " icon-expander" + : " icon-collapser"; ``` ES2015 で入れ子なしのテンプレートリテラルの場合: ```js -const classes = `header ${ isLargeScreen() ? '' : - (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`; +const classes = `header ${ + isLargeScreen() ? "" : item.isCollapsed ? "icon-expander" : "icon-collapser" +}`; ``` ES2015 で入れ子にしたテンプレートリテラルの場合: ```js -const classes = `header ${ isLargeScreen() ? '' : - `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`; +const classes = `header ${ + isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}` +}`; ``` ### タグ付きテンプレート @@ -127,7 +130,7 @@ const classes = `header ${ isLargeScreen() ? '' : タグに使用される関数の名前は、自由に指定できます。 ```js -let person = 'Mike'; +let person = "Mike"; let age = 28; function myTag(strings, personExp, ageExp) { @@ -136,17 +139,17 @@ function myTag(strings, personExp, ageExp) { let str2 = strings[2]; // "." let ageStr; - if (ageExp > 99){ - ageStr = 'centenarian'; + if (ageExp > 99) { + ageStr = "centenarian"; } else { - ageStr = 'youngster'; + ageStr = "youngster"; } // テンプレートリテラルを用いて組み立てた文字列を返すこともできます return `${str0}${personExp}${str1}${ageStr}${str2}`; } -let output = myTag`That ${ person } is a ${ age }.`; +let output = myTag`That ${person} is a ${age}.`; console.log(output); // That Mike is a youngster. @@ -156,29 +159,29 @@ console.log(output); ```js function template(strings, ...keys) { - return (function(...values) { + return function (...values) { let dict = values[values.length - 1] || {}; let result = [strings[0]]; - keys.forEach(function(key, i) { + keys.forEach(function (key, i) { let value = Number.isInteger(key) ? values[key] : dict[key]; result.push(value, strings[i + 1]); }); - return result.join(''); - }); + return result.join(""); + }; } let t1Closure = template`${0}${1}${0}!`; //let t1Closure = template(["","","","!"],0,1,0); -t1Closure('Y', 'A'); // "YAY!" +t1Closure("Y", "A"); // "YAY!" -let t2Closure = template`${0} ${'foo'}!`; +let t2Closure = template`${0} ${"foo"}!`; //let t2Closure = template([""," ","!"],0,"foo"); -t2Closure('Hello', {foo: 'World'}); // "Hello World!" +t2Closure("Hello", { foo: "World" }); // "Hello World!" -let t3Closure = template`I'm ${'name'}. I'm almost ${'age'} years old.`; +let t3Closure = template`I'm ${"name"}. I'm almost ${"age"} years old.`; //let t3Closure = template(["I'm ", ". I'm almost ", " years old."], "name", "age"); -t3Closure('foo', {name: 'MDN', age: 30}); //"I'm MDN. I'm almost 30 years old." -t3Closure({name: 'MDN', age: 30}); //"I'm MDN. I'm almost 30 years old." +t3Closure("foo", { name: "MDN", age: 30 }); //"I'm MDN. I'm almost 30 years old." +t3Closure({ name: "MDN", age: 30 }); //"I'm MDN. I'm almost 30 years old." ``` ### 加工前の文字列 @@ -198,13 +201,13 @@ tag`string text line 1 \n string text line 2`; 加えて、 {{jsxref("String.raw()")}} メソッドがあり、既定のテンプレート関数のように文字列を連結した形で加工前の文字列を生成することができます。 ```js -let str = String.raw`Hi\n${2+3}!`; +let str = String.raw`Hi\n${2 + 3}!`; // "Hi\\n5!" str.length; // 6 -Array.from(str).join(','); +Array.from(str).join(","); // "H,i,\\,n,5,!" ``` @@ -222,7 +225,7 @@ ECMAScript 2016 時点では、タグ付きテンプレートの以下のエス このルールのもとでは、下に示す例のようなタグ付きテンプレートが問題となります。なぜなら、 ECMAScript の文法に従ってこのテキストを解釈しようとすると、パーサーは Unicode の有効のエスケープシーケンスを探そうとするも、不正な構文が検出されてしまうからです。 ```js -latex`\unicode` +latex`\unicode`; // 古い ECMAScript バージョン (ES2016 以前) では、以下のような例外が投げられる // SyntaxError: malformed Unicode character escape sequence ``` @@ -235,10 +238,10 @@ latex`\unicode` ```js function latex(str) { - return { "cooked": str[0], "raw": str.raw[0] } + return { cooked: str[0], raw: str.raw[0] }; } -latex`\unicode` +latex`\unicode`; // { cooked: undefined, raw: "\\unicode" } ``` diff --git a/files/ja/web/javascript/reference/trailing_commas/index.md b/files/ja/web/javascript/reference/trailing_commas/index.md index 82051b7a16ff63..c6659b6bb24ff9 100644 --- a/files/ja/web/javascript/reference/trailing_commas/index.md +++ b/files/ja/web/javascript/reference/trailing_commas/index.md @@ -26,11 +26,7 @@ JavaScript は、当初から配列リテラルで末尾のカンマを使用で JavaScript は配列の末尾のカンマを無視します。 ```js -var arr = [ - 1, - 2, - 3, -]; +var arr = [1, 2, 3]; arr; // [1, 2, 3] arr.length; // 3 @@ -39,7 +35,7 @@ arr.length; // 3 2 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は*疎らな*配列と呼ばれます (*密集した*配列は穴がありません)。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列を反復処理するとき、穴はスキップされます。 ```js -var arr = [1, 2, 3,,,]; +var arr = [1, 2, 3, , ,]; arr.length; // 5 ``` @@ -63,7 +59,7 @@ ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用 次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の `length` プロパティや `arguments` オブジェクトに影響を与えません。 -```js +```js-nolint function f(p) {} function f(p,) {} @@ -73,7 +69,7 @@ function f(p,) {} 末尾のカンマは、クラスやオブジェクトの[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)でも使用できます。

-```js +```js-nolint class C { one(a,) {} two(a, b,) {} @@ -89,7 +85,7 @@ var obj = { 次の 2 つの関数呼び出しはともに有効で等しいものです。 -```js +```js-nolint f(p); f(p,); @@ -114,7 +110,7 @@ function f(...p,) {} // SyntaxError: parameter after rest parameter 末尾のカンマは、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)の左辺でも使用できます。 -```js +```js-nolint // 末尾のカンマ付きで配列を分割代入 [a, b,] = [1, 2]; @@ -128,7 +124,7 @@ var {p, q,} = o; また、残余要素で使用すると、{{jsxref("SyntaxError")}} が発生します。 -```js example-bad +```js-nolint example-bad var [a, ...b,] = [1, 2, 3]; // SyntaxError: rest element may not have a trailing comma ``` @@ -140,7 +136,7 @@ var [a, ...b,] = [1, 2, 3]; どちらの行も `SyntaxError` が発生します。 ```js example-bad -JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse("[1, 2, 3, 4, ]"); JSON.parse('{"foo" : 1, }'); // SyntaxError JSON.parse: unexpected character // at line 1 column 14 of the JSON data @@ -149,7 +145,7 @@ JSON.parse('{"foo" : 1, }'); 正しく JSON を解釈するには、カンマを省略してください。 ```js example-good -JSON.parse('[1, 2, 3, 4 ]'); +JSON.parse("[1, 2, 3, 4 ]"); JSON.parse('{"foo" : 1 }'); ``` @@ -160,29 +156,21 @@ JSON.parse('{"foo" : 1 }'); #### 名前付きインポート ```js - import { - A, - B, - C, - } from 'D' +import { A, B, C } from "D"; - import { X, Y, Z } from 'W' +import { X, Y, Z } from "W"; - import { A as B, C as D, E as F } from 'Z'; // インポートの名前を変更 +import { A as B, C as D, E as F } from "Z"; // インポートの名前を変更 ``` #### 名前付きエクスポート ```js - export { - A, - B, - C - } +export { A, B, C }; - export { A, B, C }; +export { A, B, C }; - export { A as B, C as D, E as F }; // エクスポートの名前を変更 +export { A as B, C as D, E as F }; // エクスポートの名前を変更 ``` ### 数量接頭辞