モダンJavaScript紹介 - AIko Code Symphony

1. モダンJavaScriptとは

モダンJavaScriptとは、JavaScriptの最新の機能や開発手法を指します。近年のJavaScriptの進化により、より効率的で使いやすいコードを書くことができるようになりました。

2. モジュール化とESモジュール

モジュール化は、複雑なJavaScriptプログラムを小さな部品に分割することで、保守性や再利用性を向上させる手法です。ESモジュールは、JavaScriptの組み込みモジュールシステムであり、importとexportキーワードを使用してモジュールを定義し、他のモジュールから利用することができます。

// モジュールの定義 (math.js)
export function add(a, b) {
  return a + b;
}

// モジュールの利用 (main.js)
import { add } from './math.js';

console.log(add(1, 2)); // Output: 3

3. アロー関数とラムダ記法

アロー関数は、シンプルな構文で関数を定義するための機能です。また、アロー関数は自身のthisを持たず、周囲のスコープのthisを参照します。これにより、コードの可読性が向上し、functionキーワードよりも短く書くことができます。

// 通常の関数
function square(x) {
  return x * x;
}

// アロー関数
const square = (x) => x * x;

4. 分割代入とスプレッド演算子

分割代入は、オブジェクトや配列から必要な値を抽出して変数に代入する機能です。スプレッド演算子は、配列やオブジェクトを展開して新たな配列やオブジェクトを作成するための構文です。

// 分割代入
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // Output: 'John'
console.log(age); // Output: 30

// スプレッド演算子
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5]

5. 非同期処理とPromise

非同期処理は、時間のかかる操作（ネットワークリクエストやファイルの読み込みなど）を実行する際に、待機せずに次の処理を進める仕組みです。Promiseは非同期処理を扱うためのオブジェクトであり、成功時と失敗時のコールバックを登録することができます。

// 非同期処理の例 (ネットワークリクエスト)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

6. クラスとオブジェクト指向プログラミング

クラスはオブジェクト指向プログラミングの基本的な概念であり、関連するデータと関数をまとめたものです。JavaScriptのクラスはES6から導入され、より直感的にオブジェクト指向プログラミングを行うことができます。

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const john = new Person('John', 30);
john.greet(); // Output: 'Hello, my name is John and I'm 30 years old.'

目次