Zenn
🐕

【JavaScript】モダンJavaScriptと昔のJavaScriptの違いって理解している？

に公開
JavaScript
tech

🧠 モダンJavaScriptと昔のJavaScriptの違いをしっかり理解しよう

こんにちは、Greentomatoです。
ReactやPythonで副業スキルを構築するチャレンジ中ですが、今回はその前提となる「モダンJavaScript」について整理します。

✅ この記事でわかること

  • モダンJavaScript（ES6以降）とは何か？
  • 旧来のJavaScript（ES5以前）と何が違うのか？
  • なぜモダン構文が推奨されるのか？

🕰 昔のJavaScript（ES5以前）の特徴

昔のJavaScriptは、次のような特徴がありました：

  • var しか使えずスコープ管理が難しい
  • 文字列結合は + を使っていた
  • 非同期処理はすべてコールバック
  • モジュール分割の仕組みがなく、グローバル汚染が起きやすかった

✨ モダンJavaScript（ES6以降）の特徴

2015年のES6（ECMAScript 2015）を皮切りに、JavaScriptは大きく進化しました。

機能 モダンの特徴 メリット
変数宣言 let, const 安全なスコープ管理
関数 アロー関数 ()=>{} 簡潔 & thisの扱いが直感的
テンプレート文字列 `Hello, ${name}` 読みやすく柔軟
構造分割 分割代入 { name } データ取得が簡潔
スプレッド構文 { ...obj }, [...arr] コピー・マージが楽
非同期処理 Promise, async/await 可読性・保守性アップ
モジュール import / export グローバル汚染防止

🔁 例：同じ処理を「昔」と「モダン」で書いてみる

🔸 昔の書き方（ES5）

var name = "Greentomato";
var message = "Hello " + name + "!";

function greet() {
  console.log(message);
}

greet();

✅ モダンな書き方（ES6以降）

const name = "Greentomato";
const message = `Hello ${name}!`;

const greet = () => {
  console.log(message);
};

greet();

→ 結果は同じでも、モダン構文の方が明らかに読みやすく、エラーが起きにくい！

📦 スプレッド構文と分割代入

スプレッド構文（オブジェクトのコピー）

const original = { name: "Taro", age: 30 };
const copy = { ...original, age: 31 }; // ageだけ上書き

分割代入（特定のプロパティを取り出す）

const user = { name: "Hanako", role: "admin" };
const { name, role } = user;

🧩 非同期処理の進化：コールバック → async/await

ES5（コールバック地獄）

getData(function(response) {
  parseData(response, function(result) {
    display(result);
  });
});

モダン（async/await）

const response = await getData();
const result = parseData(response);
display(result);

→ 非同期処理がまるで同期コードのように書ける！

🚀 Reactや副業現場でモダン構文が前提な理由

モダンJavaScriptはReact、Vue、Node.jsなどモダンなフレームワークの土台です。
以下のような現場ではモダン構文が必須です：

  • import React from 'react'
  • const [count, setCount] = useState(0)
  • props => <div>{props.name}</div>

つまり、モダンJSが使えないとReact開発はそもそも書けない。

💡 まとめ

  • モダンJavaScriptは2015年のES6以降の進化版
  • let / const、アロー関数、テンプレートリテラル、スプレッド構文などが代表的
  • 可読性・安全性・保守性が大幅に向上
  • Reactや副業の現場ではモダン構文が前提

Discussion