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

回答編集履歴

5

テキスト修正

2018/07/19 13:07

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -105,7 +105,7 @@
105
105
 
106
106
  そして、上記HTMLをMac版Firefox の最新バージョン(v61.0.1)で表示し、開発ツールを開いたところが以下です。
107
107
 
108
- ![イメージ説明](a01455e533ed4f1d88e07c1914033b88.png)
108
+ ![イメージ説明](5714aacce469379ceec4b9c3e24cd179.png)
109
109
 
110
110
  上記で分かるとおり、`=>` ではなく、 `→` が使われているので、
111
111
 

4

テキスト修正

2018/07/19 13:07

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -120,8 +120,7 @@
120
120
 
121
121
  と言えます。
122
122
 
123
- 余談ですが、マップや連想配列やハッシュといった、キーと値の組を持つデータ構造を、(表示するときではなく)
123
+ 余談ですが、マップや連想配列やハッシュといった、キーと値の組を持つデータ構造を、(表示するときではなく)プログラムの中で定義するのに、 `=>` を使う言語があります。
124
- プログラムの中で定義するのに、 `=>` を使う言語があります。
125
124
  たとえばRubyでは
126
125
 
127
126
  ```ruby

3

テキスト修正

2018/07/19 12:31

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -65,9 +65,7 @@
65
65
  ```
66
66
 
67
67
  と考えたほうがよいです。
68
- というのも、他の JavaScriptの実行環境(=わかりやすくいうと、他の場所で動くJavaScript)の中には、
68
+ というのも、他の JavaScriptの実行環境(=わかりやすくいうと、他の場所で動くJavaScript)の中には、Mapオブジェクトを`console.log` で出力したときに、キーと値との対応を `=>` ではない記号で表しているものも、あり得るからです。
69
- Mapオブジェクトを`console.log` で出力したときに、キーと値との対応を `=>` ではない記号で
70
- 表しているものも、あり得るからです。
71
69
 
72
70
  例えば、以下のようなJSを含むHTMLを作ります。
73
71
 

2

テキスト修正

2018/07/19 12:29

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -56,7 +56,7 @@
56
56
  より詳しくは、私の回答では node v9.6.1 でJSを実行したものなので、
57
57
 
58
58
  ```
59
- node v9.6.1 では Mapオブジェクトを`console.log` で出力すると、
59
+ node v9.6.1 では Mapオブジェクトを console.log で出力すると、
60
60
 
61
61
  Map { 'piyo' => 3, 'hoge' => 2, 'fuga' => 1 }
62
62
 

1

テキスト修正

2018/07/19 12:29

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -31,4 +31,111 @@
31
31
  [jun68ykt@macbook ~]$
32
32
 
33
33
 
34
- 以上、参考になれば幸いです。
34
+ 以上、参考になれば幸いです。
35
+
36
+ ---
37
+ **追記**
38
+
39
+ コメントから頂戴した、以下の質問に回答します。
40
+ ```
41
+ ●質問
42
+ => このアローが入ってきているのは、そういう仕様だということしょうか?
43
+ piyoがkeyで、値が3という認識で合っていますでしょうか?
44
+ ```
45
+
46
+ まず、
47
+ > piyoがkeyで、値が3という認識で合っていますでしょうか?
48
+
49
+ については、はい、その認識で合ってます。
50
+
51
+ 次に
52
+
53
+ > => このアローが入ってきているのは、そういう仕様だということしょうか?
54
+
55
+ については、そういう実装になっている、という解釈のほうがよいです。
56
+ より詳しくは、私の回答では node v9.6.1 でJSを実行したものなので、
57
+
58
+ ```
59
+ node v9.6.1 では Mapオブジェクトを`console.log` で出力すると、
60
+
61
+ Map { 'piyo' => 3, 'hoge' => 2, 'fuga' => 1 }
62
+
63
+ という風に、キーと値の対応を => を使った形式で出力するように、
64
+ console.log が作られている。
65
+ ```
66
+
67
+ と考えたほうがよいです。
68
+ というのも、他の JavaScriptの実行環境(=わかりやすくいうと、他の場所で動くJavaScript)の中には、
69
+ Mapオブジェクトを`console.log` で出力したときに、キーと値との対応を `=>` ではない記号で
70
+ 表しているものも、あり得るからです。
71
+
72
+ 例えば、以下のようなJSを含むHTMLを作ります。
73
+
74
+ ```html
75
+ <!DOCTYPE html>
76
+ <html lang="ja">
77
+ <head>
78
+ <meta charset="UTF-8">
79
+ <title>Q136707</title>
80
+ <script>
81
+ document.addEventListener("DOMContentLoaded", function(event) {
82
+ const obj = {
83
+ tasks: [
84
+ { id: 1, item: 'piyo' },
85
+ { id: 2, item: 'hoge' },
86
+ { id: 3, item: 'piyo' },
87
+ { id: 4, item: 'fuga' },
88
+ { id: 5, item: 'hoge' },
89
+ { id: 6, item: 'piyo' }
90
+ ]
91
+ };
92
+
93
+ const counts = obj.tasks.reduce(
94
+ (m, t) => m.set(t.item, (m.get(t.item) || 0) + 1),
95
+ new Map()
96
+ );
97
+
98
+ console.log(counts);
99
+ });
100
+ </script>
101
+ </head>
102
+ <body>
103
+
104
+ </body>
105
+ </html>
106
+ ```
107
+
108
+ そして、上記HTMLをMac版Firefox の最新バージョン(v61.0.1)で表示し、開発ツールを開いたところが以下です。
109
+
110
+ ![イメージ説明](a01455e533ed4f1d88e07c1914033b88.png)
111
+
112
+ 上記で分かるとおり、`=>` ではなく、 `→` が使われているので、
113
+
114
+ ```
115
+ Mac版Firefox の最新バージョン(v61.0.1)に組み込まれたJavaScript処理系では、
116
+ Mapオブジェクトを console.log で表示すると、
117
+
118
+ Map(3) { piyo → 3, hoge → 2, fuga → 1 }
119
+
120
+ と表示するように、 console.log が作られている。
121
+ ```
122
+
123
+ と言えます。
124
+
125
+ 余談ですが、マップや連想配列やハッシュといった、キーと値の組を持つデータ構造を、(表示するときではなく)
126
+ プログラムの中で定義するのに、 `=>` を使う言語があります。
127
+ たとえばRubyでは
128
+
129
+ ```ruby
130
+ counts = { 'piyo'=>3, 'hoge'=>2, 'fuga'=>1 }
131
+ ```
132
+
133
+ と書きますし、PHPでは以下です。
134
+
135
+ ```php
136
+ $counts = [ 'piyo'=>3, 'hoge'=>2, 'fuga'=>1 ];
137
+ ```
138
+
139
+ ですので、 JavaScript で Mapオブジェクトを console.log で出力したとき
140
+ `=>` が使われるのは、RubyやPHPを知っている人にとっては、自然な(というか見慣れた)
141
+ 感じがすることでしょう。