【React.js理解の第一歩】モダンJavaScript記法をマスターしよう！

このような悩みをお持ちの方に向けて書きました。

React.js を学習し始めると「あれ、なんだか書き方がよく分からない」と感じる場合も多いはず。

確かにReact.js 特有の書き方もある一方で、意外と見落とされがちなのが「モダンJavaScriptの書き方が理解できておらず、React.js 以前の話だった！」というパターンです。

本記事では絶対に知っておきたいモダン JavaScript の書き方を解説します。

【React.js理解の第一歩】モダンJavaScript記法をマスターしよう！

ここからは実際の書き方をご紹介していきます。

とても便利な書き方ばかりなので、ぜひマスターしていきましょう！

テンプレート文字列

以下のように、よく文字列を結合することがあると思います。

char_1 = "I am";
char_2 = "John";
result = char_1 + char_2 + "!"

console.log(result);
// 出力結果: I am John!

これをテンプレート文字列で表すと、以下のようになります。

char_1 = "I am";
char_2 = "John";

console.log(`${char_1}${char_2}!`);
// 出力結果: I am John!

文字列全体を囲うのはバッククオート（`）であることに注意してください。

Python の f-strings と同じようなものです。

数値セパレータ

数値の桁を読みやすくするため、アンダースコア（_）で繋げる記法です。

const some_number = 123_456_789;
console.log(some_number);
// 出力結果: 123456789

あくまで「読みやすくするため」のものなので、出力結果にアンダースコアは表示されません。

アンダースコアが2回連続で入力されたり、アンダースコア以外の記号が入ると数値セパレータと見なされません。

Optional Chaining 演算子

オブジェクトのnull判定する場合、?.という記法が使えます。

const word = null;
console.log(word?.length);

?をつけないとType Errorが出てしまいますが、?をつけることでundefinedが出力されます。

また??をつけることで空値の場合に初期値とすることもできます。

const word = null;
console.log(word ?? "文字はfalsyです");
// 出力結果: 文字はfalsyです

こちらもコードがすっきり書けるので、非常に便利な演算子です。

アロー関数

(arg, ...) => {statement}のような形で関数を表現できます。

従来のfunctionを使った方法と比較してみましょう。

// function を使った方法
function say_hello(name){
    console.log(`Hello, ${name}!`);
}

// アロー関数を使った方法
const say_hello(name) => {
    console.log(`Hello, ${name}!`);
}

また、関数の中身が一文の場合には{}を省略できます。

const say_hello(name) => console.log(`Hello, ${name}!`);