モダンJavaScriptの「翻訳表」メモ

古い書き方（ロング）と、モダンな省略記法（ショート）の対応をまとめたノートです。 TypeScript / React / Next.js 前提で、最低限おさえておきたい部分だけに絞っています。

---

1. 関数宣言 ⇔ アロー関数

基本形

// ロング：ふつうの関数宣言
function add(a, b) {
  return a + b;
}

// ショート：アロー関数
const add = (a, b) => a + b;

• function (a, b) { return a + b; }
• → (a, b) => a + b

という変換だと思えばOK。 処理が1行で return だけなら、波括弧 {} と return を省略できる。

複数行の処理がある場合

// ロング
function addAndLog(a, b) {
  const sum = a + b;
  console.log(sum);
  return sum;
}

// ショート（中身が複数行なら {} と return が必要）
const addAndLog = (a, b) => {
  const sum = a + b;
  console.log(sum);
  return sum;
};

---

2. オブジェクトのプロパティ参照 ⇔ 分割代入

オブジェクトから値を取り出す

const user = { id: 1, name: "Alice", age: 20 };

// ロング
const name = user.name;
const age = user.age;

// ショート（オブジェクトの分割代入）
const { name, age } = user;

イメージ：

• user.name を name に
• user.age を age に

まとめて代入しているだけ。

関数引数での分割代入（よくあるパターン）

// ロング
function printUser(user) {
  const { name, age } = user;
  console.log(name, age);
}

// ショート（引数でそのまま分割）
function printUser({ name, age }) {
  console.log(name, age);
}

React のコンポーネントでも同じ書き方をよく使う：

function UserCard({ name, age }) {
  // props.name / props.age を展開済み
}

---

3. 配列のインデックス参照 ⇔ 配列の分割代入

const arr = [10, 20, 30];

// ロング
const first = arr[0];
const second = arr[1];

// ショート（配列の分割代入）
const [first, second] = arr;

React の useState も同じ仕組み：

const [count, setCount] = useState(0);
// → 配列から [0番目, 1番目] を取り出している

---

4. オブジェクト更新 ⇔ スプレッド構文（非破壊更新）

オブジェクトをコピーして一部だけ変える

const user = { id: 1, name: "Alice", age: 20 };

// ロング
const user2 = {
  id: user.id,
  name: "Bob",
  age: user.age,
};

// ショート（スプレッド構文）
const user2 = {
  ...user,
  name: "Bob",
};

...user は「user の中身を全部展開する」の意味。 あとから書いた name: "Bob" が上書きされるイメージ。

結果として user2 は：

{ id: 1, name: "Bob", age: 20 }

元の user は変更されない。

---

5. 配列コピー・追加 ⇔ スプレッド構文

const nums = [1, 2, 3];

// ロング
const nums2 = nums.concat(4);

// ショート
const nums2 = [...nums, 4];      // [1, 2, 3, 4]
const nums3 = [0, ...nums, 4];   // [0, 1, 2, 3, 4]

ポイント：

• 元の nums はそのまま
• 新しい配列だけ作られる（非破壊）

---

6. map / filter と省略記法の組み合わせ

基本形

const nums = [1, 2, 3, 4];

const result = nums
  .filter((n) => n % 2 === 0) // 偶数だけ残す
  .map((n) => n * 10);        // 10倍に変換

// result: [20, 40]

オブジェクト配列の例（引数で分割代入）

const users = [
  { id: 1, name: "Alice", isActive: true },
  { id: 2, name: "Bob", isActive: false },
  { id: 3, name: "Carol", isActive: true },
];

const activeNames = users
  .filter(({ isActive }) => isActive) // user.isActive が true のものだけ残す
  .map(({ name }) => name);           // 残った user の name だけ取り出す

// activeNames: ["Alice", "Carol"]

ロングで書くと：

const activeNames = users
  .filter((user) => {
    const { isActive } = user;
    return isActive;
  })
  .map((user) => {
    const { name } = user;
    return name;
  });

---

まとめ

• モダンJSの多くは「昔ながらの書き方の省略形」として理解できる。

• 対応表さえ頭の片隅にあれば、

  • アロー関数
  • 分割代入
  • スプレッド構文
  • map / filter は「読める側」にすぐ回れる。

• TypeScript / React / Next.js を触る前に、ここだけ押さえておくとソースコードの理解がかなりラクになる。