【ECMAScript編】第6回：現代的なJavaScriptの書き方

導入

皆さん、「EcmaScript基礎マスターへの道」もいよいよ最終回です！これまでの学習で、JavaScriptの基本的な文法や概念はしっかりと身についたことと思います。しかし、現代のJavaScriptコードを見ると、これまで学んできた書き方とは少し異なる表現を多く目にすることもあったかもしれません。

それらの多くは、2015年にリリースされたES6（ECMAScript 2015）以降に導入された新しい機能によるものです。これらの新機能は、コードをより簡潔に、読みやすく、そして効率的に書くことを可能にしました。

この最終回では、ES6以降に導入された数ある機能の中から、特に頻繁に使われ、現代的なJavaScriptを書く上で欠かせない主要な機能に焦点を当てて解説します。これらの機能を習得することで、皆さんのJavaScriptコードは格段に「今風」になり、より洗練された開発が可能になるでしょう。実際に手を動かしながら、現代的なJavaScriptの世界へ踏み出しましょう！

メイン解説

1. let と const による変数宣言

これまでは変数を宣言する際に var を使ってきましたが、ES6からは let と const という新しいキーワードが導入されました。これらは var が持っていたいくつかの問題を解決し、より安全で意図通りのコードを書くことを可能にします。

• let:
  • ブロックスコープ: if文やfor文などのブロック（{}で囲まれた範囲）内で宣言されたlet変数は、そのブロック内でのみ有効です。
  • 再代入可能: 変数に新しい値を代入できます。
  • 再宣言不可: 同じスコープ内で同じ名前のlet変数を再度宣言することはできません。
• const:
  • ブロックスコープ: letと同様にブロックスコープを持ちます。
  • 再代入不可: 変数に新しい値を代入することはできません。宣言時に初期化が必須です。
  • 再宣言不可: 同じスコープ内で同じ名前のconst変数を再度宣言することはできません。
  • 注意: constで宣言されたオブジェクトや配列そのものの再代入はできませんが、その中身のプロパティや要素を変更することは可能です。

var, let, const の比較

// var の例（関数スコープ、巻き上げ、再宣言可能）
console.log(varVariable); // undefined（巻き上げ）
var varVariable = "Hello var";
console.log(varVariable); // Hello var

var varVariable = "New Hello var"; // 再宣言可能
console.log(varVariable); // New Hello var

if (true) {
  var varInBlock = "Var in block";
}
console.log(varInBlock); // Var in block（ブロックスコープではない）

// let の例（ブロックスコープ、再代入可能、再宣言不可）
// console.log(letVariable); // ReferenceError（巻き上げされない、またはTDZ）
let letVariable = "Hello let";
console.log(letVariable); // Hello let

letVariable = "New Hello let"; // 再代入可能
console.log(letVariable); // New Hello let

// let letVariable = "Another let"; // SyntaxError: Identifier 'letVariable' has already been declared

if (true) {
  let letInBlock = "Let in block";
  console.log(letInBlock); // Let in block
}
// console.log(letInBlock); // ReferenceError: letInBlock is not defined（ブロックスコープ）

// const の例（ブロックスコープ、再代入・再宣言不可）
const constVariable = "Hello const";
console.log(constVariable); // Hello const

// constVariable = "New Hello const"; // TypeError: Assignment to constant variable.
// const constVariable = "Another const"; // SyntaxError: Identifier 'constVariable' has already been declared

const person = { name: "Alice", age: 30 };
person.age = 31; // オブジェクトの中身は変更可能
console.log(person); // { name: 'Alice', age: 31 }

// person = { name: "Bob" }; // TypeError: Assignment to constant variable.

使い分けのベストプラクティス: 基本的には const を使い、後から値を変更する必要がある場合にのみ let を使うようにしましょう。var は現代のJavaScript開発ではほとんど使われません。

2. アロー関数 (Arrow Functions)

アロー関数は、より短く、簡潔に関数を書くための新しい構文です。特にコールバック関数などでその真価を発揮します。

基本構文

// 従来の関数宣言
function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice"));

// アロー関数
const greetArrow = (name) => {
  return "Hello, " + name + "!";
};
console.log(greetArrow("Bob"));

さらに簡潔に

• 引数が1つの場合: 丸括弧 () を省略できます。
• 処理が1行の場合: 波括弧 {} と return キーワードを省略できます。この場合、その1行の評価結果が関数の戻り値になります。

// 引数が1つ、1行の処理
const double = (x) => x * 2;
console.log(double(5)); // 10

// 引数がない場合
const sayHi = () => "Hi there!";
console.log(sayHi()); // Hi there!

// 複数行の処理（{}とreturnが必要）
const calculateSum = (a, b) => {
  const sum = a + b;
  return sum;
};
console.log(calculateSum(10, 20)); // 30

// オブジェクトを返す場合 (注意: {}はブロックと解釈されるため、括弧で囲む)
const createPerson = (name, age) => ({ name: name, age: age });
console.log(createPerson("Charlie", 25)); // { name: 'Charlie', age: 25 }

アロー関数は this の挙動が従来の関数とは異なるなど、より高度な側面もありますが、まずはこの簡潔な記述方法をマスターすることが重要です。

3. テンプレートリテラル (Template Literals)

文字列を扱う際、これまでは文字列の連結に + 演算子を使ってきました。テンプレートリテラルはバッククォート (“ ` “) で文字列を囲むことで、変数や式を文字列中に埋め込んだり、複数行の文字列を簡単に書いたりできるようになります。

const name = "Alice";
const age = 30;

// 従来の文字列結合
const oldGreeting = "私の名前は" + name + "で、年齢は" + age + "歳です。";
console.log(oldGreeting); // 私の名前はAliceで、年齢は30歳です。

// テンプレートリテラル
const newGreeting = `私の名前は${name}で、年齢は${age}歳です。`;
console.log(newGreeting); // 私の名前はAliceで、年齢は30歳です。

// 式の埋め込みも可能
const price = 100;
const tax = 0.1;
const message = `商品の価格は${price}円で、税込み価格は${price * (1 + tax)}円です。`;
console.log(message); // 商品の価格は100円で、税込み価格は110円です。

// 複数行の文字列もそのまま記述可能
const multiLineText = `
  これは
  複数行の
  テキストです。
  改行もそのまま反映されます。
`;
console.log(multiLineText);
/*
  これは
  複数行の
  テキストです。
  改行もそのまま反映されます。
*/

テンプレートリテラルは、文字列の構築を非常に読みやすく、柔軟にします。

4. 分割代入 (Destructuring Assignment)

分割代入は、配列やオブジェクトから値を取り出して、個別の変数に代入する便利な構文です。コードの可読性を高め、冗長な記述を減らします。

配列の分割代入

const colors = ["Red", "Green", "Blue"];

// 従来の代入
// const firstColor = colors[0];
// const secondColor = colors[1];

// 分割代入
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor); // Red
console.log(secondColor); // Green
console.log(thirdColor); // Blue

// 特定の要素だけを取り出す、残りの要素を無視する
const [a, , c] = ["X", "Y", "Z"];
console.log(a); // X
console.log(c); // Z

// デフォルト値の設定
const [name, age = 20] = ["Taro"];
console.log(name, age); // Taro 20

オブジェクトの分割代入

オブジェクトのプロパティ名を指定して値を取り出します。

const person = {
  name: "Alice",
  age: 30,
  city: "New York",
};

// 従来の代入
// const personName = person.name;
// const personAge = person.age;

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

// プロパティ名を別の変数名として使う
const { name: fullName, age: yearsOld } = person;
console.log(fullName); // Alice
console.log(yearsOld); // 30

// 存在しないプロパティにデフォルト値を設定
const { name: newName, job = "Engineer" } = person;
console.log(newName, job); // Alice Engineer

分割代入は関数の引数としてもよく利用され、オブジェクトのプロパティを直接関数内で利用できるようになります。

5. スプレッド構文とレストパラメーター (…)

... (三点リーダー) は、文脈によって「スプレッド構文」または「レストパラメーター」として機能します。どちらも配列やオブジェクトの操作、関数の引数周りで非常に役立ちます。

スプレッド構文 (Spread Syntax)

配列やオブジェクトを展開し、要素やプロパティを「ばらまく」ようなイメージです。

• 配列の結合やコピー

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

// 配列の結合
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

// 配列のコピー（シャローコピー）
const copiedArray = [...arr1];
console.log(copiedArray); // [1, 2, 3]
console.log(copiedArray === arr1); // false (別の配列オブジェクト)

// 配列の中間に追加
const newArr = [0, ...arr1, 4];
console.log(newArr); // [0, 1, 2, 3, 4]

• オブジェクトの結合やコピー

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// オブジェクトの結合
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }

// オブジェクトのコピー（シャローコピー）
const copiedObject = { ...obj1 };
console.log(copiedObject); // { a: 1, b: 2 }
console.log(copiedObject === obj1); // false

// プロパティの上書き
const updatedObject = { ...obj1, b: 20, e: 5 };
console.log(updatedObject); // { a: 1, b: 20, e: 5 }

• 関数呼び出し時の引数展開

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

const numbers = [10, 20, 30];
const result = sum(...numbers); // numbers配列の要素が個別の引数として渡される
console.log(result); // 60

レストパラメーター (Rest Parameters)

関数の引数として ... を使うと、指定した引数以外の残りの引数すべてを配列として受け取ることができます。

function displayInfo(name, age, ...hobbies) {
  console.log(`名前: ${name}`);
  console.log(`年齢: ${age}歳`);
  console.log(`趣味: ${hobbies.join(", ")}`);
}

displayInfo("Alice", 30, "読書", "サイクリング", "プログラミング");
/*
名前: Alice
年齢: 30歳
趣味: 読書, サイクリング, プログラミング
*/

displayInfo("Bob", 25);
/*
名前: Bob
年齢: 25歳
趣味: 
*/

function sumAll(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(10, 20, 30, 40, 50)); // 150

レストパラメーターは、引数の数が不定な関数を定義する際に非常に便利です。

まとめ

お疲れ様でした！「EcmaScript基礎マスターへの道」第6回では、現代的なJavaScriptの書き方を学ぶ上で不可欠なES6以降の主要新機能を解説しました。

• let と const: 変数宣言の新しい標準となり、スコープと再代入のルールを明確にしました。
• アロー関数: より簡潔に関数を定義できるようになり、特にコールバック関数で多用されます。
• テンプレートリテラル: 文字列の埋め込みや複数行の記述を格段に容易にしました。
• 分割代入: 配列やオブジェクトから必要な値を取り出す操作を、読みやすく効率的に行えるようになりました。
• スプレッド構文とレストパラメーター: 配列やオブジェクトの操作、関数の引数処理において、コードを簡潔かつ柔軟にする強力なツールです。

これらの機能は、現代のJavaScript開発において日々使われており、これらを使いこなすことで皆さんのコードはより洗練され、他の開発者のコードもスムーズに理解できるようになります。

これで「EcmaScript基礎マスターへの道」は完結です。このシリーズを通して学んだ基礎知識と、今回の現代的な書き方を活かして、ぜひ多くのアプリケーション開発に挑戦してみてください。JavaScriptは奥深く、常に進化を続ける言語です。これからも新しい知識を学び続け、スキルアップしていきましょう！

チャンネル登録 よろしくお願いします

こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。