はじめに

こんにちは、今日はモダンJavascriptでポイントになる4つの特徴について簡単に説明します。 モダンJavascriptとはES6(ECMAScript 2015)以降を指します。 様々な特徴がありますが、その中で最も重要だと思われる4つの特徴について説明します。

1. const, letで変数宣言

varは再宣言・上書きが可能です。
letは再宣言が不可能・上書きは可能です。
constは再宣言が不可能・上書きも不可能（オブジェクト・配列の中身は変更可能）です。
Reactでは主にconstを使います。（Stateでは管理せず処理の中で値を上書きしていくような変数のみletを使う）

const obj1 = {
 name: "haha",
 age: 24,
};
console.log(obj1); // {name: "haha", age: 24}

obj1.name = "hoho";
consolo.elog(obj1); // {name: "hoho",, age: 24}

obj1.address = "Tokyo";
console.log(obj1); // { name: "hoho", age: 24, address: "Tokyo" }

obj1という名前のオブジェクトが作成されます。このオブジェクトには、nameプロパティとageプロパティが含まれています。

obj1.name = "hoho";は、obj1のnameプロパティの値を"hoho"に変更します。
obj1.address = "Tokyo";は、obj1に新しいプロパティaddressを追加し、その値を"Tokyo"とします。

2. アロー関数 （）＝＞｛｝

アロー関数は関数式を簡単に作ってくれる文法です。=> 記号を使って関数を定義し、関数内部でthisがレキシカルスコープ(変数の有効範囲がコードを作成する時点で決定されるスコープ。静的スコープ(static scope)とも呼ばれます。)を持つので、一般関数とは違う動作をします。主に短い関数を作成する時便利です。

const func2 = (value) => {
 return value;
};

console.log(func2("hahaha")); // hahaha

引数が1つの場合は括弧を省略可能です。

const func2 = value => {
 reutrn value;
};

引数が2つ以上ある場合は括弧をつける必要があります。

const func3 = (num1, num2) => {
 return value1 + value2;
};

処理を単一行で返す場合、括弧と return を省略することができます。

const func4 = (num1, num2) => num1 + num2;

console.log(fun4(10, 20)); // 30

戻り値が複数行の場合は () で返すことができます。

const func5 = (val1, val2) => (
 {
  name: val1,
  age: val2,
 }
)

3. 分割代入｛｝[]

分割代入はオブジェクトや配列から値を抽出するための方法です。JavaScriptで配列やオブジェクトの値を分解して変数に割り当てる方法です。 この機能を使えば、配列やオブジェクトの一部を簡単に抽出して複数の変数に割り当てることができます。

const myProfile = {
 name: "haha",
 age: 24,
};

const { name, age } = myProfile;
const message = `my name is ${name}. My age is ${age}.`;
console.log(message); // my name is haha. My age is 24.

抽出したプロパティに別の名前を付ける場合、コロン(:)を使います。

const myProfile = {
 name: "haha",
 age: 24,
};

const { name: newName, age: newAge } = myProfile;
const message = `my name is ${newName}. My age is ${newAge }.`;
console.log(message); // my name is haha. My age is 24.

配列の分割代入

const myProfile = ["haha", 24]

const [name, age] = myProfile;
const message = 'my name is ${name}. my age is ${age}`
console.log(message); // my name is haha. my age is 24.

4. Promiseと非同期処理

Pramisは非同期タスクを処理し、成功または失敗に応じてコールバックを実行するために使用されます。非同期タスクをより簡潔かつ効率的に扱うことができます。その後、async/await構文が追加され、非同期作業をもっと簡単に扱うことができるようになりました。

function getData() {
  return new Promise((resolve, reject) => {
    // 非同期作業の実行
    // 成功時 resolve、失敗時 reject 呼び出し
  });
}

async function fetchData() {
  try {
    const data = await getData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData()関数は、新しいPromiseを返します。このPromiseは、非同期の作業を実行します。サーバーからデータを取得するためのHTTPリクエストや、データベースから情報を取得する処理などがここで行われることができます。

fetchData()関数はasyncキーワードを用いて定義されています。このasyncキーワードは、関数内でawaitを使用できるようにします。awaitはPromiseが解決するまで処理を一時停止させるため、非同期処理の結果を待つことができます。

fetchData()関数の中ではgetData()関数がawaitキーワードで呼び出されています。これにより、getData()関数の非同期処理が完了するまで次の行のコードが実行されなくなります。

おわりに

モダンJavaScriptにおける重要な機能や特徴を紹介しました。constやletを用いた変数宣言の方法やアロー関数、分割代入、Promiseを利用した非同期処理など、これらの機能を活用することで、より効率的にコードを記述し、保守性や可読性を高めることができます。

これからJavaScriptを学ぶ方や最新のJavaScript機能に興味を持つ方にとって、JavaScriptのモダンな機能を活用し、より優れた開発を行えるよう、これらの特徴を積極的に取り入れていきましょう。

エンジニアファーストの会社 株式会社CRE-CO
ソンさん

【参考】

• じゃけぇ(岡田 拓巳)、『モダンJavaScriptの基本から始める React実践の教科書』、SBクリエイティブ、2021、34-66pp.