「配列」 をテーマに、基礎 / 中級 / 上級(応用) 各レベル5問ずつ、合計15問のオリジナル練習問題+解答+丁寧な解説を作成しました。コードはそのままブラウザのコンソールで実行できます。
基礎レベル(5問)
問題1
配列 fruits を作り、"apple", "banana", "orange" を格納してください。console.log(fruits); の出力は?
const fruits = ["apple", "banana", "orange"];
console.log(fruits);
JavaScript解答と解説
- 出力:
["apple", "banana", "orange"] - 解説:配列リテラル
[]に要素をカンマで並べます。constでも配列の要素は変更可能です(参照は不変)。
問題2
配列 nums = [1,2,3] に 4 を末尾に追加する方法と、その後の配列を示してください。
let nums = [1,2,3];
nums.push(4);
console.log(nums);
JavaScript解答と解説
- 出力:
[1,2,3,4] - 解説:
.push()は配列の末尾に要素を追加します。元の配列が変更されます。
問題3
配列 colors = ["red","green","blue"] の長さを取得するコードと結果は?
const colors = ["red","green","blue"];
console.log(colors.length);
JavaScript解答と解説
- 出力:
3 - 解説:
.lengthは配列の要素数(インデックスの最大+1)を返します。
問題4
次のコードの出力は何ですか?
const arr = [10, 20, 30];
console.log(arr[1]);
JavaScript解答と解説
- 出力:
20 - 解説:配列は 0 始まりのインデックス。
arr[1]は 2 番目の要素です。
問題5
配列 nums = [1,2,3] から末尾の要素を取り出して last に格納するコードと last の値は?
let nums = [1,2,3];
let last = nums.pop();
console.log(last);
console.log(nums);
JavaScript解答と解説
- 出力:
3
[1,2,3] の後は [1,2]
(実際は 3 と [1,2] がそれぞれ出力されます)
- 解説:
.pop()は末尾要素を取り除きその要素を返します。配列自体が変更されます。
中級レベル(5問)
問題1
配列 [1,2,3,4,5] をループして各要素を2倍し、新しい配列 doubled を得るコードを書いてください(for または map を使用)。
const arr = [1,2,3,4,5];
const doubled = arr.map(x => x * 2);
console.log(doubled);
JavaScript解答と解説
- 出力:
[2,4,6,8,10] - 解説:
.map()は元配列を変えず、各要素に対する変換結果から新配列を返します。
問題2
配列 nums = [10, 15, 20, 25] から 20 以上の要素だけを抽出するコード(filter を使う)と結果は?
const nums = [10, 15, 20, 25];
const filtered = nums.filter(n => n >= 20);
console.log(filtered);
JavaScript解答と解説
- 出力:
[20, 25] - 解説:
.filter()は条件を満たす要素のみを含む新しい配列を返します。
問題3
配列 a = [1,2,3] と b = [4,5] を結合して c を作るコードと結果は?
const a = [1,2,3];
const b = [4,5];
const c = a.concat(b);
console.log(c);
JavaScript解答と解説
- 出力:
[1,2,3,4,5] - 解説:
.concat()は元配列を変更せずに新しい結合配列を返します。スプレッド[...]でも可。
問題4
配列 arr = [0,1,2,3,4] の indexOf と includes の違いを示すコードと出力例を書いてください(要素 3 と 6 をチェック)。
const arr = [0,1,2,3,4];
console.log(arr.indexOf(3)); // ?
console.log(arr.indexOf(6)); // ?
console.log(arr.includes(3)); // ?
console.log(arr.includes(6)); // ?
JavaScript解答と解説
- 出力(順に):
3,-1,true,false - 解説:
.indexOf(value)は見つかればインデックス(0始まり)、見つからなければ -1。.includes(value)は真偽値で存在チェックを返す。
問題5
配列の一部を抜き出す slice と、配列をその場で切り取る splice の違いを短いコードで示してください(arr = [1,2,3,4,5] で 2〜3 を操作)。
const arr = [1,2,3,4,5];
const s = arr.slice(1,3); // sliceは新しい配列を返す
console.log(s); // ?
console.log(arr); // 元配列は変わらない
let arr2 = [1,2,3,4,5];
const removed = arr2.splice(1,2); // spliceは元配列を変更
console.log(removed); // ?
console.log(arr2); // ?
JavaScript解答と解説
- slice 出力:
[2,3]、元配列は[1,2,3,4,5]のまま。 - splice 出力:
[2,3](削除された要素)、arr2は[1,4,5]に変わる。 - 解説:
slice(start,end)は新しい配列を返す(end は除外)。splice(start, deleteCount, ...items)は元配列を直接変更する。
上級/応用レベル(5問)
問題1
数値配列の平均値を reduce を使って計算するコードを書いてください(配列例 [10,20,30,40])。
const nums = [10,20,30,40];
const sum = nums.reduce((acc, cur) => acc + cur, 0);
const avg = sum / nums.length;
console.log(avg);
JavaScript解答と解説
- 出力:
25 - 解説:
.reduce()は累積処理に向く。初期値0を指定して総和を出し、要素数で割ると平均。
問題2
配列 [3,1,4,1,5,9] を昇順にソートする際、.sort() だけでは正しくないケースがあります。正しい比較関数を使ってソートするコードと出力を示してください。
const arr = [3,1,4,1,5,9];
arr.sort((a,b) => a - b);
console.log(arr);
JavaScript解答と解説
- 出力:
[1,1,3,4,5,9] - 解説:
.sort()はデフォルトで文字列として比較するため数値ソートには比較関数(a,b)=>a-bが必要。
問題3
多重配列 [[1,2],[3,4],[5,6]] をフラット化して [1,2,3,4,5,6] にする(flat を使う)コードと結果は?
const nested = [[1,2],[3,4],[5,6]];
const flat = nested.flat();
console.log(flat);
JavaScript解答と解説
- 出力:
[1,2,3,4,5,6] - 解説:
.flat(depth)はネストを深さdepthまで平坦化。デフォルトdepth=1。
問題4
配列内の重複を取り除く(ユニークにする)コードを書いてください。例:[1,2,2,3,3,3] → [1,2,3]。
const arr = [1,2,2,3,3,3];
const unique = Array.from(new Set(arr));
// または: const unique = [...new Set(arr)];
console.log(unique);
JavaScript解答と解説
- 出力:
[1,2,3] - 解説:
Setは重複を許さないコレクション。スプレッドやArray.fromで配列に戻す。
問題5
オブジェクト配列から特定のプロパティ配列を取り出す(map を使う)。例:[{id:1,name:"A"},{id:2,name:"B"}] から ["A","B"] を作るコードを示してください。
const users = [{id:1,name:"A"},{id:2,name:"B"}];
const names = users.map(u => u.name);
console.log(names);
JavaScript解答と解説
- 出力:
["A","B"] - 解説:
.map()は配列の各要素を変換して新しい配列を返すため、オブジェクト配列から特定フィールドだけを抜き出すのに便利。


