JavaScriptのES6とは？

ES6は…

• JavaScriptの6番目のメジャーバージョン
• 正式名称はECMAScript 2015
• 2015年6月にリリース

ES6では

• 従来のJavaScriptに多くの新機能や構文が追加
• JavaScriptのコードがより簡潔で読みやすく、効率的に書けるように

主な新機能

クラス構文: オブジェクト指向プログラミング

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('John Doe', 30);
person.sayHello(); // Hello, my name is John Doe.

モジュール: コードを分割して管理しやすく

// モジュールファイル: math.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 他のファイル

import { add, subtract } from './math.js';

const result = add(1, 2); // 3
console.log(result);

const difference = subtract(4, 2); // 2
console.log(difference);

アロー関数: 関数をより簡潔に記述

// 従来の関数
function add(a, b) {
  return a + b;
}

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

const result = add(1, 2); // 3
console.log(result);

デフォルト引数: 関数の引数にデフォルト値を設定できるように

function add(a, b = 1) {
  return a + b;
}

const result1 = add(1, 2); // 3
console.log(result1);

const result2 = add(1); // 2
console.log(result2);

スプレッド構文: 配列やオブジェクトを展開して使用できるように

// 配列の連結

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
console.log(arr3);

// オブジェクトのマージ

const obj1 = {
  name: 'John Doe',
  age: 30
};

const obj2 = {
  address: '123 Main Street',
  city: 'New York'
};

const obj3 = {...obj1, ...obj2}; // { name: 'John Doe', age: 30, address: '123 Main Street', city: 'New York' }
console.log(obj3);

// 関数引数の展開

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

const result = sum(...numbers); // 6
console.log(result);

テンプレートリテラル: 文字列をより簡単に記述できるように

• 従来では、文字列を連結するには、+ 演算子を使用
  • コードが冗長になりがち
• テンプレートリテラルは、バッククォート文字 (`) を使用して記述
  • 文字列をより簡単に記述

const name = 'John Doe';
const age = 30;

const greeting = `Hello, ${name}. You are ${age} years old.`;
console.log(greeting);

Promise: 非同期処理をより簡単に記述できるように

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, world!');
    }, 1000);
  });
}

getData().then((data) => {
  console.log(data); // Hello, world!
});

ブラウザ対応状況

• 多くのブラウザでサポート
• 一部の古いブラウザではサポートされていない機能もある

ES6を学ぶメリット

• コードがより簡潔で読みやすくなる
• 開発効率が向上する
• 最新のJavaScriptの機能を使える
• 将来のキャリアに役立つ