JavaScript：多次元配列の出力について

Question

初心者の学生です。どうぞ宜しくお願いいたします。

入力されたコースコードから配列内のコース名を返すプログラムの課題を解いています。
入力値から配列番号を取得するところまでは解けたのですが、
それを別の配列（出力用の配列）にどう保持したらいいかわからず、詰まってしまいました...

arrを配列化したいのですが、var arr[i] とするとエラーになってしまい...

お知恵をお借りできれば幸いです。お時間ありがとうございます。

ソースコード

// 配列の宣言
var courseCode = ["WEB222", "WEB322", "IPC244", "JAV745", "OOP244"];
var courseTitle = ["ウェブプログラミング基礎", "ウェブプログラミングツールとフレームワーク", "C言語入門", "Javaプログラミング", "オブジェクト指向プログラミング入門"];

// ユーザ入力
var noOfCourse = prompt("今学期とったコースの数を入力してください: ");
console.log("\n");
	// ユーザ入力の回数分リピート
	for(i = 0; i < noOfCourse; i++) {
		var inputCode = prompt("コースコードを入力してください: ");
			if (courseCode.includes(inputCode)) { // 配列に入力値がある場合
				var arr = (courseCode.indexOf(inputCode)); // 配列番号を取得
				// <-- ここにユーザ入力用の配列を保持する処理を書くのでしょうか？？
				var mark = prompt("\t成績を入力してください: ");
			}
			else { // 配列に入力値がない場合
				console.log(`Error: ${inputCode} というコースコードはありません`);
				noOfCourse++; // リピート回数をリセット
			}
		console.log("\n");
	}

// 出力
console.log("成績は以下のとおりです:");
	// ユーザ入力の回数分リピート
	for(j = 0; j < noOfCourse; j++) {
		console.log("----------");
		console.log(`コースコード: ${courseCode[arr]}`);
		console.log(`コース名: ${courseTitle[arr]}`);
		console.log(`成績: ${mark[j]}`);
	}

出力画面

↑arrが配列化されていないので、単に2番目に入力した値が出力されてしまいます...

Comments

[m.ts10806]

＞arrを配列化したい
それは手段かと思います。「なぜ」そうしたいのか、「なにを」そうすべきなのか　全体から要件を考える必要があるのではないでしょうか。
単に配列にしたいだけならすぐです。カウンタでも何でも作ってカウントアップさせてそれを配列番号として入れていけばいいだけですから。
本当にそれだけで解決するのか？は考えてからのほうが良いです。
特にどういう形のデータが必要なのか　部分ですね。

※ただ、課題とのことで元々回答は得られにくいとは思います。

[gentaro]

なぜ先生に質問しないのか教えて下さい。
何のために授業料を払っているのか甚だ疑問です。

[aluminium]

> m.ts10806 様
配列を配列に渡す処理で混乱してしまいました。意図がわかりにくかったようで申し訳ありません。次回は気を付けます。

> gentaro様
質問しても、教授は「100人以上生徒がいるから即対応できない」と言います。返信が課題の締切後にくることもあります。授業料... 私もそう思います。コロナで全てのクラスがオンラインになってしまい、気軽に質問できる環境は無くなってしまったことがとても残念です（以前は教室内にtutorもいて気軽に質問ができました）。Teratailの皆様にはいつも助けていただいており、本当に感謝しています。たかが学生の課題ですが、丸投げしているわけではなく、悩みに悩んで困った末に投稿させていただいていますので、どうかご勘弁ください。

Answer 1

入力値から配列番号を取得するところまでは解けた

入力値は prompt() の結果を想定されていると思いますが、以下の４つのケースで想定した処理はできないはずです。

1. キャンセルボタンがクリックされた
2. 小数値が入力された
3. 数値以外の文字列が入力された
4. 整数値だが0より大きい値でない

「ユーザの様々な入力」を想像し、適切な切り分けを行う必要があります。

var inputNum = void 0;
while ( !inputNum ) {
  inputNum = prompt( "１以上の整数を入力" ); // default = 1 を指定しても良い。
  console.log( "prompt() の結果 :", inputNum, typeof inputNum, parseInt(inputNum) );

  if ( !isFinite(inputNum) || (inputNum = parseInt( inputNum )) < 1 ) {
    inputNum = undefined;
  }
}
console.log("入力された整数：", inputNum );

適切に処理するユーザ関数を用意し、意図した入力値を得られるように考えてみてください。

１以上の整数値を得る入力処理の例

var inputInteger = function( message ) {
  var rslt = undefined; // 古い処理系では void 0
  while ( !rslt ) {
    rslt = prompt( message );
    console.log( "prompt() > ", rslt, typeof rslt,  parseInt(rslt) ); // 後で消す

    if ( !isFinite(rslt) || (rslt = parseInt( rslt )) < 1 ) {
      rslt = undefined;
    }
  }
  return rslt;
}
console.log("入力された整数：", inputInteger("１以上の整数を入力") );

MDN

• prompt()
• isFinite()
• parseInt()

arrを配列化したいのですが

コード内で // 配列番号を取得 とコメントされていますが、変数名を arr ではなく、idx のプレフィックスを持たせた変数名に変えてみてください（混乱の原因です）。

// <-- ここにユーザ入力用の配列を保持する処理を書くのでしょうか？？

i==0 のときに結果を格納する配列を初期化することになりそうです。
（２次元配列の指定がない場合、オブジェクトを連想配列代わりに使う方が楽に思います）。

Comments

[aluminium]

ありがとうございます。
仰るとおり、４つのケースは処理できていません。減点になると思いますので、時間の許すかぎり実装したいと思います。
arr は 提出前に idx に直したいと思います。

Answer 2

こんにちは。

単に配列にしたいのであれば、

let indexes = [];

配列として初期化してから

indexes.push(1); // 要素「1」を末尾に追加

要素を追加していけば良いです。

気になったこと

• varは時代遅れなので、特段の理由がない限りconstとletを使いましょう。
• courseCode、courseTitleとして別の配列に入れるのは、コードとコース名がずれてしまう恐れがあり設計的に良くありません。

JSONを用いて以下のようにした方が綺麗です。

const courses = [
    { "code": "WEB222", "name": "ウェブプログラミング基礎" },
    { "code": "WEB322", "name": "ウェブプログラミングツールとフレームワーク" },
    …
];

// インデックス2のnameを取得
const name = courses[2].name;

// codeがWEB222のコースのインデックスを取得
const index = courses.findIndex(course => course.code == "WEB222");

Comments

[aluminium]

ありがとうございます。
何時間も試行錯誤して courseCode[i] = courseCode[arr]; としたところ、期待した動きになりました。
push で配列を追加するのは思いつきませんでした。

constとlet を使った方がよいということ、コードとコース名をまとめた方がいいというご意見が、とても参考になりましたのでベストアンサーにさせていただきます。