JavaScriptの配列メソッドをゲーム感覚で学べる「JS Array Time
Attack」！map、filter、reduce、find、some、everyといった実務で頻出のメソッドを、コードブロックを並べ替えるパズル形式で楽しく習得できます。
🎮 ゲームの概要
出題されるミッション（例：「配列のすべての数字を2倍にしろ！」）に対して、正しいコードブロックを選んで並べ、コードを実行します。全10問を最速でクリアするタイムアタック形式です。
📋 基本ルール
- 問題数：全10問（ランダム出題）
- 操作：ブロックをタップして並べる → RUN CODE
- 正解：次の問題へ進む
- 不正解：+5秒のペナルティ + 解説表示
- 目標：なるべく短いクリアタイムを目指す
📚 学べる配列メソッド解説
このゲームで出題される主要なメソッドを解説します。実務でも頻繁に使うものばかりです！
📌 map() — 全要素を変換
array.map(x => x * 2)配列のすべての要素に同じ処理を適用して、新しい配列を返します。要素数は変わりません。
例：[1, 2, 3] → [2, 4, 6]
📌 filter() — 条件でふるい分け
array.filter(x => x % 2 === 0)条件に合う要素だけを抽出した新しい配列を返します。
例：[1, 2, 3, 4, 5] → [2, 4]
📌 find() — 最初の1つを発見
array.find(x => x > 10)条件に合う最初の要素を1つだけ返します（配列ではなく単一値）。
例：[4, 8, 15, 16] → 15
📌 reduce() — 1つの値にまとめる
array.reduce((acc, cur) => acc + cur, 0)配列の要素を順番に処理して1つの値に集約します。合計・最大値・オブジェクト集計などに使えます。
例：[10, 20, 30] → 60
📌 some() — 1つでもあるか？
array.some(x => x >= 100)条件に合う要素が1つでもあれば true。存在チェックに便利。
📌 every() — すべて満たすか？
array.every(x => x > 0)すべての要素が条件を満たすかチェック。1つでもダメなら false。
🔗 メソッドチェーン（Boss問題）
ゲームには[Boss]マーク付きの応用問題も出題されます。filter()とmap()を連結する「メソッドチェーン」パターンで、実務での頻出テクニックです。
例：奇数だけを取り出して10倍にする
- 入力：
[1, 2, 3, 4] - コード：
array.filter(x => x % 2 !== 0).map(x => x * 10) - 出力：
[10, 30]
🏆 好タイムを出すコツ
- メソッド名を覚える：map=変換、filter=絞り込み、reduce=集約、find=発見、some=存在確認、every=全一致
- 色でブロックを判別：紫=変数、青=メソッド、緑=コールバック、グレー=記号
- まずメソッドを決める：出題文から適切なメソッドをすぐ選ぶのが時短のカギ
- ペナルティを避ける：不正解は+5秒。迷ったら解説を読んで次に活かす
🎓 こんな人におすすめ
- JavaScriptの配列メソッドを覚えたいプログラミング初心者
- for文は書けるけど
map/filterに慣れたい方 - コーディング面接の準備をしたい方
- 通勤・通学のスキマ時間で学習したい方
📱 操作方法
- ブロックをタップ：コードエリアに追加/削除
- RUN CODE：組み立てたコードを実行・判定
- 🔄 クリア：選択をリセット
- ⌫ バックスペース：最後のブロックを削除
🛠️ 技術的な特徴
React
18を使ったSPA。ブラウザ内でBabelがJSXをコンパイルし、new Function()でユーザーが組み立てたコードをリアルタイムに実行・検証します。外部サーバー不要で完全にクライアントサイドで動作します。