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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

10077閲覧

JSで連番で指定の数まで変数を作成する方法

IGE

総合スコア46

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/09/11 01:49

言葉足らずでしたら恐縮ですが、
以下のような変数を、指定した数まで作成する処理を書きたいです。

javascript

1 2 var anim1 = { 3 container: document.getElementById('anim1'), 4 renderer: 'svg', 5 loop: true, 6 autoplay: true, 7 path: '/images/anim_1.png' 8 }; 9 var animPlay = bodymovin.loadAnimation(anim1); 10

以下のように作りたい数だけ書けばいいのですが、
多分そんな書き方はしないと思うので、、

javascript

1 var anim1 = { 2 container: document.getElementById('anim1'), 3 renderer: 'svg', 4 loop: true, 5 autoplay: true, 6 path: '/images/anim_1.png' 7 }; 8 var animPlay = bodymovin.loadAnimation(anim1); 9 10 var anim2 = { 11 container: document.getElementById('anim2'), 12 renderer: 'svg', 13 loop: true, 14 autoplay: true, 15 path: '/images/anim_2.png' 16 }; 17 var animPlay = bodymovin.loadAnimation(anim2);

上記の1とか2の数字の部分を指定の数まで連番で生成できる書き方を教えてください。。

ただ、以下の部分のみついては、

javascript

1path: '/images/anim_1.png'

こちらは連番ではなく、
6パターンほどのものをランダムか、1〜6の繰り返しで出力したいです。

初歩的な質問かもわかりませんが、書き方をお教えいただけますと幸いです。。
よろしくお願いいたします。

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

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

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

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

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

maisumakun

2017/09/11 01:53

「配列」ではなくて「連番の変数」である必要性はどの程度ありますでしょうか。
guest

回答2

0

ベストアンサー

変数を配列で指定すればよいかと思います

配列で処理

javascript

1var anim=[]; 2for(var i=1;i<=2;i++){ 3 anim[i] = { 4 container: document.getElementById('anim'+i.toString()), 5 renderer: 'svg', 6 loop: true, 7 autoplay: true, 8 path: '/images/anim_'+i.toString()+'.png', 9 }; 10 console.log(anim[i]); 11//var animPlay = bodymovin.loadAnimation(anim[i]); 12}

ループでカウントアップ

bodymovin.loadAnimationが即時なにかを実行するなら
ループで連番の数値をカウントアップしていけばいいかもしれません

javascript

1for(var i=1;i<=2;i++){ 2 var anim = { 3 container: document.getElementById('anim'+i.toString()), 4 renderer: 'svg', 5 loop: true, 6 autoplay: true, 7 path: '/images/anim_'+i.toString()+'.png', 8 }; 9 console.log(anim); 10//var animPlay = bodymovin.loadAnimation(anim); 11}

投稿2017/09/11 01:53

編集2017/09/11 02:25
yambejp

総合スコア114581

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

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

IGE

2017/09/11 02:20

ご回答ありがとうございます!! 無知で恐縮ですが、よろしければ以下の部分についてもお教えいただいてもよろしいでしょうか。。 >ループで連番の数値をカウントアップしていけばいいかもしれません よろしくお願いいたします。。
yambejp

2017/09/11 02:26

書き方がまぎわらしかったですね。スミマセン もともと提示したソースのものが連番の数値をカウントアップしています 一応配列の例も追記しておきました
IGE

2017/09/15 03:56

ご回答ありがとうございます!こちら無事解決いたしました!ありがとうございました!
guest

0

こんな感じの関数があればよい気がします。

javascript

1 var animPlay = bodymovin.loadAnimation(amin({id:'anim1', path:'/images/anim_1.png'}));

ここで、idとpathの関連性をはっきりさせることでどんな関数か想像しやすくしています。

これなら、こぴべで書いても面倒ではないし、1行なので、可読性も悪くないと思います。

javascript

1 var animPlay; 2 animPlay = bodymovin.loadAnimation(amin({id:'anim1', path:'/images/anim_1.png'})); 3 animPlay = bodymovin.loadAnimation(amin({id:'anim2', path:'/images/anim_2.png'})); 4 animPlay = bodymovin.loadAnimation(amin({id:'anim3', path:'/images/anim_3.png'})); 5 animPlay = bodymovin.loadAnimation(amin({id:'anim4', path:'/images/anim_4.png'})); 6 animPlay = bodymovin.loadAnimation(amin({id:'anim5', path:'/images/anim_5.png'})); 7 animPlay = bodymovin.loadAnimation(amin({id:'anim6', path:'/images/anim_6.png'}));

もちろん連番で処理できます。

javascript

1 for(var i = 1; i <= 6; ++i){ 2 var parm = anim({id:'anim' + i, path: '/images/anim_' + i +'.png'}); 3 var animPlay = bodymovin.loadAnimation(parm); 4 }

で、そのように動く関数本体を定義しておきます。

javascript

1 function anim(parm){ 2 return { 3 container: document.getElementById(parm.id), 4 renderer: 'svg', 5 loop: true, 6 autoplay: true, 7 path: parm.path 8 }; 9 };

いかがでしょうか。

投稿2017/09/11 04:01

編集2017/09/11 04:03
iwamoto_takaaki

総合スコア2883

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問