Reactを始めるためのJavaScriptとES6基礎知識

はじめに

仕事でReactを実装することになり、今更ですがJavaScriptとECMAScript 2015（通常ES6と呼ばれます）の基本的な知識についてまとめようと思います。
この記事では、Reactを始めるために必要なJavaScriptとES6の要点に焦点を当て、それらの概念を一部ですが詳しく説明し、実際のコード例を交えて理解を深めていきます。

let、const、var：変数宣言

まずは基本となる変数宣言を見ていきます。変数を宣言するための主要なキーワードは let、const、および var です。それぞれの特徴と適切な使用法について見ていきましょう。

let

let x = 10;
x = 20; // 再代入可能

let は変数をブロックスコープ内で宣言します。ブロックスコープとは、if文やforループなどの中括弧 {} 内のスコープを指します。
変数の再代入が可能です。

let を使用すると、変数はスコープ内で再宣言できますが、変数名が同じでも異なるスコープ内で再宣言された場合、別の変数として扱われます。

if (true) {
  let x = 30; // 別のスコープ内で再宣言
  console.log(x); // 30
}
console.log(x); // 20 (外側のxは影響を受けない)

const

const PI = 3.1415;

const は変数をブロックスコープ内で宣言します。
変数の再代入はできませんが、オブジェクトや配列の中身を変更することは可能です。

const は再代入を禁止するため、不変の値を宣言する際に便利です。ただし、オブジェクトや配列の要素自体は変更できるため、注意が必要です。

const colors = ["red", "green", "blue"];
colors.push("yellow"); // 可能
colors = ["pink", "purple"]; // エラー: 再代入不可

var

var name = "John";

var は関数スコープ内で宣言された変数です（ブロックスコープではありません）。
変数の再宣言および再代入が可能です。

var は古いバージョンのJavaScriptで使用され、関数内で宣言された変数はその関数全体で有効です。ブロックスコープではないため、予期しない動作が発生する可能性があります。

function example() {
  var x = 10;
  if (true) {
    var x = 20; // 同じ変数xを再宣言
  }
  console.log(x); // 20
}

アロー関数

アロー関数は、ES6から導入された新しい関数の構文で、通常の関数よりも短く、簡潔な方法で関数を定義できます。

const add = (a, b) => {
  return a + b;
};

// 上記の関数を短縮したバージョン
const add = (a, b) => a + b;

アロー関数は、関数の引数を取る括弧 ()、アロー =>、関数の本体である式または文で構成されます。アロー関数を使用すると、より簡潔で読みやすいコードを記述できます。

引数がない場合でも、アロー関数を使用できます。以下は引数がない場合のアロー関数の例です。

const sayHello = () => {
  console.log("こんにちは！");
};

このようなアロー関数は、コールバック関数や簡単な処理を記述する際に便利です。

class構文

クラスは、ES6から導入されたオブジェクト指向プログラミングの基本的な概念です。Reactコンポーネントもクラスとして定義されます。

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

  sayHello() {
    console.log(`こんにちは、${this.name}さん！`);
  }
}

クラスはオブジェクト指向の原則に従ってオブジェクトを設計し、コードの再利用性を向上させるために役立ちます。Reactでは、コンポーネントをクラスとして定義し、コンポーネントの状態やライフサイクルを管理します。

スプレッド構文

スプレッド構文は、配列やオブジェクトの展開と結合に使用されます。これにより、データの操作が簡単に行えます。

配列の展開

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

オブジェクトの展開

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

スプレッド構文を使用すると、新しい配列やオブジェクトを作成し、既存のデータを結合または変更できます。これは、関数の引数としてオブジェクトを渡す際や、配列をコピーする際に非常に便利です。

分割代入

分割代入は、配列やオブジェクトから要素を抽出して変数に代入する方法です。これにより、データの取り出しと変数の設定が効率的に行えます。

配列の分割代入

const [a, b] = [1, 2];

オブジェクトの分割代入

const { name, age } = { name: "Alice", age: 30 };

分割代入を使用することで、データの構造を簡潔に表現し、コードの可読性を向上させることができます。Reactコンポーネントでpropsを受け取る際にも分割代入はよく利用されているそうです。

function Person(props) {
  const { name, age } = props;
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

importとexport

モジュール化は、大規模なプロジェクトでコードの構造を整理し、コードの再利用性を高めるために不可欠です。JavaScriptでは、import と export キーワードを使用してモジュールを定義し、他のファイルとデータや関数を共有できます。

export

export const PI = 3.1415;

import

import { PI } from "./math";

モジュール化を使用することで、コードの保守性が向上し、複雑なプロジェクトを管理しやすくなります。また、export default を使用することで、モジュール内でデフォルトのエクスポートを行うことも可能です。

// デフォルトのエクスポート
export default function add(a, b) {
  return a + b;
}

// インポート時に名前を自由に付けられる
import myFunction from "./myModule";

まとめ

一部ですがReactを始めるために必要なJavaScriptとES6の基本的な知識をまとめてみました。これらの概念を理解し、実際のReactプロジェクトで活用していきたいと思います。