配列を制すとJSが書ける — バニラJS入門（第5回）
入門書を読み終えても何も作れない。これは文法を覚えていないからではありません。
データをどう扱うかを練習していないからです。実務のJavaScriptは、配列とオブジェクトをこねる作業が8割を占めます。
Part 2 JavaScriptの土台 ／ 第5回。前回：実装者が責任を持つ範囲のSEO 次回：データを画面に出す（近日公開）
そもそもJavaScriptとは
Webページに動きと処理を与えるプログラミング言語です。HTMLとCSSが静止画なら、JavaScriptは動画にあたります。
ボタンを押すと開くメニュー、入力チェック、地図のドラッグ。ページを読み込み直さずに何かが起きるなら、ほぼJavaScriptが動いています。
名前が似ているJavaとはまったく別の言語です（当時の流行に便乗した命名で、今も混乱のもとになっています）。
そしてJavaScriptは、ブラウザが唯一そのまま実行できる言語です。後で出てくるTypeScriptもReactも、最終的にはJavaScriptに変換されて動きます。土台はここだと考えてください。
JavaScriptの入門書を読み終えても何も作れないのは、文法を覚えても「データをどう扱うか」を練習していないからです。実務のJSは、配列とオブジェクトをこねる作業が8割です。
よくある書き方（Before）
var names = [];
for (var i = 0; i < cars.length; i++) {
if (cars[i].year < 1980) {
names.push(cars[i].name);
}
}
直した書き方（After）
const names = cars
.filter(car => car.year < 1980)
.map(car => car.name);
なぜそうなるか
変数は const から
var は使いません。再代入しないなら const、するなら let。const を既定にすると「この値は途中で変わらない」が読む人に伝わります。
扱うデータの形
const cars = [
{ id: 1, name: "スカイライン GT-R", year: 1969, price: 12000000 },
{ id: 2, name: "フェアレディZ", year: 1969, price: 5800000 },
];
配列の中にオブジェクト。APIから返ってくるデータはほぼこの形です。
覚える配列メソッドは4つ
| メソッド | やること |
|---|---|
map |
全要素を別の形に変換する（件数は変わらない） |
filter |
条件に合う要素だけ残す |
find |
条件に合う最初の1件を取り出す |
sort |
並べ替える |
const target = cars.find(car => car.id === 2);
const cheapOrder = [...cars].sort((a, b) => a.price - b.price);
sort は元の配列を破壊するので、[...cars] でコピーしてから並べ替えるのが安全です。
アロー関数
car => car.name は function (car) { return car.name; } の短縮形です。最初は読みにくいですが、配列メソッドと組むと一気に短くなります。
手を動かす課題
10件のデータを配列で用意し、次の4つを console.log で出してください。
- 名前だけの配列
- 1980年より前のものだけ
- idが3のもの1件
- 価格が安い順
- □
varを1つも使っていない - □ forループを配列メソッドに書き換えられた
- □
findとfilterの戻り値の違いを説明できる - □ DevToolsのConsoleでその場で試した
次回はこのデータを画面に出します。
今回の学び
まず、作れない理由は文法ではなくデータの扱いだということ。入門書は文法を一周させてくれますが、そこと実務のあいだに配列の練習が抜けていました。
次に、既定を変えない側に置くと、読む人に意図が伝わること。再代入しない宣言を既定にすると、「この値は途中で変わらない」が宣言の形で残ります。
そして、並べ替えは元の配列を壊すこと。他のメソッドと見た目が似ているぶん、ここだけ挙動が違うことを知らないと、離れた場所で不思議な不具合になります。
