javascriptのパラエータの読み込みがわからない

javascriptのコードの中に、下記のような、test_nameが一致したら、JSONの中から、それに対応したものを読み込むというものがあったのですが、動かず、
どこをどうしたらいいのか分かりません。

特によく分からないのが、 (f) => です。
ネットで調べてもこのような表記があまりなく、
http://phpjavascriptroom.com/?t=js&p=array
ここで見た感じだと、連想配列から値を取り出す時に使われるようなのですが、、
アドバイスを頂けたら幸いです。

途中まで教えてもらったりもしていたのですが、
ほんとうによくわからなくなってきたので
質問し直すことにします

Javascript
1  var scale01 = [10000,5000,4000,3000,2000,1000,100];
2  var scale02 = [1000,500,400,300,200,100,10];
3  
4  var pallet01 = ['#800026','#BD0026','#E31A1C','#FC4E2A','#FD8D3C','#FEB24C','#FED976','#FFEDA0'];
5  var pallet02 = ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"];
6
7
8  function getColorEx(d, scale, pallet) {
9    return d > scale[0] ? pallet[0] :
10        d > scale[1] ? pallet[1]:
11        d > scale[2] ? pallet[2]:
12        d > scale[3] ? pallet[3]:
13        d > scale[4] ? pallet[4]:
14        d > scale[5] ? pallet[5]:
15        d > scale[6] ? pallet[6]:
16        pallet[7];
17  }
18
19  map.attributionControl.addAttribution('data &copy; <a href=""></a>');
20
21  //map.on start ここからoverlayのonイベントスタート
22 //leafletのチェックボックスでどれがon/offされたかを見る
23  map.on('overlayadd overlayremove baseLayerchange', function(a) {
24    if(a.type == "overlayadd"){console.log("overlayaddです");}
25    if(a.type == "overlayremove"){console.log("overlayremoveです");}
26    overlay_name = a.name;
27    overlay_type = a.type;
28  
29//ここからは全部onマウスイベントの処理 
30   var geojson01;
31   var geojson02;
32
33  //共通部分 start
34  function highlightFeature(e) {
35    var layer = e.target;
36    layer.setStyle({
37      weight: 5,
38      color: '#F00',
39      dashArray: '',
40      fillOpacity: 0.5
41    });
42    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
43      layer.bringToFront();
44    }
45    info.update(layer.feature.properties);
46  }
47   function zoomToFeature(e) {
48    map.fitBounds(e.target.getBounds());
49  }
50  //共通部分 end
51  
52  //ここも整頓したい
53  function resetHighlight(e) {
54    geojson01.resetStyle(e.target);
55    info.update();
56  }
57  function resetHighlight02(e) {
58    geojson02.resetStyle(e.target);
59    info.update();
60  }
61  //ここまで整頓したい
62  
63
64//ここまで全部onマウスイベントの処理
65
66  function onEachFeature(feature, layer) {
67    layer.on({
68      mouseover: highlightFeature,
69      mouseout: resetHighlight,
70      click: zoomToFeature
71    });
72  }
73  function onEachFeature02(feature, layer) {
74    layer.on({
75      mouseover: highlightFeature,
76      mouseout: resetHighlight02,
77      click: zoomToFeature
78    });
79  }
80  //tyleEx start
81  function styleEx() {
82
83    var fillColorFeild = if(overlay_name == "test01"){
84       (f) => {f.properties.test01};
85    } else if(overlay_name == "test02"){
86       (f) => {f.properties.test02};
87    }
88
89////ここにどう読み込むかがわからない
90     (feature) => {
91       return {
92         weight: 2,
93         opacity: 1,
94         color: 'white',
95         dashArray: '3',
96         fillOpacity: 0.5,
97         fillColor: getColorEx(fillColorFeild(feature), scale--, pallet--)
98       };
99     }
100    
101  }//tyleEx end
102  
103  //createGeojson start
104  function createGeojson() {
105    L.geoJson(prefectureData, {
106     style: styleEx(),
107      onEachFeature: onEachFeature
108    })
109  }
110  //createGeojson end
111
112  geojson01 = createGeojson();
113  geojson01.addTo(choropleth01);
114
115  geojson02 = createGeojson();
116  geojson02.addTo(choropleth02);
117  });
118  //onイベント終了

kei344

2016/12/29 06:22

質問文に追記されたものは何を参考にされたのでしょうか。参考記事があるのであればそのURLを貼ってください。

oyatsu8

2016/12/29 17:53

すみません、よくわからなくなってきました。

行動規範の内容に同意します

回答3件

ベストアンサー

アロー関数というものでは？アロー関数を使うと、無名関数よりも短縮した形で書けるようになります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script>
9    //このような関数が
10    var hello1 = function (text) {
11        alert(text);
12    };
13    //こんな風にかけるようになった
14    var hello2 = (text) => {
15        alert(text);
16    };
17    hello1("hello,world1");
18    hello2("hello,world2");
19</script>
20</body>
21</html>

投稿2016/12/28 17:38

s8_chu

総合スコア14731

oyatsu8

2016/12/29 02:14

少し意味がわかりました！最初var fillColorFeild = だったのを、書き忘れたと思って var fillColorFeild = ''; if(test_name == "テスト01"){ (f) => {f.properties.aiueo}; } else if(test_name == "テスト02"){ (f) => {f.properties.kakikukeko}; } にしていました、、 var fillColorFeild if(test_name == "テスト01"){ (f) => {f.properties.aiueo}; } else if(test_name == "テスト02"){ (f) => {f.properties.kakikukeko}; } という事だったみたいです。

oyatsu8

2016/12/29 17:53

と思ったのですが、これも違うようでした。よくわからなくなってきたので、整理し直そうと思います。

行動規範の内容に同意します

他の方が回答されているように、アロー演算子と思われますが、
このコードをアロー演算子を使わない形に直しても、このコードでは動きません。
参照しているコードなどがありましたら、もう少し前後のコードを貼ってみてはいかがでしょうか。

投稿2016/12/29 02:14

namimon

総合スコア726

oyatsu8

2016/12/29 04:33

ありがとうございます、はってみます

namimon

2016/12/29 05:51

貼りなおされたコードを見てみましたが、関数名が呼ばれていなかったり、定義されていなかったりするようです。恐らく、自作の関数などを混ぜてよくわからなくなってきたのかと思いますので、肝心の getColorExと、それを呼び出すstyle_01、style_01に渡す引数であるfeatureに絞って、もう一度質問を立て直してみてはいかがでしょう。 getColorExがうまく呼び出されるようになれば、次はstyle_01を呼び出す条件を組み立てていけばよいでしょう。

oyatsu8

2016/12/29 17:54

ありがとうございます、よくわからなくなってしまったので、やり直そうと思います。

行動規範の内容に同意します

アロー関数では？

【アロー関数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

【ES2015(ES6)新構文：アロー関数(Arrow function)｜もっこりJavaScript｜ANALOGIC（アナロジック）】
http://analogic.jp/arrow-function/

【ES6の新機能「Arrow Function」を使って、よりシンプルなコードを書こう | ES6のある星に生まれて】
https://liginc.co.jp/277527

【アロー関数の個人的なハマりどころまとめ - Qiita】
http://qiita.com/you21979@github/items/1f521e4f23e1b989827d

投稿2016/12/28 17:26

kei344

総合スコア69407