それでは早速本題に入ります。

今回紹介する機能は以下のようになります。

■String.prototype.replaceAll
■Nullish Coalescing Operator
　・OR演算子( || )との違い
■Logical Assignment Operators
　・??= 演算子
　・||= 演算子
　・&&= 演算子
■Optional Chaining

String.prototype.replaceAll

ES2021から追加されたreplaceAllメソッドです。

どういったものなのか簡単に説明すると、文字列内で指定した文字をすべて置換できるメソッドです。

簡単なコードで表すとこんな感じになります。

console.log("生魚、生肉、生ビール".replaceAll("生", "焼き")); // 焼き魚、焼き肉、焼きビール

ここでは、「生」という文字列が全て「焼き」に置換されています。

使い方としては、「文字列.replaceAll("置換前の文字列", "置換後の文字列")」という風に使います。

しかしJavaScriptにはすでに似たような名前のreplaceというメソッドがありますよね。

そのreplaceメソッドとの違いを軽く説明します。

console.log("aaa".replace("a", "b")); // baa
console.log("aaa".replaceAll("a", "b")); // bbb

replaceでは1文字目の"a"だけを"b"に置換していますが、

replaceAllでは全ての"a"という文字を"b"に置換しています。これがreplaceとreplaceAllの主な違いです。

replaceAllメソッドが出る以前は「"aaa".replace(/a/g, "b");」というように/gを書き足して置換する必要がありましたが、replaceAllメソッドが追加されたことでその必要がなくなりました。

このメソッドについてさらに詳しく知りたいという方は、こちらの記事をご覧ください！

Nullish Coalescing Operator

次はES2020から追加されたNull合体演算子というものです。

これを使うと今まで複雑に書いていたコードを一気に短くできるかもしれません。

そういった意味でもよく使われそうな技術なのでぜひとも押さえておきましょう。

説明をMDNから引用すると、

「Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します」

とのことです。

言葉だけではわかりにくい部分もあるのでコードを見ていきましょう。

let hoge = null;
let foo = hoge ?? 1;
console.log(foo); // 1

この場合、左辺のhogeの中身がnullなので、fooに右辺の1が代入されました。hogeの中身がnull, undefined以外の場合はfooの中身にはhogeが代入されます。

let hoge = "Hello";
let foo = hoge ?? 1;
console.log(foo); // Hello

見ての通り、hogeには"Hello"という文字列が代入されていたため、fooにhogeが代入され、"Hello"と出力されています。

OR演算子( || )との違い

そしてこのNull合体演算子に似ているのがOR演算子( || )です。

ただ全く同じ機能というわけではもちろんありません。

コードを見ていきましょう。

let hoge = 0;
let foo = hoge ?? 1;
console.log(foo); // 0

let hoge2 = 0;
let foo2 = hoge2 || 1;
console.log(hoge2); // 1

Null合体演算子(??)を使うとhogeに０が代入されているのに対し、OR演算子(||)では１が代入されています。

Null合体演算子(??)は左辺がnull, undefinedの時に右辺を代入するというルールに対し、

OR演算子(||)は左辺が偽値（falsy）の時、右辺を代入するといったルールになっています。

よって偽値である0は代入されず、foo2の中にhoge2、つまり1が代入されたということになります。

nullとundefinedも偽値であるがゆえにややこしくなっていたんですね。

この違いをしっかりと把握しておきましょう。

補足として、偽値は以下の通りです。

・false

・0

・-0

・0n

・""

・null

・undefined

・NaN

Logical Assignment Operators

次はES2021から追加のLogical assignment operatorsです。

名前を見る限り何やら難しそうですが、Null合体演算子を理解していれば非常に簡単です。

一つずつ見ていきましょう。

??= 演算子

簡単に説明すると、左辺の中身がnullまたはundefinedの場合にのみ、右辺の値を代入するといったものです。

let hoge = null;
hoge ??= 1
console.log(hoge); // 1

この場合、左辺のhogeの中身がnullなので、この演算子を使うと右辺の1を代入することができます。

||= 演算子

こちらは、左辺の中身が偽値（falsy）の場合にのみ、右辺の値を代入するといったものになります。

let hoge = false;
hoge ||= 1
console.log(hoge); // 1

この場合、左辺のhogeの中身が偽値のfalseなので右辺の1が代入されました。

&&= 演算子

こちらは、左辺の中身が真値（truthy）の場合にのみ、右辺の値を代入するといったものになります。「||=演算子」のtrueバージョンですね。

let hoge = true;
hoge &&= 1
console.log(hoge); // 1

左辺のhogeの中身がtrueなので右辺の1が代入されました。

ちなみに真値とは先ほど紹介した偽値以外のすべての値を指します。

Optional Chaining

最後はES2020から追加されたオプショナルチェーン演算子というものです。

MDNの説明を参照すると、

「オプショナルチェーン(optional chaining)演算子(?.)は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照に正しいかどうかを明示的に確認せずに読み込むことを可能にします」

とあります。

こちらもまずはコードを見ていきましょう。

const userData = {
　　name: "Taro",
　　age: 24,
};
console.log(userData.address.country);　//　エラー

userDataというオブジェクト内に任意入力（Optionalな値）のaddressというプロパティがあったとします。また、そのプロパティの中にもcountryというプロパティがあるとします。

このコードではそのuserData.address.countryにアクセスしようとしていますが、userData.addressがundefinedであるためアクセスできずにエラーが発生し、そこで処理が止まっているという状況です。

ここでオプショナルチェーンを使うと以下のようになります。

const userData = {
　　name: "Taro",
　　age: 24,
};
console.log(userData.address?.country); // undefined

このようにオプショナルチェーン(?.)を書き足すことでエラーではなく、undefinedが返ってきているため、この後も処理が続行されることになります。

この機能は、ほかにも関数の参照や、HTMLのidを参照する際にも使えます。

最後に

タイトルの通り初心者でも使えそうなJavaScrptの新機能を4つ紹介しましたが、

あくまでも初歩的な部分しか解説していないので、興味のある方はぜひいろいろと調べてみてください！

使い方によっては非常に高度なこともできそうですね。

ロジカルスタジオではフロントエンジニア、バックエンドエンジニアを募集しています。

特にフロントエンドではJavaScriptを使う機会が多いので、今回紹介した機能もきっと役に立つことでしょう！

ご興味のある方は是非ご応募ください！