質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2526閲覧

Javascriptで変数の数を取得し、繰り返しに反映させたい

Motsu

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2016/02/21 13:10

編集2016/02/21 15:28

以下のサンプルスクリプトにおいて、店舗の数を自動取得した上で、
for等の繰り返しを使って「●●」に1~Nの数値を代入したいと考えています。
記述方法について、アドバイスをいただければ幸いです。

// N個の店舗を任意に記述 var shop1 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon1.png', title: '場所1' }); var shop2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon2.png', title: '場所2' }); // 店舗情報を元に「shop●●」を自動出力 var contentString = shop●●.title; var infowindow●● = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(shop●●, 'click', function() { infowindow●●.open(map,shop●●); });

[参考]
イメージとしては、以下と同等の機能が満たせれば、という意図です。

var contentString = shop1.title; var infowindow1 = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(shop1, 'click', function() { infowindow1.open(map,shop1); }); var contentString = shop2.title; var infowindow2 = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(shop2, 'click', function() { infowindow2.open(map,shop2); }); ・ ・ ・ var contentString = shopN.title; var infowindowN = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(shopN, 'click', function() { infowindowN.open(map,shopN); });
yamato_hikawa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

for文で繰り返させるより、設定を渡したらイベントを関連付けてくれる所までの一式を関数化したほうが良いと思います。

javascript

1// 定義 2var createShopMarker = function(option) { 3 this.shop = new google.maps.Marker(option); 4 this.init(); 5}; 6 7createShopMarker.prototype = { 8 init: function() { 9 this.title = this.shop.title; 10 this.map = this.shop.map; 11 this.infoWindow = new google.maps.InfoWindow({ 12 content: this.title 13 }); 14 this.bindEvent(); 15 }, 16 bindEvent: function() { 17 var _self = this; 18 19 google.maps.event.addListener(this.shop, 'click', function() { 20 _self.openInfo(); 21 }); 22 }, 23 openInfo: function(){ 24 this.infoWindow.open(this.map, this.shop); 25 } 26}; 27 28// 実行 29var shop1 = new createShopMarker({ 30 position: new google.maps.LatLng(座標), 31 map: map, 32 icon: 'images/icon1.png', 33 title: '場所1' 34}); 35 36var shop2 = new createShopMarker({ 37 position: new google.maps.LatLng(座標), 38 map: map, 39 icon: 'images/icon2.png', 40 title: '場所2' 41});

投稿2016/02/22 05:13

編集2016/02/22 07:17
yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Motsu

2016/02/22 05:38

おお!!アドバイスありがとうございます。 テストしたところ、こちらでも正しく動作しました! 一式を関数化するこのパターンはとてもシンプルで良いですね! for文で回す方法とこの方法、処理的にどのような違いがあるのでしょうか。 最終的な挙動は同じでも、方法によってメリットデメリットがあるならば、 今後の勉強のために伺えれば幸いです。
yamato_hikawa

2016/02/22 06:00 編集

ある関数に設定を渡したら、必要なイベントの関連付け等を自動で行ってくれる形です。 こちらの場合、もしfor文で繰り返させるとしても定義内の処理ではなく、実行部分について、繰り返させる形になると思います。 新しい情報を追加する場合も new createShopMarker({設定}); という一文を追加という形になります。 下記がメリットだと思っています。 - 新規追加が簡単になる。 - ループ処理をする上でのiの状態を考えなくて良い。 - 渡した設定とイベントが1:1で結びつく - イベントを追加する場合は、定義部分にイベントを追加すれば良い。 ここからさらに発展して、より処理をまとめようとする場合にも、 書き直しやすいと思います。
Motsu

2016/02/22 06:47

記述がシンプルになることで、メンテナンスの利便性が上がるわけですね。 大変勉強になりました。 今回はこちらの方法で行こうと思いますので、迅速にご解答いただいた fagai さんに感謝の意を示しつつも、 yamato_hikawa さんの回答をベストアンサーとさせていただければと思います。 yamato_hikawa さん、fagai さん、ありがとうございました。
guest

0

shop1,shop2のような変数名にする必要がなければ以下の様な対応方法があると思います。

javascript

1var shops = []; 2 3shops.push(new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon1.png', title: '場所1' })); 4shops.push(new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, icon: 'images/icon1.png', title: '場所2' })); 5// 省略... 6 7 8var contentString; 9var infowindow; 10for(var i = 0; i < shops.length; i++) { 11 contentString = shops[i].title; 12 infowindow = new google.maps.InfoWindow({ content: contentString }); 13 google.maps.event.addListener(shops[i], 'click', function() { infowindow.open(map,shops[i]); }); 14}

このように配列にすることで、複数のshopが増えても対応できると思います。

追記
もしかしたら修正部分は以下の形式でも行けるかもです。

for(var i = 0; i < shops.length; i++) { (function(){ var contentString = shops[i].title; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(shops[i], 'click', function() { infowindow.open(map,shops[i]); }); })(); }

投稿2016/02/21 13:29

編集2016/02/21 15:59
fagai

総合スコア2158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Motsu

2016/02/21 14:54 編集

まさにこの方向性のやり方についてお教えいただきたかったところです! こちらの理想に近い形のご提案、ありがとうございます。 ただ、これを組み込んだところ、1行目に対し以下のエラーが出てしまいました。 最初に空の配列を作ったところまでは理解できましたが、その後の処理は どう扱えば良いのでしょうか。 不勉強で申し訳ありませんが、アドバイスいただけると幸いです。 Unexpected token ']'
fagai

2016/02/21 15:09

すみません!修正しました。 shops[]の部分をshops.push(内容)に変更しました
Motsu

2016/02/21 15:34

pushで追加していくわけですね。大変勉強になります。 ただ、すみません!こちらのミスで質問に記述ミスが入っており、 そこがネックでお教えいただいた部分を多少書き換えなければならなそうです。 具体的には「infowindow」にもshopsに対応する数字を入れる必要があるようで、 その点について質問を編集させていただきました。 度々申し訳ありませんが、ご教授いただけると幸いです。
fagai

2016/02/21 16:06 編集

あー、varで指定しているから複数定義できないエラーですね。こちらの記述ミスです。 標準のjsだとforのブロックスコープは適用されないので確かにエラーになりますね。 一応なぜエラーなのかなのですが、 var aaa = 1; var aaa = 2; のようにvarでaaa変数を2回以上定義することは出来ないのです。。。 スコープと呼ばれる範囲で区切ってやれば分けることができるのですが、javascriptの場合はそれがほぼ無いので先ほどの処理ではエラーになっていました。。。
fagai

2016/02/21 15:58 編集

修正しました。 もし、infowindowを入れた後に触るのであれば、infowindowも配列にして管理すれば良いと思います。
Motsu

2016/02/22 00:49

infowindowを配列として処理したところ、上手く動作しました。 fagaiさん、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問