teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

6

テキスト修正

2018/10/22 13:11

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -32,9 +32,9 @@
32
32
 
33
33
  参考になれば幸いです。
34
34
 
35
- #### 追記
35
+ #### 追記1
36
36
 
37
- まとめるオブジェクトとして、[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使うと、上記のコードで [Array.prototype.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) に渡す関数を、以下のように短く書けます。
37
+ まとめるオブジェクトとして、[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使うと、上記のコードで [Array.prototype.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) に渡す関数を、以下のように少し短く書けます。
38
38
 
39
39
  ```javascript
40
40
  const values = Array.prototype.reduce.call(

5

テキスト修正

2018/10/22 13:11

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -70,4 +70,36 @@
70
70
 
71
71
  - 上記コードのサンプル: [https://jsfiddle.net/jun68ykt/xhnt7cp9/3/](https://jsfiddle.net/jun68ykt/xhnt7cp9/3/)
72
72
 
73
- ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト(ブラウザでは `window`)のプロパティに、値を保存をしておくようなことは、あまりやりません。
73
+ ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト(ブラウザでは `window`)のプロパティに、値を保存をしておくようなことは、あまりやりません。
74
+
75
+ #### 追記3
76
+
77
+ 蛇足ではありますが、もうひとつお節介ついでに、「こうすればまとめるプログラムを書かなくても、最初からまとまっているといえるのでは?」という例を挙げます。
78
+
79
+ 以下のように`<input>`要素を `<form>` でくくっておき、`<input>` には id ではなく name 属性を付加しておきます。
80
+
81
+ ```html
82
+ <form>
83
+ <input name="num1" value="10" /><br />
84
+ <input name="num2" value="11" /><br />
85
+ <input name="num3" value="12" /><br />
86
+ <input name="num4" value="13" /><br />
87
+ <input name="num5" value="14" /><br />
88
+ <input name="num6" value="15" /><br />
89
+ <input name="num7" value="16" /><br />
90
+ <input name="num8" value="17" /><br />
91
+ <input name="num9" value="18" /><br />
92
+ <input name="num10" value="19" />
93
+ </form>
94
+ ```
95
+
96
+ 上記のようにすると、以下で値が取り出せます。
97
+
98
+ ```javascript
99
+ const f = document.forms[0];
100
+
101
+ console.log(f.num1.value);  // => 10
102
+ console.log(f.num10.value); // => 19
103
+ ```
104
+
105
+ - 上記のサンプル: [https://jsfiddle.net/jun68ykt/1mhcj7k3/3/](https://jsfiddle.net/jun68ykt/1mhcj7k3/3/)

4

テキスト修正

2018/10/22 12:47

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  #### 追記2
50
50
 
51
- 質問への追記・修正に
51
+ 質問への追記・修正のご返信
52
52
 
53
53
  > mi_mi 2018/10/22 16:38
54
54
  > ...

3

テキスト修正

2018/10/22 12:27

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -44,4 +44,30 @@
44
44
  );
45
45
  ```
46
46
 
47
- - 上記のコードのサンプル: [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
47
+ - 上記のコードのサンプル: [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
48
+
49
+ #### 追記2
50
+
51
+ 質問への追記・修正にて
52
+
53
+ > mi_mi 2018/10/22 16:38
54
+ > ...
55
+ > var num1v = document.getElementById("num1").valueの num1vの部分も使用できるようにしたいです。 例えばconsole.log(num1v)で値が表示されるような。
56
+
57
+ とありましたが、以下のようにすると、 `console.log(num1v);` で `id="num1"` の要素の value が表示されるようにできます。
58
+
59
+ ```javascript
60
+ Array.prototype.forEach.call(
61
+ document.getElementsByTagName('input'),
62
+ input => {
63
+ window[`${input.id}v`] = input.value;
64
+ }
65
+ );
66
+
67
+ console.log(num1v);
68
+ console.log(num10v);
69
+ ```
70
+
71
+ - 上記コードのサンプル: [https://jsfiddle.net/jun68ykt/xhnt7cp9/3/](https://jsfiddle.net/jun68ykt/xhnt7cp9/3/)
72
+
73
+ ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト(ブラウザでは `window`)のプロパティに、値を保存をしておくようなことは、あまりやりません。

2

テキスト修正

2018/10/22 12:20

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -30,4 +30,18 @@
30
30
 
31
31
  - [https://jsfiddle.net/jun68ykt/mbz8x97g/3/](https://jsfiddle.net/jun68ykt/mbz8x97g/3/)
32
32
 
33
- 参考になれば幸いです。
33
+ 参考になれば幸いです。
34
+
35
+ #### 追記
36
+
37
+ まとめるオブジェクトとして、[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使うと、上記のコードで [Array.prototype.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) に渡す関数を、以下のように短く書けます。
38
+
39
+ ```javascript
40
+ const values = Array.prototype.reduce.call(
41
+ document.getElementsByTagName('input'),
42
+ (m, input) => m.set(input.id, input.value),
43
+ new Map()
44
+ );
45
+ ```
46
+
47
+ - 上記のコードのサンプル: [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)

1

テキスト修正

2018/10/22 08:55

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -13,7 +13,7 @@
13
13
  とのご返答を頂きましたので、上記の趣旨のコード例を以下に回答します。
14
14
 
15
15
  ```javascript
16
- var values = Array.prototype.reduce.call(
16
+ const values = Array.prototype.reduce.call(
17
17
  document.getElementsByTagName('input'),
18
18
  (obj, input) => {
19
19
  obj[input.id] = input.value;
@@ -28,6 +28,6 @@
28
28
 
29
29
  以下は、上記のコードを確認するためのサンプルです。(HTMLの部分はJavaScriptの動作確認できるように適当なものを作成しました)
30
30
 
31
- - [https://jsfiddle.net/jun68ykt/mbz8x97g/2/](https://jsfiddle.net/jun68ykt/mbz8x97g/2/)
31
+ - [https://jsfiddle.net/jun68ykt/mbz8x97g/3/](https://jsfiddle.net/jun68ykt/mbz8x97g/3/)
32
32
 
33
33
  参考になれば幸いです。