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

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

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

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

Q&A

解決済

5回答

254閲覧

2次元配列について教えてください

haruniku

総合スコア527

JavaScript

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

0グッド

0クリップ

投稿2019/06/19 13:44

編集2019/06/30 13:56

いつもお世話になっております。
javascript初心者です。

現在、配列の勉強してますが2次元配列で理解できていない部分があります。
やりたいことはsetInterval関数を使用して2秒間隔でメッセージを出したいです。
配列だとうまく表示されますが、2次元配列にすると上手くできなくなります。

//配列だと上手く表示されるが・・・ var dataArray=["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"];
//2次元配列にすると上手く処理されなくなる var dataArray=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ];

2次元配列から値を取り出して「何らかの処理」をしないといけないところまでは理解できたが、そのあとどういった処理をしたらいいのか分からなく詰まっている状態です。
出来れば最後まで自力で頑張りたいのでワガママ言って申し訳ございませんがヒントという形でご教示いただくことは可能でしょうか。宜しくお願いします。

※私事で申し訳ございませんが、今回に関しては根気強くアドバイスを頂いてるoikashinoaさんにお世話になろうと考えております。多忙の中、回答頂いてることに対してはとても感謝してますが、時間の都合上で割ける時間が限られております。今後、回答頂いても返答できない可能性が高いので予めご了承ください。

//実際のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collapse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>リアルタイム処理①</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> var MESSAGE=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //msgNoという変数を定義して初期値に0を代入 //msgNOは配列を操作するため使われている var msgNo=0; /** * 2秒ごとに違う文字を表示させる */ function changeMsg(){ //idを指定してテーブルオブジェクトを取得している var screen=document.getElementById("msgTBL"); //MESSAGE変数の[i]番目の値をtextContentを使用して取り出す screen.textContent=MESSAGE[0][1]; //msgNo変数に1をたす(+1) msgNo++; //もし、msgNoの値が等しくなかった時、msgNoは0を返す if(msgNo==4) msgNo=0; } //一定時間の処理を繰り返す為に使用する関数 setInterval(changeMsg,2000); </script> </body> </html>

試したこと①

//試したこと①のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collapse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>リアルタイム処理①</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> var MESSAGE=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //msgNoという変数を定義して初期値に0を代入 //msgNOは配列を操作するため使われている var msgNo=0; var msgNo2=0; /** * 3秒ごとに違う文字を表示させる */ function changeMsg(){ //idを指定してテーブルオブジェクトを取得している var screen=document.getElementById("msgTBL"); //MESSAGE変数の[i]番目の値をtextContentを使用して取り出す screen.textContent=MESSAGE[msgNo][msgNo2]; //msgNo変数に1をたす(+1) msgNo++; msgNo2++; //もし、msgNoの値が等しくなかった時、msgNoは0を返す if(msgNo==4) msgNo=0; } //一定時間の処理を繰り返す為に使用する関数 setInterval(changeMsg,2000); </script> </body> </html>

試したこと②

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collapse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>リアルタイム処理①</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> var MESSAGE=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //msgNoという変数を定義して初期値に0を代入 //msgNo2変数の初期値を「1」に変更すれば7月分が表示されます。 var msgNo=0; var msgNo2=0; /** * 3秒ごとに違う文字を表示させる */ function changeMsg(){ //idを指定してテーブルオブジェクトを取得している var screen=document.getElementById("msgTBL"); //6/1~6/5を繰り返す処理 msgNo変数の初期値は「0」にする screen.textContent=MESSAGE[magNo][msgNo2]; //7/1~7/5を繰り返す処理 msgNo変数の初期値は「1」にする //screen.textContent=MESSAGE[msgNo][msgNo2]; //msgNo2変数に1をたす(+1) msgNo; msgNo2++; //もし、msgNo2の値が等しくなかった時、msgNo2は0を返す if(msgNo2==5) msgNo2=0; } //一定時間の処理を繰り返す為に使用する関数 setInterval(changeMsg,2000); </script> </body> </html>

試したこと③

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collpse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>2019/06/01~2019/07/31の日付を2秒ごとに表示</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> //2019/06/01~2019/07/31の文字列データを格納している var dateArray=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //dayCount変数を宣言し、初期値に0を代入 var monthCount=0; var dateCount=0; //changeMsg関数を宣言 function changeMsg(){ //idを指定してテーブルオブジェクトを取得 var aaa=document.getElementById("msgTBL"); //テーブルオブジェクト aaa.textContent=dateArray[monthCount][dateCount]; //dayCount変数に1ずつたす(+1) monthCount; dateCount++; //もし、30日に到達したらmonthCountに1をたす処理 if(dateCount==30) { dateCount=0; monthCount=1;           //この後の処理がうまくいかない }else if(dateCount==61){ dateCount=0; monthCount=0; } } //setIntervalの中にchangeMsg関数を指定して呼び出す setInterval(changeMsg,2000); </script> </div> </body> </html>

試したこと④

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collpse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>2019/06/01~2019/07/5の日付を1秒ごとに表示</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <!--////追加--> <input type="button" value="start" onclick="changeMsg()">//// <script> //2019/06/01~2019/07/5の文字列データを格納している var dateArray=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //dayCount変数を宣言し、初期値に0を代入 var monthCount=0; var dayCount=0; //changeMsg関数を宣言 function changeMsg(){ //idを指定してテーブルオブジェクトを取得 ////var aaa=document.getElementById("msgTBL"); //テーブルオブジェクト ////aaa.textContent=dateArray[monthCount][dayCount]; console.log(dateArray[monthCount][dayCount]);//// //dayCount変数に1ずつたす(+1) monthCount; dayCount++; //もし、5日に到達したらdayCounに1をたす処理 if(dayCount==5) { dayCount=0; //試しに条件分岐を入れ子の形にしてみました //もし、monthCountが0の場合、1が足される if(monthCount==0){ monthCount=1; }else{ monthCount=0; } } } //setIntervalの中にchangeMsg関数を指定して呼び出す ////setInterval(changeMsg,2000); </script> </div> </body> </html>

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

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

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

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

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

kei344

2019/06/19 15:02

2次元配列からどういう順に取り出すつもりでしょうか。(1次元配列なら配列の要素を順番に表示するだけだが、1つ目の配列と2つ目の配列をどのように走査したいのかがわかりません)
haruniku

2019/06/19 16:41 編集

回答ありがとうございます。 msgNo変数を使用して値を取り出そうと考えてます。 msgNo変数は配列を操作する為に使用してます。 もう一つ初期値が0の変数を用意すれば取り出せるのでは?と思ってます。
oikashinoa

2019/06/20 04:16 編集

意図してやっているならスルーして下さい。 質問とは関係ない話しですが、リアルな写真をアイコンにしてます?友達を作るところでは無いと思ってますので変えたほうが良いかと。 もし他人の写真でしたら変えることを検討してください
kei344

2019/06/20 00:49

変数がどう、という話ではなく、2次元配列からどの順番で取得したいかを聞いています。oikashinoaさんがコメントされているように「6月分を表示後、7月分を表示して以下繰り返し」という順番でしょうか。
haruniku

2019/06/20 14:53 編集

返信遅くなりました。 はい、その通りです。6月分を表示後、7月分を表示して以下を繰り返す順番です。
guest

回答5

0

ベストアンサー

js

1 //idを指定してテーブルオブジェクトを取得している 2 var screen=document.getElementById("msgTBL"); 3 //MESSAGE変数の[i]番目の値をtextContentを使用して取り出す 4 screen.textContent=MESSAGE[0][1]; 5 //msgNo変数に1をたす(+1) 6 msgNo++;

ここって意図どおりですか?
必要最低限にとどめておきますのでもう少し頑張ってみてください。

…やる気が有る人だと嬉しいなぁ。

投稿2019/06/19 13:55

oikashinoa

総合スコア2826

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

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

haruniku

2019/06/19 14:07 編集

早速、回答いただきありがとうございます。 2次元配列から値を取得するにはMESSAGE変数から値を取得しないいけません。 そこで、MESSAGE[0][0]のやり方で値を取得することができました。 ここまでは自分の意図通りです。 msgNoに関しては配列を操作する為に使う変数です。ただ、可能性としてmsgNoが意図した動きをしていないかもしれません。
oikashinoa

2019/06/19 14:11

配列のソースコードのコードと2次元配列のソースコードの該当部分を見比べると気づきがあると思います。
haruniku

2019/06/19 14:20 編集

ソースコードを見比べてみて気づいた点がありました。 まず、配列の場合だと添字にmsgNo変数を使用してます。 2次元配列だと添字の部分は変数を使用してないことです。 ということは2次元配列で値を取得するときに動的に変えないといけないということでしょうか。 もしかしたらmsgNo変数を2次元配列で操作できるようにすれば良いということでしょうか?
oikashinoa

2019/06/19 14:21

仮説が正しいか試してみましょう。ブラウザのデバッガー機能の使い方を調べてみて下さい。 Teratailにも何度か参考になる記事が書かれています。 遠回りのように感じるかもしれないですが、一番の近道ですのでまずは試してみて下さい。
oikashinoa

2019/06/19 14:24

予想だと6個目でエラーが出ると思います。 その時は各変数の値と、エラー内容を見て考えてみましょう。 分からなければまた聞いて下さい。大丈夫。すぐに初心者なんて脱出ですよ。 まずは自分で考える事が大事です。
haruniku

2019/06/19 14:58 編集

ディベロッパーツールを開いて挙動を確認して見ました。 確認したところconsole.logに「Uncaught TypeError: Cannot read property '2' of undefined」と出ました。あと、sources内にもエラーが発生しており、エラー箇所を確認したところ、msgNo2がエラーとなってました。 ということはそもそもこの仮説は間違っているということになるのでしょうか?
oikashinoa

2019/06/19 14:58

⇡で動かしたソースを見せて下さい。 質問に追記した部分は少し抜けてませんか? あと、↓ってどういう動きをさせるために書いたのか理解してます?配列のソースコードと見比べてみて考えて下さい。 //MESSAGE変数の[i]番目の値をtextContentを使用して取り出す screen.textContent=MESSAGE[0][1];
haruniku

2019/06/19 15:55 編集

すみません、ソースコードあげましたのでご確認お願いします。 screen.textContent=MESSAGE[0][1]の動きについて言葉で説明すると MESASAGEの中に配列が2つ格納されてます。 右辺は2つあるうちの1つめの配列にアクセスして[1]を使って「2019/06/01」という文字列取得してます。 ↓ 右辺で取得した値を左辺に代入してます。 ↓ textContentを使用して文字列を書き出してます。
oikashinoa

2019/06/19 15:52

screen.textContent=MESSAGE[msgNo][msgNo2]; の代わりに以下をいれて動かしてみて下さい。気付けるといいな。 console.log( MESSAGE[0][0] ); console.log( MESSAGE[0][1] ); console.log( MESSAGE[0][2] ); console.log( MESSAGE[0][0] ); console.log( MESSAGE[1][0] );
haruniku

2019/06/19 16:11 編集

アドバイスありがとうございます。 早速、console.logで確認してみたら ①2019/06/01 ②2019/06/02 ③2019/06/03 ④2019/06/01 ⑤2019/07/01 と表示されました。 もしかして、④番目あたりからズレて表示されていることに気づきました。 私の考えでは ④console.log( MESSAGE[0][3] ); ⑤console.log( MESSAGE[0][4] ); でないといけないはずです。
oikashinoa

2019/06/19 16:12

その想定になるようにmsgNoの使い方を再度見直しましょう
haruniku

2019/06/19 16:56 編集

アドバイスありがとうございます。 現状のmsgNoは一つの配列しか操作できないことに気づきました。複数の配列を操作するにはどういった考え方が必要となってくるのでしょうか。
oikashinoa

2019/06/19 23:15 編集

複数の配列でなくて2次元配列のことですか? あと、ゴールをどうしたいか聞いてませんでした。6月分を表示後、7月分を表示して以下繰り返しってところですかね? まずはmsgNoを使って6月分を連続で取ってみましょう。
haruniku

2019/06/20 14:38 編集

返信遅くなりごめんなさい。 はい、2次元配列のことです。 やりたいことに関してはoikashinoaさんの仰る通りで6月分を表示後、7月分を表示して以下繰り返す処理を実行したいです。 その後、oikashinoaさんのアドバイスをもとに色々試行錯誤してみた結果、6月分の取得に成功しました。やり方ですが、添字に[0]を追加しました。7月分は[1]にすれば取得できました。このあとはどういった処理が必要となってくるのかご教示いただくことは可能でしょうか。 6月 screen.textContent=MESSAGE[0][msgNo]; 7月 screen.textContent=MESSAGE[1][msgNo];
oikashinoa

2019/06/20 15:13

少し難易度をあげます。 //配列のソースコード のコードを元に、まずは6月分をmsgNoを使って6/5分まで出してみて下さい。で6/5まで来たら次は7/1から7/5まで出るようにしてみましょう。 - 6月、7月の切り替えはmsgNo2を使ってみましょう 下が参考になるかと。 screen.textContent=MESSAGE[msgNo]; //msgNo変数に1をたす(+1) msgNo++; //もし、msgNoの値が等しくなかった時、msgNoは0を返す if(msgNo==4) msgNo=0; 本当は変数名も中身が何を示しているか意味が分かるようにしたほうがいいです。
haruniku

2019/06/22 18:09 編集

返信遅れてしまい申し訳ございません。 その後、色々と試行錯誤した結果、6/1~6/5、7/1~7/5を繰り返し表示させることができるようになりました。ソースコードは「試したこと②」に記載してます。ただ、依然として6/1~7/5を繰り返す処理が出来ていない状態が続いてます。 >>>6月、7月の切り替えはmsgNo2を使ってみましょう すみません、切り返しを行うにはどういった処理が必要となってくるのかいまいちピンときておりません。 具体的にどのような方法が必要となってくるのかご教示頂けないでしょうか。
think49

2019/06/23 03:10 編集

質問者はコードではなくヒントを求めているので、こちらの回答を [高評価] しました。 コメントでのやり取りが重要と思います。 (これを共有知として回答に反映させるのは、なかなか難しそうですね) To: haruniku さん 「気づいたこと」の流れ、確認作業の流れは oikashinoa さんのアドバイス通りで良い方向と思うのですが、「自分の考えを述べる」「考えが正しいか、検証してみる」の作業が足りてなく、言い方は悪いですが、「指示待ち人間」の印象を受けます。 指示通りに実行すれば解決はしますが、ゴールは「問題の切り分け手順を覚える事」なのですよね。 それなら、自分の考えを述べた上で、その考えが正しいか確認してもらう方が haruniku さんにとって有意義なものになると思います。 指示を受けた場合も「指示の意図」を自分なりに考えて述べてみれば、oikashinoa さんも意図が正しく伝わっている事が確認出来て安心できるのではないかと思います。 ポイントとなる部分は、別で回答しましたので、参考にしてみて下さい。
oikashinoa

2019/06/25 14:41 編集

> 切り返しを行うにはどういった処理が必要となってくるのかいまいちピンときておりません。 プログラムは自動化したい事をいかに表現するか ということです。 ぶっちゃけ、以下のようなプログラムでも有る意味良いわけです。ですが、今度はなにか変えたいときに大変になる。だから法則性を見つけてロジックをくみます。一度おさらいしましょう。 1.6,7月の日付を表示したい時、 Z,Y,Zに入る値を考えて下さい。 console.log( MESSAGE[0][0] ); //"2019/06/01" console.log( MESSAGE[0][1] ); //"2019/06/02" console.log( MESSAGE[0][2] ); //"2019/06/03" .(略) console.log( MESSAGE[0][X] ); //"2019/06/05" console.log( MESSAGE[Y][Z] ); //"2019/07/01" console.log( MESSAGE[Y][1] ); //"2019/07/02" 2.ある法則で変化するもの、ある条件で値が変わる箇所が有ると思います。 ”配列のソースコード”で各行が何をしているのか理解できているなら、 法則通りに変化させる/条件達成時に値を換えるのをどこでしたらよいか分かるはずです。 ※”配列のソースコード”がご自身で理解していて、かつ2次元配列が理解できていない前提で今まで話し進めてました。違うのであれば、どこが分からないなど書いたほうがいいです。
haruniku

2019/06/25 12:12 編集

返信遅れてすみません。下記インラインで回答させて頂きます。 >>>6,7月の日付を表示したい時、 Z,Y,Zに入る値を考えて下さい。 私の中ではそれぞれXに4、Yに1、Zに0の値が入る認識でおります。 >>>法則通りに変化させる条件達成時に値を換えるのをどこでしたらよいか分かるはずです。 私の中では条件分岐を試してみました。ある条件達成時にdateCountの値に1を足せば7月分の処理が実行されるのではと思いつきました。なので、条件分岐を使用して30に到達した時はdateCountの値に1をたす処理を追加しました。しかし、7/31~6/1に戻る処理が出来ていない状態です。実際に挙動確認したソースコードは「試したこと③」という名前であげてます。
oikashinoa

2019/06/25 12:07

修正後のソース見てないですが処理足らないのでは?紙とかエクセルでも良いのでソース通りに値を変化させてみてください。
haruniku

2019/06/25 12:36 編集

ソース通りに値を変化させたら下記の通りとなると思いますが、認識間違ってますか?あと、一定の条件を満たしたい時に分岐させる処理を加えればうまく行くかと思ったのですが条件分岐を使用すること自体間違っているということでしょうか。 console.log( MESSAGE[0][0] ); //"2019/06/01" console.log( MESSAGE[0][1] ); //"2019/06/02" console.log( MESSAGE[0][2] ); //"2019/06/03" console.log( MESSAGE[0][4] ); //"2019/06/05" console.log( MESSAGE[1][0] ); //"2019/07/01" console.log( MESSAGE[1][1] ); //"2019/07/02"
oikashinoa

2019/06/25 15:02

> ソース通りに値を変化させたら下記の通りとなると思いますが、認識間違ってますか? 思うではなくて、試して確認して下さい。(仮説と検証) あと、”うまく行かなかった”だけでは今後も上達しないでしょう。 何が問題だったか確認してださい。 - この処理が通らない?値を入れたが…になるetc - 何が問題か分かれば問題は半分は解けています。 いまのソースを見ました。単純な2次元配列を学ぶため&手っ取り早くテストするためにに6月、7月は共に5日までで限定してみましょう。 - 6/5を示した後、配列のどこを表示させたいからどういう条件で値を換えるのか - 7/5を示した後、配列のどこを表示させたいからどういう条件で値を換えるのか ちなみに今書かれている配列はジャグ配列と呼ばれるものです。2次元配列との違いを見ておいて下さい。あとあと勉強しましょう。 https://ja.wikipedia.org/wiki/%E9%85%8D%E5%88%97#%E3%82%B8%E3%83%A3%E3%82%B0%E9%85%8D%E5%88%97
haruniku

2019/06/25 17:05 編集

oikashinoaさんご多忙の中ご返信頂きありがとうございます。 なかなか前に進めない原因は自分の中で問題点の洗い出しがうまくできていないからだと実感してます。 私は論理的思考で物事を考えるのが苦手な人間です。そもそも仮説と検証をあまり実践したことがなく、どういう方法でやっていけばいいのかも分からず、分からないことを分からない状態でやっているのでとても苦しい状態が続いてます。 そんな中でも根気強く色々なアドバイスを頂いてとても嬉しいです。なので、仮説と検証のやり方をもう一度見直した上で問題点の整理の仕方を変えて粘り強く頑張ります。
oikashinoa

2019/06/25 22:21

問題の単純化とデバッグのしやすさから、仕切り直ししましょう。以下で続けます。 https://teratail.com/questions/195920#reply-291997 - スレッドを別に作成したのでそちらで続けましょう。 - HTMLの部分とタイマー部分は”2次元配列の勉強”には直接関係ありませんので一次的に無しにする。
m.ts10806

2019/06/26 03:16 編集

harunikuさん 最初からヒントではなく答えが欲しいと書いておけば良かったのではないでしょうか。 丸投げ低評価対策かもしれませんがこれではサポートセンターを求めているのと変わりません。 「出来れば最後まで自力で頑張りたい」のでしたらヒントは他の回答も含めて出尽くしているので、自分でやりましょうよ(まんま答えも出てますが)。 「わからなかったらまた聞いてください」は「ヒントを受けて自身でやってみてそれでも分からなかったら別途質問立ててください」の意図があると思います。
oikashinoa

2019/06/26 03:15

mts10806さんへ。 なかなか意図が伝わらないのは歯がゆいですが、子供に教えるつもりでやっているので私個人としては問題ないです。 ただ、最後に質問者に学んだ事をまとめてもらおうと考えてます。(ソレが共有知として使えるかな。) まあuserナントカScriptの件直後なので甘い気はしてます。
m.ts10806

2019/06/26 03:19

oikashinoaさん 確かに、そのあたりはoikashinoaさんの方針もあるでしょうけど、「自力で頑張りたい」と書いてある割におんぶにだっこな姿勢が気になりました。 teratailはサポートセンターではないという前提もありますが、そのあたり線引きが難しいですね。
m.ts10806

2019/06/26 03:21 編集

(むしろ質問より回答のほうが何倍も多いユーザーがこの質問の使い方はどうなんだろう?という疑問もあります。それに他の回答に無反応ですし。)
oikashinoa

2019/06/26 03:33

私もですが、初心者は問題を最小化出来ないのが問題かな。 質問者にとって今が最初の一歩ではないかと。 スクールなどを否定するつもりは無いですが、なぞって行くのが勉強 な風潮?を感じてます。最近サイトの模写がーとかよく見ますし。 ここでのやり取りはあくまで参考情報として捉えて、自分の力にして欲しいですね。ですので答えは出さないつもりです。
oikashinoa

2019/06/26 03:38

確かに他の回答への返信無いですね。それはイカン。 質問者さん、マナーです。最低限の事はして下さい。
haruniku

2019/06/27 11:51

返信遅れて申し訳ございません。ご指摘ありがとうございます。 他の方に対して回答させて頂きました。
guest

0

2次元配列を1次元配列に変換して処理すれば良いかと。

js

1var MESSAGE = [ 2 ["2019/06/01", "2019/06/02", "2019/06/03", "2019/06/04", "2019/06/05"], 3 ["2019/07/01", "2019/07/02", "2019/07/03", "2019/07/04", "2019/07/05"] 4]; 5var screen = document.getElementById("msgTBL"); 6var RESULT = Array.prototype.concat.apply([], MESSAGE); 7var msgNo = 0; 8var timer; 9 10function changeMsg() { 11 if (RESULT[msgNo]) { 12 screen.textContent = RESULT[msgNo] 13 msgNo++; 14 } else { 15 clearInterval(timer); 16 } 17} 18timer = setInterval(changeMsg, 2000);

投稿2019/06/19 15:54

yasutomi

総合スコア2937

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

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

miyabi_takatsuk

2019/06/20 01:04

横槍失礼します。 この発想はシンプルですごくいい!と思いました。
think49

2019/06/23 02:10

> var RESULT = Array.prototype.concat.apply([], MESSAGE); ES2019には Array.prototype.flat が取り込まれる予定なので、この辺りは簡単に書けるようになりますね。 実装を選びますが、Polyfillで対応できる分、rest parametersよりも使い勝手が良さそうです。 https://caniuse.com/#feat=array-flat
haruniku

2019/06/27 11:42 編集

返信遅れて申し訳ございません。多忙の中、回答頂きありがとうございました。 私にとってこの記述方法は少し難易度高く感じました。javascriptの操作に慣れはじめたら試しに使用して見たいと思います。
yasutomi

2019/06/27 11:44

2次元配列を1次元配列に変換して処理しているので 難易度は下がっています。 これで難易度が高く感じるのであれば 2次元配列はまともに扱えないです。
guest

0

ヒント

出来れば最後まで自力で頑張りたいのでワガママ言って申し訳ございませんがヒントという形でご教示いただくことは可能でしょうか。

ということなので、「コード」ではなく、「ヒント」で回答します。

インデックス値の規則性

基本的には、oikashinoa さんがコメントでアドバイス通りで、「最大のポイント」は下記コードにあると思います。

JavaScript

1console.log( MESSAGE[0][0] ); 2console.log( MESSAGE[0][1] ); 3console.log( MESSAGE[0][2] ); 4console.log( MESSAGE[0][3] ); 5console.log( MESSAGE[0][4] );

ここでインデックス値の規則性に気が付いたなら、折り返しポイントとなる要素も全て、コンソールに出力すれば、その規則性に気が付きます。
思考整理の為に紙に書きだすことを推奨しますが、console.log() の他にも便利なメソッドがあるので、それらを活用するのも良いでしょう。

JavaScript

1console.dir(MESSAGE); 2console.table(MESSAGE);

整理と検証

初心者にありがちなのですが、「迷ったら詳しい人に聞く」というスタンスの抜けない人が大変多いようです。

  1. 今までの情報を整理する
  2. 足りない情報があれば、確認の為に検証する
  3. 整理した情報を元に仮説を立てる
  4. 解決しなければ、1. に戻る

基本的には、上記手順をとる習慣をつける事をお勧めします。
それでもわからなければ、「検証結果」と「仮説」を書いて質問してみましょう。

Re: haruniku さん

投稿2019/06/23 02:56

think49

総合スコア18156

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

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

haruniku

2019/06/27 11:50 編集

返信遅れて申し訳ございません。多忙の中、回答頂きありがとうございました。 頂いたアドバイスをもとに自分の書いたコードを見直す癖をつけます。また、自分が苦手としている「仮説・検証」を自分なりに上手く整理できるように頑張ります。
think49

2019/06/27 12:12 編集

To: haruniku さん > また、自分が苦手としている「仮説・検証」を自分なりに上手く整理できるように頑張ります。 なぜそれをすぐに実行して、その結果をここに書かないのでしょうか。 (もし、私の回答を必要としていないのであれば、その理由をはっきり書いて下さい。 回答しないように気を付けますので。)
haruniku

2019/06/30 10:55 編集

think49さんの回答を必要としていない訳ではありません。誤解を招く返答をしてしまい申し訳ございません。 私事で申し訳ございませんが、今回に関しては根気強くアドバイスを頂いてるoikashinoaさんにお世話になろうと考えております。多忙の中、回答頂いたことに対してはとても感謝してますが、時間の都合上で割ける時間が限られております。ただ、think49さんから頂いた回答は今後の参考にさせて頂くのと、感謝の気持ちを込めて高評価押させて頂きます。あらかじめご了承ください。
think49

2019/06/30 13:04

To: haruniku さん > 私事で申し訳ございませんが、今回に関しては根気強くアドバイスを頂いてるoikashinoaさんにお世話になろうと考えております。多忙の中、回答頂いたことに対してはとても感謝してますが、時間の都合上で割ける時間が限られております。 その情報は回答者全体に関わる内容なので、質問文を「編集」して広く周知されると良いと思います。 回答も限られた時間の中で行っている事で、それぞれに事情があると思います。
haruniku

2019/06/30 14:29 編集

はい、周知させて頂きます。アドバイスありがとうございます。
guest

0

再帰処理であれば多次元配列の値をすべてとることも可能です

javascript

1var a=["a","b","c",["d",["e","f"],["g"],"h","i"]]; 2Array.prototype.get_recursive=function(){ 3 var ret=[]; 4 this.forEach(function(x){ 5 if(x instanceof Array){ 6 ret=ret.concat(x.get_recursive()); 7 }else{ 8 ret.push(x); 9 } 10 }); 11 return ret; 12} 13console.log(a.get_recursive()); 14console.log(a.get_recursive()[3]);

投稿2019/06/20 00:35

yambejp

総合スコア114572

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

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

miyabi_takatsuk

2019/06/20 01:03

横槍失礼します。 こ、これだ。 参考にさせていただきます。
think49

2019/06/23 01:26

さすがに初心者レベルの方に Array.prototype 拡張はお勧めしがたいです。 間違いを犯さない絶対の自信がある熟練者なら別ですが。
haruniku

2019/06/27 11:42 編集

返信遅れて申し訳ございません。多忙の中、回答頂きありがとうございました。 私にとってこの記述方法は少し難易度高く感じました。javascriptの操作に慣れはじめたら試しに使用して見たいと思います。
guest

0

長くなりすぎたのと、問題を単純化するために別スレにしました。

2019/06/26 01:13のソースに必要最低限の変更をかけました。(////が付いてます)
”start”ボタンをしたらchangeMsg()が1回実行するようにしてます。
Teratail内の過去記事でChromeの”開発者用ツール”でのデバッガーの使い方を再確認して下さい。(検証出来ていないので、上手に使ってない気がしてます。)

ifが想定通りに動いていないならデバッガーの”ステップ実行”や”変数の値を確認”しながら問題点を確認して下さい。

  • 条件が良くなくて実行できていないかもしれないし、想定がおかしいのかもしれない。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5 <style> 6 table{ 7 border-collapse:collpse; 8 margin:auto; 9 } 10 td{ 11 border:8px solid lavender; 12 width:500px; 13 height:100px; 14 font-size:60px; 15 color:violet; 16 text-align:center; 17 } 18 </style> 19 <title>2019/06/01~2019/07/31の日付を2秒ごとに表示</title> 20</head> 21 <body> 22 <table><tr><td id="msgTBL"></td></tr></table> 23 <!--////追加--> 24 <input type="button" value="start" onclick="changeMsg()">//// 25 26 <script> 27 //2019/06/01~2019/07/31の文字列データを格納している 28 var dateArray=[ 29 ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], 30 ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] 31 ]; 32 //dayCount変数を宣言し、初期値に0を代入 33 var monthCount=0; 34 var dateCount=0; 35 //changeMsg関数を宣言 36 function changeMsg(){ 37 //idを指定してテーブルオブジェクトを取得 38 ////var aaa=document.getElementById("msgTBL"); 39 //テーブルオブジェクト 40 ////aaa.textContent=dateArray[monthCount][dateCount]; 41 console.log(dateArray[monthCount][dateCount]);//// 42 //dayCount変数に1ずつたす(+1) 43 monthCount; 44 dateCount++; 45 //もし、30日に到達したらmonthCountに1をたす処理 46 if(dateCount==30) { 47 dateCount=0; 48 monthCount=1; 49 //この後の処理がうまくいかない 50 }else if(dateCount==61){ 51 dateCount=0; 52 monthCount=0; 53 } 54 } 55 //setIntervalの中にchangeMsg関数を指定して呼び出す 56 ////setInterval(changeMsg,2000); 57 </script> 58 </div> 59</body> 60</html>

投稿2019/06/25 22:19

oikashinoa

総合スコア2826

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

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

oikashinoa

2019/06/29 02:49 編集

続ける前に。 質問者に学んだ事をまとめてもらいます(ソレが共有知として使える) 理解が深まるので行ってください。 あと、他の回答にも反応してください。見ず知らずのアナタに時間使ってくれた人へのマナーです。 以上の事が出来るなら話進めます(他への回答に対しては出来ますよね?)
haruniku

2019/06/30 14:27 編集

返信遅くなりました。 >>>ifが想定通りに動いていないならデバッガーの”ステップ実行”や”変数の値を確認”しながら問題点を確認して下さい。 ①デバッカーツールを使用して確認したところ、6/5以降は「undefined」と表示されました。 原因はdayCountを30で比較してたからです。undefinedは定義されていないという意味なので30→5に修正しました。 ②①を修正後、処理を試してみましたが上手く実行されませんでした。 その後、時間をかけて処理内容を検証したところ、そもそも判定する条件がおかしいことに気づきました。dayCountが5に到達した時に0に戻す処理は問題ないですが、同時にmonthCountに1を足してます。monthCountに1を足すと足された状態のまま処理が走ってしまうので延々と7月以降が表示されます。 なので、dayCountとmonthCountを別々に分けて考えることにしました。 ③それぞれの変数を条件判定させるためにif文を入れ子構造にしてみました。初めのうちはelse ifで実行してましたが、else ifだと参照できる変数がdayCountかmonthCountのどちらかとなってしまいます。それでも条件がtrueの時にdayCountとmonthCountの処理を同時に実行されるプログラムを書きました。 しかし、monthCountが1たされた状態で7/31に到達したらそのまま戻りません。else ifにしてしまうと条件判定される変数が限られてしまうので処理が通らないことに気づきました。 今回は参照したい変数が2つあるのでそれぞれの変数を判定させるにはif文を入れ子状態にすればそれぞれの変数を判定してくれると思い実際に試してみました。ソースコードは試したこと④にあげてます。
oikashinoa

2019/07/01 13:49

"試したこと④"は何が問題なのですか?想定通りに動いているのですか?
haruniku

2019/07/01 16:15 編集

はい、想定通りに動いてます。長文となって恐縮ですが私自身学んだことも自分なりにまとめてみました。あとは6/1~7/31を2秒ずつ表示して以下を繰り返す処理を作成するだけです。
oikashinoa

2019/07/02 14:53

解決して何よりです。 think49さんは考え方(私が言いたかったことを完結に答えてくれてます)、 yasutomiさんとyambejpさんは解決方法(2次元配列を1次元配列に変換)を答えてくれてます。 今一度皆さんの回答も一度試してみて下さい。分からなければ調べたり 別の質問として質問してみて下さい。
haruniku

2019/07/02 17:19

はい、色々とアドバイス頂きありがとうございました。一旦解決したのでこの質問は閉めさせて頂きます。また機会がございましたらご回答頂ければと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問