【クイズでわかる】JavaScriptの「~」って何？~indexOfや~~の役割と仕組みを理解する

→2の「~1 は -2、~-1 は 0 になる」です！

解説 !!

~ は、ビット演算子のひとつで、 ビット反転をするための記号です。
ビット反転というのは、 2進数で見たときに 0 を 1 に、1 を 0 にひっくり返す処理のこと。

…と言われても、ちょっとピンとこないですよね 👀

ここで大事なのは、細かいビットの仕組みよりも結果としてどうなるかを押さえることということです！

JavaScript では、次のような関係になります↓

~n = -(n + 1)

つまり、

~1;   // -2
~-1;  // 0
~5;   // -6

とこのように、元の数とは違う形に変換されるのがポイントです 💡

まずは「チルダを付けると、元の数がそのまま反転するわけではない」 というところを押さえておいてください‎(˵ •̀ ᴗ – ˵) ✧

→ 2の「-1 を 0 に変えて、条件式で扱いやすくできるから」です！

解説 !!

ここが ~indexOf() のいちばん大事なポイントです 👀

まず前提として、indexOf() は見つからなかったときに -1 を返します。

"Hello".indexOf("x"); // -1

そして、第1問で見たとおり…、~-1 は 0 となります。

また、JavaScript では、条件式の中で

• 0 は false
• 0 以外の数値は true

として扱われます。

つまり、

~str.indexOf("Taro")

は、

• 見つからない（-1）→ 0 → false
• 見つかる（0以上）→ -1 や -2 → true

という動きになります。
見つからなかったときだけ false になるのがポイントです 💡

その結果、

if (~str.indexOf("Rei")) {
  console.log("見つかった！");
}

と書くだけで、「含まれているかどうか」を判定できるようになります。

少しトリッキーな書き方ですが、短く書けることから、以前のコードでは使われることもありました。ただ、仕組みを知らないと少し読みづらいため、最近では ~（チルダ） を使った判定はあまり見かけなくなっています。

→ 1の「4 と -4 になる」です！

解説 !!

~~ は、チルダを2回続けて書くことで、値を 32bit 整数に変換するすることができます。

このとき、小数はどうなるかというと…、小数点以下が切り捨てられます。

~~4.9;   // 4
~~-4.9;  // -4

ここで少し注意ポイント 👀

「切り捨て」と聞くと、Math.floor() を思い浮かべるかもしれませんが、実はまったく同じではありません！

Math.floor(-4.9); // -5
~~-4.9; // -4

とこのように、 ~~ は 0 に向かって丸める（小数を削る）動きになります。

なので、どちらかというとMath.floor() ではなく、Math.trunc() に近い挙動になります。

少しテクニカルな書き方ですが、短く書けることから使われることもありました。

ただし、意図が伝わりづらいため、今のコードでは Math.trunc() などを使うのがおすすめです。

→ 1の includes("Taro") です！

解説 !!

現在の JavaScript では、文字列に特定の文字が含まれているかを調べるときは includes() を使うことが多いです。

includes() は、戻り値が true / false ではっきりしているため、条件式としてそのまま使えます。

なので、

const str = "Hello Taro";
if (str.includes("Taro")) {
  console.log("見つかった！");
}

のような書き方で、「含まれているかどうかを判定している」ことがそのままコードに表すことができるのです。

一方、indexOf() を使った書き方自体は間違いではないのですが、

str.indexOf("Taro") !== -1

と書く必要があったり、

~str.indexOf("Taro")

のように ~（チルダ） の仕組みを知らないと「何をしているのか」が少し伝わりにくくなります。

そのため、コードを見たときに意図が伝わりやすい書き方が選ばれることが多く、~（チルダ） を使った判定はあまり見かけなくなっています。