トップ JavaScriptに関する質問よくある範囲外判定コード、他の書き方を知りたいです。【たぶん基本】

編集履歴

回答編集履歴

テキスト修正

2018/08/11 00:42

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,16 +1,18 @@
 こんにちは。
+ご質問に
 > もっといい感じの書き方があるのではないでしょうか。
-というご質問を 「`if`〜 `else` を使わないで書いてみる」というお題と解釈しての回答になりますが、以下でどうでしょう？
+とあります。何をもって `いい感じ` のコードとするかは、回答者の私見に委ねられているものと思いますが、私は 「`if`〜 `else` を使わないで書いてみるとどうなりますか？」というお題と解釈したので、それに沿っての回答になります。
+[Math.min](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/min) と[Math.max](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)を使って、以下でどうでしょう？
 ```javascript
 x = Math.min(COL-1, Math.max(0, x));
 y = Math.min(ROW-1, Math.max(0, y));
 ```
-ただし、上記はあくまでコードのタイプ量の少なさにこだわった書き方です。
+上記はあくまでコード量の少なさ、見た目のコードの短さにこだわった書き方です。
 参考までに、stackoverflow にも同様の質問（javascriptではないですが。)
 - [Where can I find the “clamp” function in .NET?](https://stackoverflow.com/questions/2683442/)

テキスト修正

2018/08/11 00:42

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,11 +1,35 @@
 こんにちは。
-以下でどうでしょう？
+> もっといい感じの書き方があるのではないでしょうか。
+というご質問を 「`if`〜 `else` を使わないで書いてみる」というお題と解釈しての回答になりますが、以下でどうでしょう？
 ```javascript
 x = Math.min(COL-1, Math.max(0, x));
 y = Math.min(ROW-1, Math.max(0, y));
 ```
+ただし、上記はあくまでコードのタイプ量の少なさにこだわった書き方です。
+参考までに、stackoverflow にも同様の質問（javascriptではないですが。)
+- [Where can I find the “clamp” function in .NET?](https://stackoverflow.com/questions/2683442/)
+が挙がっていて、こちらの回答の中にも、`Math.Min` と `Math.Max`を使う、以下の回答があります。
+- [https://stackoverflow.com/a/20443081](https://stackoverflow.com/a/20443081)
+ですが、上記の回答に対する[このコメント](https://stackoverflow.com/questions/2683442/where-can-i-find-the-clamp-function-in-net#comment53011741_20443081)で指摘されているように、一回余分な比較が発生する余地があります。
+余分な比較を発生させず、かつ一行で書くのであれば、上記の投稿で、質問者さんが最初に
+> I would like to clamp a value x to a range [a, b]:
+> x = (x < a) ? a : ((x > b) ? b : x);
+と書いているように、三項演算子の利用も検討されるとよいかと思います。
+---
 **追記1**
 ご質問の冒頭に、

テキスト追加

2018/08/10 21:56

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -11,7 +11,7 @@
 ご質問の冒頭に、
 > 座標(x, y)が・・・
-とありましたので、座標上の点を処理するコードのリファクタリングという観点で、以下を追記します。
+とありましたので、座標上の点を処理するコードのリファクタという観点で、以下を追記します。やることは以下です。
 - 座標上の点クラス `Point` を作成
 - `Point`を拡張して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成

テキスト追加

2018/08/10 02:57

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -14,7 +14,7 @@
 とありましたので、座標上の点を処理するコードのリファクタリングという観点で、以下を追記します。
 - 座標上の点クラス `Point` を作成
-- `Point`をを拡張して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成
+- `Point`を拡張して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成
 - なお以下では、応用であることを明確にするため、`Point` インスタンスは、xyz軸を持つ３次元空間の点としています。
 上記にそって、作ったコードが以下です。

テキスト追加

2018/08/10 02:33

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,18 +1,24 @@
 こんにちは。
-例えば以下ではどうでしょう？
+以下でどうでしょう？
 ```javascript
 x = Math.min(COL-1, Math.max(0, x));
 y = Math.min(ROW-1, Math.max(0, y));
 ```
-以下は蛇足です。
+**追記1**
 ご質問の冒頭に、
 > 座標(x, y)が・・・
-とありましたので、座標上の点クラス `Point` を作成し、これを拡張して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成してみました。なお以下では、応用であることを明確にするため、`Point` インスタンスは、xyz軸を持つ３次元空間の点としています。
+とありましたので、座標上の点を処理するコードのリファクタリングという観点で、以下を追記します。
+- 座標上の点クラス `Point` を作成
+- `Point`をを拡張して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成
+- なお以下では、応用であることを明確にするため、`Point` インスタンスは、xyz軸を持つ３次元空間の点としています。
+上記にそって、作ったコードが以下です。
 ```javascript
 class Point {
     constructor(x, y, z) {
@@ -54,7 +60,7 @@
 [https://jsfiddle.net/jun68ykt/cs86vtj3/15/](https://jsfiddle.net/jun68ykt/cs86vtj3/15/)
 ---
-**追記**
+**追記2**
 もうひとつ蛇足ですが、上記の`RestrictedPoint` の書き方として、アクセサを使う手もありそうです。

テキスト追加

2018/08/10 02:33

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -124,4 +124,4 @@
 [https://jsfiddle.net/jun68ykt/cs86vtj3/73/](https://jsfiddle.net/jun68ykt/cs86vtj3/73/)
-アクセサを使う利点としては、上記のコードの最後の２行に書いてあるように、`p2.x = 1000;` と代入しても、 `p2.x` は X座標の上限値の`99`を返すようにできることです。
+アクセサを使う利点としては、上記のコードの最後の２行に書いてあるように、`p2.x = 1000;` と代入したつもりでも、 `p2.x` は X座標の上限値の`99`を返すようにできることです。

テキスト追加

2018/08/10 02:21

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -6,9 +6,13 @@
 y = Math.min(ROW-1, Math.max(0, y));
 ```
+以下は蛇足です。
+ご質問の冒頭に、
-蛇足ですが、上記のように`Math.min`と`Math.max`を使った例として、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される、３次元空間の点`RestrictedPoint`を作成してみました。
+> 座標(x, y)が・・・
+とありましたので、座標上の点クラス `Point` を作成し、これを拡張して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成してみました。なお以下では、応用であることを明確にするため、`Point` インスタンスは、xyz軸を持つ３次元空間の点としています。
 ```javascript
 class Point {
     constructor(x, y, z) {

テキスト追加

2018/08/10 02:20

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -86,22 +86,18 @@
     };
   }
-  get x() {
+  get(axis) {
-    const conf = this.constructor.config().x;
+    const conf = this.constructor.config()[axis];
-    return Math.min(conf.max, Math.max(conf.min, this._x));
+    return Math.min(conf.max, Math.max(conf.min, this[`_${axis}`]));
   }
+  get x() { return this.get('x'); }
   set x(value) { this._x = value; }
-  get y() {
-    const conf = this.constructor.config().y;
+  get y() { return this.get('y'); }
-    return Math.min(conf.max, Math.max(conf.min, this._y));
-  }
   set y(value) { this._y = value; }
-  get z() {
-    const conf = this.constructor.config().z;
+  get z() { return this.get('z'); }
-    return Math.min(conf.max, Math.max(conf.min, this._z));
-  }
   set z(value) { this._z = value; }
 }
@@ -122,6 +118,6 @@
 以下に上記のコードを上げました。
-[https://jsfiddle.net/jun68ykt/cs86vtj3/70/](https://jsfiddle.net/jun68ykt/cs86vtj3/70/)
+[https://jsfiddle.net/jun68ykt/cs86vtj3/73/](https://jsfiddle.net/jun68ykt/cs86vtj3/73/)
-上記のコードの最後の２行に書いてあるように、`p2.x = 1000` と代入しても、 `p2.x` は X座標の上限値の`99`を返します。
+アクセサを使う利点としては、上記のコードの最後の２行に書いてあるように、`p2.x = 1000;` と代入しても、 `p2.x` は X座標の上限値の`99`を返すようにできることです。

テキスト修正

2018/08/10 02:03

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -122,6 +122,6 @@
 以下に上記のコードを上げました。
-[https://jsfiddle.net/cs86vtj3/68/](https://jsfiddle.net/cs86vtj3/68/)
+[https://jsfiddle.net/jun68ykt/cs86vtj3/70/](https://jsfiddle.net/jun68ykt/cs86vtj3/70/)
 上記のコードの最後の２行に書いてあるように、`p2.x = 1000` と代入しても、 `p2.x` は X座標の上限値の`99`を返します。

テキスト追加

2018/08/10 01:53

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -122,6 +122,6 @@
 以下に上記のコードを上げました。
-[https://jsfiddle.net/cs86vtj3/66/](https://jsfiddle.net/cs86vtj3/66/)
+[https://jsfiddle.net/cs86vtj3/68/](https://jsfiddle.net/cs86vtj3/68/)
 上記のコードの最後の２行に書いてあるように、`p2.x = 1000` と代入しても、 `p2.x` は X座標の上限値の`99`を返します。

テキスト追加

2018/08/10 01:52

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -122,6 +122,6 @@
 以下に上記のコードを上げました。
-[https://jsfiddle.net/cs86vtj3/65/](https://jsfiddle.net/cs86vtj3/65/)
+[https://jsfiddle.net/cs86vtj3/66/](https://jsfiddle.net/cs86vtj3/66/)
 上記のコードの最後の２行に書いてあるように、`p2.x = 1000` と代入しても、 `p2.x` は X座標の上限値の`99`を返します。

テキスト追加

2018/08/10 01:40

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -47,4 +47,81 @@
 ```
 以下、上記を試行するサンプルです。
-[https://jsfiddle.net/jun68ykt/cs86vtj3/15/](https://jsfiddle.net/jun68ykt/cs86vtj3/15/)
+[https://jsfiddle.net/jun68ykt/cs86vtj3/15/](https://jsfiddle.net/jun68ykt/cs86vtj3/15/)
+---
+**追記**
+もうひとつ蛇足ですが、上記の`RestrictedPoint` の書き方として、アクセサを使う手もありそうです。
+```javascript
+class Point {
+  constructor(x=0, y=0, z=0) {
+    this._x = x;
+    this._y = y;
+    this._z = z;
+  }
+  get x() { return this._x; }
+  set x(value) { this._x = value; }
+  get y() { return this._y; }
+  set y(value) { this._y = value; }
+  get z() { return this._z; }
+  set z(value) { this._z = value; }
+  toString() {
+    return `(x: ${this.x}, y: ${this.y}, z: ${this.z})`;
+  }
+}
+class RestrictedPoint extends Point {
+  static config() {
+    return {
+      x: { min: 0, max: 99 }, // X座標は0以上９９以下
+      y: { min: 0, max: 199 }, // Y座標は0以上1９９以下
+      z: { min: 100, max: 399 } // Z座標は100以上399以下
+    };
+  }
+  get x() {
+    const conf = this.constructor.config().x;
+    return Math.min(conf.max, Math.max(conf.min, this._x));
+  }
+  set x(value) { this._x = value; }
+  get y() {
+    const conf = this.constructor.config().y;
+    return Math.min(conf.max, Math.max(conf.min, this._y));
+  }
+  set y(value) { this._y = value; }
+  get z() {
+    const conf = this.constructor.config().z;
+    return Math.min(conf.max, Math.max(conf.min, this._z));
+  }
+  set z(value) { this._z = value; }
+}
+const p1 = new Point(-1, 230, 50);
+console.log(`${p1}`);  // => (x: -1, y: 230, z: 50)
+p1.x = 1000;
+console.log(p1.x);  // => 1000
+const p2 = new RestrictedPoint(-1, 230, 50);
+console.log(`${p2}`);  // => (x: 0, y: 199, z: 100)
+p2.x = 1000;
+console.log(p2.x);  // => 99
+```
+以下に上記のコードを上げました。
+[https://jsfiddle.net/cs86vtj3/65/](https://jsfiddle.net/cs86vtj3/65/)
+上記のコードの最後の２行に書いてあるように、`p2.x = 1000` と代入しても、 `p2.x` は X座標の上限値の`99`を返します。

テキスト修正

2018/08/10 01:38

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -7,7 +7,7 @@
 ```
-蛇足ですが、上記のように`Math.min`と`Math.max`を使った例として、３次元空間の点 `Point` を継承して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成してみました。
+蛇足ですが、上記のように`Math.min`と`Math.max`を使った例として、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される、３次元空間の点`RestrictedPoint`を作成してみました。
 ```javascript
 class Point {

テキスト修正

2018/08/09 23:24

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -26,9 +26,8 @@
     adjust() {
         for ( const [axis, value] of Object.entries(this)) {
-            const maxValue = RestrictedPoint.config[axis].max;
-            const minValue = RestrictedPoint.config[axis].min;
+            const config = this.constructor.config[axis];
-            this[axis] =  Math.min(maxValue, Math.max(minValue, value));
+            this[axis] =  Math.min(config.max, Math.max(config.min, value));
         }
     }
 }
@@ -48,4 +47,4 @@
 ```
 以下、上記を試行するサンプルです。
-[https://jsfiddle.net/jun68ykt/cs86vtj3/11/](https://jsfiddle.net/jun68ykt/cs86vtj3/11/)
+[https://jsfiddle.net/jun68ykt/cs86vtj3/15/](https://jsfiddle.net/jun68ykt/cs86vtj3/15/)

テキスト修正

2018/08/09 23:20

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -7,11 +7,8 @@
 ```
----
-補足
+蛇足ですが、上記のように`Math.min`と`Math.max`を使った例として、３次元空間の点 `Point` を継承して、あらかじめ設定された最小値と最大値の範囲に収まるように各座標が調整される`RestrictedPoint`を作成してみました。
-蛇足ですが、上記を使って、３次元座標の点 `Point` を継承して、各座標の最大値と最小値の範囲に収まるように調整される `RestrictedPoint` を作成してみました。
 ```javascript
 class Point {
     constructor(x, y, z) {

テキスト修正

2018/08/09 23:13

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -41,6 +41,13 @@
     y: { min: 0, max: 199 }, // Y座標は0以上1９９以下
     z: { min: 100, max: 399 } // Z座標は100以上399以下
 };
+const p1 = new Point(-1, 230, 50);
+console.log(p1); // => Object {x=-1, y=230, z=50}
+const p2 = new RestrictedPoint(-1, 230, 50);
+console.log(p2); // => Object {x=0, y=199, z=100}
 ```
 以下、上記を試行するサンプルです。

テキスト修正

2018/08/09 20:30

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -5,4 +5,43 @@
 x = Math.min(COL-1, Math.max(0, x));
 y = Math.min(ROW-1, Math.max(0, y));
-```
+```
+---
+補足
+蛇足ですが、上記を使って、３次元座標の点 `Point` を継承して、各座標の最大値と最小値の範囲に収まるように調整される `RestrictedPoint` を作成してみました。
+```javascript
+class Point {
+    constructor(x, y, z) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+}
+class RestrictedPoint extends Point {
+    constructor(x, y, z) {
+        super(x, y, z);
+        this.adjust();
+    }
+    adjust() {
+        for ( const [axis, value] of Object.entries(this)) {
+            const maxValue = RestrictedPoint.config[axis].max;
+            const minValue = RestrictedPoint.config[axis].min;
+            this[axis] =  Math.min(maxValue, Math.max(minValue, value));
+        }
+    }
+}
+RestrictedPoint.config = {
+    x: { min: 0, max: 99 }, // X座標は0以上９９以下
+    y: { min: 0, max: 199 }, // Y座標は0以上1９９以下
+    z: { min: 100, max: 399 } // Z座標は100以上399以下
+};
+```
+以下、上記を試行するサンプルです。
+[https://jsfiddle.net/jun68ykt/cs86vtj3/11/](https://jsfiddle.net/jun68ykt/cs86vtj3/11/)