トップ Vue.jsに関する質問 javascript　複数のオブジェクトを取得したい

編集履歴

回答編集履歴

テキスト修正

2020/01/22 01:46

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -99,7 +99,7 @@
 entries.filter(([key, value]) => {
    // 何らかの判定ロジック
    retrurn trueまたはfalse
-});
+})
 ```
 `function fetch_sub_industries(industry_id)`　では、プロパティのキーが、`industry_id`　と等しいかだけを見ればよいので、`value` は不要で、`key`のほうは id と呼ばれる値なので
@@ -108,7 +108,7 @@
 entries.filter(([id]) => {
    // 何らかの判定ロジック
    retrurn trueまたはfalse
-});
+})
 ```
@@ -119,7 +119,7 @@
 ```javascript
 entries.filter(([id]) => {
     return id !== industry_id
-});
+})
 ```
 と書けばよさそうですが、これだと、うまくいきません。
 なぜなら、関数`fetch_sub_industries` の引数 `industry_id` のほうは文字列ではなく、たとえば `1` だったりの整数が渡され、他方、
@@ -127,7 +127,7 @@
 ```javascript
 entries.filter(([id]) => {
     return id !== industry_id
-});
+})
 ```
 と書いた場合の filter のループで呼ばれる関数の引数（の配列要素の） `id` には `"1"`  だったりの文字列が渡されてくるため、
@@ -154,17 +154,17 @@
 ```javascript
 entries.filter(([id]) => {
     return +id !== industry_id
-});
+})
 ```
 とすれば、意図通りに filter が機能します。さらに、アロー関数の本体が１行であり return で値を返しているので、上記を詰めて、
 ```javascript
-entries.filter(([id]) => +id !== industry_id);
+entries.filter(([id]) => +id !== industry_id)
 ```
 と書いたものが、回答に挙げたコードになります。
 ちなみに、もし、`id` の型に合わせて、文字列の比較にするならば、`industry_id` のほうを文字列にする必要があるので、たとえば
 ```javascript
-entries.filter(([id]) => id !== `${industry_id}`);
+entries.filter(([id]) => id !== `${industry_id}`)
 ```
 のようにします。
 - **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/vYEvWpB?editors=0012](https://codepen.io/jun68ykt/pen/vYEvWpB?editors=0012)

テキスト修正

2020/01/22 01:46

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -112,7 +112,7 @@
 ```
-と書けます。
+と書いて、`id`という変数名で `["1", "スポーツ"]` の `"1"`  を受け取ります。
 次に、`// 何らかの判定ロジック` の部分を書いて、その結果を反映して true かfalse を返すようにします。
 `id` が `function fetch_sub_industries` に渡される `industry_id` に等しくない場合にのみ、filter によって残されればよいので、

テキスト修正

2020/01/22 00:21

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -226,6 +226,7 @@
   ・・・
 }
+f(["1", "スポーツ"]);
 ```
 と書くことで、`id` と `name` に直接、配列の先頭と２番目の要素が得られます。これは、配列の分割代入を、関数の引数に使った書き方です。分割代入については以下に説明されています。

テキスト修正

2020/01/21 23:57

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -94,7 +94,7 @@
 上記の配列 `entries` を filter でループさせるときに、filter の引数として与える関数には、上記の
 `["1", "スポーツ"]`
- という形、すなわち長さが２で先頭要素が元のオブジェクトのプロパティのキー（文字列です）、二番目の要素がプロパティの値である配列が引数として渡されてくるので、以下のようにすれば、`key`, `value` という変数名で、この配列の要素を受け取れます。
+ という形、すなわち長さが２で先頭要素が元のオブジェクトのプロパティのキー（文字列です）、二番目の要素がプロパティの値である配列が引数として渡されてくるので、以下のようにすれば、`key`, `value` という変数名で、この配列の要素を受け取れます。(以下のコードで `[key, value]` という書き方は分割代入と呼ばれ、追記5 に説明しました。)
 ```javascript
 entries.filter(([key, value]) => {
    // 何らかの判定ロジック

テキスト修正

2020/01/21 23:54

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -244,6 +244,6 @@
 }
 ```
-上記では、、`Object.entries` で得られる配列を `for ・・・ of`のループで得るときに、`・・・` の部分を`[key, value]` と書くことで分割代入を使い、キーと値を得ています。
+上記では、、`Object.entries` で得られる配列の要素を `for ・・・ of`のループで得るときに、`・・・` の部分を`[key, value]` と書くことで分割代入を使い、キーと値を得ています。
 以上、参考になれば幸いです。

テキスト修正

2020/01/21 23:36

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -195,5 +195,55 @@
 `id != industry_id`
 というコードを書くとESLintに警告されるので、型を合わせて `===` および `!==` を使うほうに慣れてきます。（実際私は、ここ数年、業務では `==` および `!=` をほとんど使ってないです。）
+### 追記5
+もう一点、
+> this.industriesが
+[[1: "スポーツ"], [2: "メディア"], [3: "建設"]]
+のようになっていて、
+.filter(([id]) =>
+で1,2,3が回るようになる？とすれば、なぜこれで1,2,3が回るのか。
+についてですが、２つの要素を持つ配列 `["1", "スポーツ"]` を引数にとる関数を書くときに、この配列を `ary`という引数で受けて、
+```javascript
+const f = (ary) => {
+  const id = ary[0];　 // "1"
+  const name = ary[1];  // "スポーツ"
+  ・・・
+}
+f(["1", "スポーツ"]);
+```
+と書くこともできますが、引数の `ary` を `[id, name]` として
+```javascript
+const f = ([id, name]) => {
+  console.log(id); //=> "1"
+  console.log(name); //=> "スポーツ"
+  ・・・
+}
+```
+と書くことで、`id` と `name` に直接、配列の先頭と２番目の要素が得られます。これは、配列の分割代入を、関数の引数に使った書き方です。分割代入については以下に説明されています。
+- MDN: [分割代入](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+また、MDNの[Object.entriesの説明](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) の冒頭にも、以下のようなサンプルがあります。
+```javascript
+const object1 = {
+  a: 'somestring',
+  b: 42
+};
+for (let [key, value] of Object.entries(object1)) {
+  console.log(`${key}: ${value}`);
+}
+```
+上記では、、`Object.entries` で得られる配列を `for ・・・ of`のループで得るときに、`・・・` の部分を`[key, value]` と書くことで分割代入を使い、キーと値を得ています。
 以上、参考になれば幸いです。

テキスト修正

2020/01/21 23:33

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -75,7 +75,7 @@
 - **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/qBELPgY?editors=0012](https://codepen.io/jun68ykt/pen/qBELPgY?editors=0012)
-すなわち、`this.industries`　のプロパティのキーは、 1,2,3 という整数値ではなく、文字列の “1” , “2”, “3” として保持されています。
+すなわち、`this.industries`　のプロパティのキーは、 1,2,3 という整数値ではなく、文字列の "1" , "2", "3" として保持されています。
 同様に、一番初めに挙げた回答コード

テキスト修正

2020/01/21 23:07

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -34,9 +34,9 @@
 - **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/abzPdgm?editors=0012](https://codepen.io/jun68ykt/pen/abzPdgm?editors=0012)
-以上、参考になれば幸いです。
 ### 追記3
@@ -44,4 +44,156 @@
 以下、そのサンプルです。
-- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/QWwzNGL?editors=1010](https://codepen.io/jun68ykt/pen/QWwzNGL?editors=1010)
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/QWwzNGL?editors=1010](https://codepen.io/jun68ykt/pen/QWwzNGL?editors=1010)
+### 追記4
+コメントから頂きました
+> ソースをみて不明な点があり、
+について回答します。
+まず、
+MDNの [JavaScript のデータ型とデータ構造](https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures) の中にある、**Object**　のセクションのプロパティの説明に、以下のように書かれています。
+> キー値は String 値または Symbol 値です。
+これを確かめるために、
+```javascript
+this.industries = { 1: "スポーツ", 2: "メディア", 3: "建設" };
+console.log(Object.keys(this.industries));
+```
+とすると、以下で確認できるように、 `[ 1, 2, 3 ]` ではなく、 `["1", "2", "3"]` と表示されます。
+- **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/qBELPgY?editors=0012](https://codepen.io/jun68ykt/pen/qBELPgY?editors=0012)
+すなわち、`this.industries`　のプロパティのキーは、 1,2,3 という整数値ではなく、文字列の “1” , “2”, “3” として保持されています。
+同様に、一番初めに挙げた回答コード
+- **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/JjowGyG?editors=0012](https://codepen.io/jun68ykt/pen/JjowGyG?editors=0012)
+にある、以下の行
+```javascript
+let entries = Object.entries(this.industries);
+```
+で得られる `entries` を console.log で表示すると、以下のようになり、エントリーのキーは、"1", "2", "3" と、文字列として取得されてくることが確認できると思います。
+ ```
+[["1", "スポーツ"], ["2", "メディア"], ["3", "建設"]]
+```
+上記の配列 `entries` を filter でループさせるときに、filter の引数として与える関数には、上記の
+`["1", "スポーツ"]`
+ という形、すなわち長さが２で先頭要素が元のオブジェクトのプロパティのキー（文字列です）、二番目の要素がプロパティの値である配列が引数として渡されてくるので、以下のようにすれば、`key`, `value` という変数名で、この配列の要素を受け取れます。
+```javascript
+entries.filter(([key, value]) => {
+   // 何らかの判定ロジック
+   retrurn trueまたはfalse
+});
+```
+`function fetch_sub_industries(industry_id)`　では、プロパティのキーが、`industry_id`　と等しいかだけを見ればよいので、`value` は不要で、`key`のほうは id と呼ばれる値なので
+```javascript
+entries.filter(([id]) => {
+   // 何らかの判定ロジック
+   retrurn trueまたはfalse
+});
+```
+と書けます。
+次に、`// 何らかの判定ロジック` の部分を書いて、その結果を反映して true かfalse を返すようにします。
+`id` が `function fetch_sub_industries` に渡される `industry_id` に等しくない場合にのみ、filter によって残されればよいので、
+```javascript
+entries.filter(([id]) => {
+    return id !== industry_id
+});
+```
+と書けばよさそうですが、これだと、うまくいきません。
+なぜなら、関数`fetch_sub_industries` の引数 `industry_id` のほうは文字列ではなく、たとえば `1` だったりの整数が渡され、他方、
+```javascript
+entries.filter(([id]) => {
+    return id !== industry_id
+});
+```
+と書いた場合の filter のループで呼ばれる関数の引数（の配列要素の） `id` には `"1"`  だったりの文字列が渡されてくるため、
+```
+id !== industry_id
+```
+は（両辺の型が違うので、値を比較するまでもなく、）必ずtrueになります。したがって `fetch_sub_industries(1)`  としたときも `["1", "スポーツ"]` が除外されず、結果として`this.industries`　は元のオブジェクトの３つのエントリ（キーと値の組）をどれも持つものとなってしまいます。以下で確認できます。
+- **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/rNaoYjJ?editors=0012](https://codepen.io/jun68ykt/pen/rNaoYjJ?editors=0012)
+`!==`　によって意図した判定が行われるには、両辺の型を揃える必要がありますが、回答のコードでは、関数`fetch_sub_industries`　の引数`industry_id`は整数値が渡されることを前提として、両辺を数値にあわせることにしました。そのためには  filter のループで使われる `id` のほうを文字列から数値に変換しなければなりません。数字の文字列である `id` を数値に変換する方法としては、`Number(id)` や  `parseInt(id)` (より厳密には、`parseInt(id, 10)` ) とすればよいですが、もっと簡単に書く方法として
+```
++id
+```
+と書くことでも数値が得られます。 これにより、`id` がたとえば `"1"`  ならば、数値の `1` が得られます。このような `+` は単項加算（unary plus)と呼ばれます。以下は MDN の単項加算の説明です。
+- MDN: [単項加算 (+)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_)
+単項加算を使って、`!==` の両辺を数値にあわせて、
+```javascript
+entries.filter(([id]) => {
+    return +id !== industry_id
+});
+```
+とすれば、意図通りに filter が機能します。さらに、アロー関数の本体が１行であり return で値を返しているので、上記を詰めて、
+```javascript
+entries.filter(([id]) => +id !== industry_id);
+```
+と書いたものが、回答に挙げたコードになります。
+ちなみに、もし、`id` の型に合わせて、文字列の比較にするならば、`industry_id` のほうを文字列にする必要があるので、たとえば
+```javascript
+entries.filter(([id]) => id !== `${industry_id}`);
+```
+のようにします。
+- **動作確認用 CodePen: ** [https://codepen.io/jun68ykt/pen/vYEvWpB?editors=0012](https://codepen.io/jun68ykt/pen/vYEvWpB?editors=0012)
+上記のように、厳密な比較の `!==` を使うと、数値か文字列のいずれかに型を合わせる必要がありますが、これがやや煩雑と思えば、厳密でない比較の `!=` を使って
+```javascript
+id != industry_id
+```
+と書くことで、文字列である `id` のほうが、数値(Number型)に変換されてから、その値が、`industry_id`　と等しくないかを判定します。`!==` と `!=` の違い（あるいは `===` と `==` の違い）を確認するには、以下に説明があります。
+- MDN: [等価演算子の使用](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_equality_operators)
+上記のような場合、 `id` と `industry_id` とで、いずれかの型を他方に、（たとえば上記のように `id` に単項加算を追加して、）明示的に合わせて `===` や `!==` で比較したほうがよいのか、あるいは `==` や `!=` を使って、型を明示的に合わせることを不要にして比較するほうがよいのかについては、「時と場合による」という考え方もできますが、ひとつのガイドとして、javascript のコードチェックツールの ESLint の様々なルールの中に
+- `==` および `!=` は使わないようにして、 `===` および `!==` を使うべき
+という、以下のルール
+- ESLint: [Require === and !== (eqeqeq)](https://eslint.org/docs/rules/eqeqeq)
+> It is considered good practice to use the type-safe equality operators === and !== instead of their regular counterparts == and !=.
+があります。ですので、（私もそうですが）ふだん ESLint を効かせながらコードを書いていると、 `!=` を使った
+`id != industry_id`
+というコードを書くとESLintに警告されるので、型を合わせて `===` および `!==` を使うほうに慣れてきます。（実際私は、ここ数年、業務では `==` および `!=` をほとんど使ってないです。）
+以上、参考になれば幸いです。

テキスト修正

2020/01/21 23:04

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -34,4 +34,14 @@
 - **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/abzPdgm?editors=0012](https://codepen.io/jun68ykt/pen/abzPdgm?editors=0012)
-以上、参考になれば幸いです。
+以上、参考になれば幸いです。
+### 追記3
+上記の回答は、ご質問にある関数 `fetch_sub_industries`　を、ご質問にある意図通りにするための修正案ですが、２つの`<select>` を連動させて、１つ目の `seelct` で選ばれた選択肢を、2つ目の `select` では表示させないようにすることが主目的なのであれば、２つの`select`は両方とも常に`option`を３つ持つようにしておき、1つ目で選ばれた選択肢を２つ目で非表示にするために、CSSの `display` を `none` にするという手もあるかと思います。
+以下、そのサンプルです。
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/QWwzNGL?editors=1010](https://codepen.io/jun68ykt/pen/QWwzNGL?editors=1010)

テキスト修正

2020/01/21 14:27

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -1,16 +1,15 @@
 こんにちは
-`filter`を使うのであれば、以下のようにすればよいかと思います。
+ご質問に挙げられているコードの意図に沿って、関数 `fetch_sub_industries`  は、 `this.industries` を新しいオブジェクトで書き換えるものとします。この前提で、`filter`を使うのであれば、以下のようにすればよいかと思います。
 ```javascript
 function fetch_sub_industries(industry_id) {
     let entries = Object.entries(this.industries);
-    entries = entries.filter(([id, name]) => +id !==  industry_id);
+    entries = entries.filter(([id]) => +id !==  industry_id);
-    return Object.fromEntries(entries);
+    this.industries = Object.fromEntries(entries);
 }
 ```
-- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/eYmbNQR?editors=0012](https://codepen.io/jun68ykt/pen/eYmbNQR?editors=0012)
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/JjowGyG?editors=0012](https://codepen.io/jun68ykt/pen/JjowGyG?editors=0012)
 ### 追記
@@ -18,9 +17,21 @@
 ```javascript
 function fetch_sub_industries(industry_id) {
-    return _.omit(this.industries, industry_id);
+    this.industries = _.omit(this.industries, industry_id);
 }
 ```
-- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/qBELOaL?editors=0012](https://codepen.io/jun68ykt/pen/qBELOaL?editors=0012)
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/wvBRMqj?editors=0012](https://codepen.io/jun68ykt/pen/wvBRMqj?editors=0012)
+### 追記2
+新しいオブジェクトを作って、`this.industries` に再度代入するのではなく、現状の `this.industries` から、単に `industry_id`　で指定されるプロパティを除去すればよいのであれば、以下でもよいかと思います。
+```javascript
+function fetch_sub_industries(industry_id) {
+    delete this.industries[industry_id];
+}
+```
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/abzPdgm?editors=0012](https://codepen.io/jun68ykt/pen/abzPdgm?editors=0012)
 以上、参考になれば幸いです。

テキスト修正

2020/01/21 13:49

投稿

jun68ykt

スコア9058

answer CHANGED Viewed

@@ -10,4 +10,17 @@
 }
 ```
-- 動作確認用 CodePen: [https://codepen.io/jun68ykt/pen/eYmbNQR?editors=0012](https://codepen.io/jun68ykt/pen/eYmbNQR?editors=0012)
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/eYmbNQR?editors=0012](https://codepen.io/jun68ykt/pen/eYmbNQR?editors=0012)
+### 追記
+配列やオブジェクトの操作で便利なライブラリ lodash の [_.omit](https://lodash.com/docs/#omit) を使うと、以下のように手短かに書けます。
+```javascript
+function fetch_sub_industries(industry_id) {
+    return _.omit(this.industries, industry_id);
+}
+```
+- **動作確認用 CodePen: **[https://codepen.io/jun68ykt/pen/qBELOaL?editors=0012](https://codepen.io/jun68ykt/pen/qBELOaL?editors=0012)
+以上、参考になれば幸いです。