超簡単に効率アップ！初心者でも使える便利なJavaScript新機能

はじめまして！

10月からアルバイトとして入社しました「みつを」と申します！

アルバイト

みつを

JavaScriptなどのトレンド傾向にある言語ってどんどん新しい機能が追加されていきますよね。

アルバイト

みつを

しかしプログラミングを始めたばかりだと、そんな便利で新しい機能を知らないまま、古い記事や参考書を頼りに独学を進めてしまうなんてことがたくさんあるかと思います。（僕もそうです。。。）

アルバイト

みつを

このブログでは、そんな初心者でも使えそうなJavaScriptの新しい機能をいくつかピックアップし、それらの初歩的な部分を解説していきたいと思います。

アルバイト

みつを

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メソッドが追加されたことでその必要がなくなりました。

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

JavaScriptのString.prototype.replaceAllについて

Nullish Coalescing Operator

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

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

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

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

とのことです。

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

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も偽値であるがゆえにややこしくなっていたんですね。

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

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

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の説明を参照すると、

とあります。

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

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を使う機会が多いので、今回紹介した機能もきっと役に立つことでしょう！

ご興味のある方は是非採用サイトからご応募ください！