2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

オプショナルチェーン

Posted at

オプショナルチェイニング演算子とは

Optional Chainingとは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。

A?.B
// AがnullかundefinedでないときBを返す

ちなみに、if文に書き換えられそうですがそうではないです。

const adventurer = {
  name: 'アリス',
  cat: {
    name: 'ねこ'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// 結果:undefined

const dogName = adventurer.dog?."aaa";
console.log(dogName);
// 結果:Error: Unexpected string

つまり、dogがundefindであれば、後ろのには繋がらないのでError: Unexpected stringが返却される

A?.BのAがnullの時でもundefindに変換する

const A = null;
console.log(A?.B);

結果

undefind

nullとundefindの

ざっくり

undefined は変数を宣言し、値を代入する前の状態 (メモリは確保したが、値は未確定)
null は NULL というシンボル (0 が割り当てられている)

詳しく

undefinedとnullは大きなくくりで「値がない」ことを意味する点は共通しています。意味的な違いがあるとしたら、undefinedは「値が代入されていないため、値がない」、nullは「代入すべき値が存在しないため、値がない」という微妙な違いです。

とういいつしておけばメリット

参考

使い分け意識を育てる労力は、それに見合うメリットが少ない
2種類を使い分けるとなると、コードの各所でどちらを使うべきかの意思決定が必要になります。意思決定は個人作業ならまだしも、チームワークとなるとハードルが上がってきます。チームで「こういう場合はundefinedを使うべき」「こういうときはnullを使う」といったルールと具体例を共通認識として持つ必要がでてきます。共通認識が確立されていないと、コーディング中に質問が出てきたり、コードレビューで指摘されて手直しが発生したりと、あまり本質的でないところで開発が一時停止していまいがちです。使い分けをするために、ルール策定や意識のすり合わせすることは不可能ではありませんが、その労力に見合うほど、undefinedとnullを使い分けるメリットは大したものではないというが実際のところです。

一方で、「nullは使わずundefinedに統一しよう」はシンプルなルールです。これなら共通認識として持つことがしやすく、チームワークもしやすくなります。実際にTypeScriptの開発チームでは「nullは使わない」というたった1行のシンプルなガイドラインを示し、数多くの開発者が参加しやすくなるようにしています。

基本的にチーム開発では統一した方が良さそう。

「値がない」ことを意味するものがundefinedとnullの2種類あることが混乱の元なので、どちらか一方を使うようにするほうがコーディング上の意思決定を減らせます。なので、nullに寄せていく方法も考えられます。しかし、それはお勧めしません。undefinedはいたるところで自然に発生してくるので、それらをすべてnullにしようとすると、記述量がどんどん増えていくからです。

変数宣言で初期値をnullにする程度なら簡単ですが、存在しないオブジェクトプロパティや配列要素にアクセスしたときにもnullを返すようにするところまでやろうとすると難しくなってきます。したがって、統一するとしたらundefinedに寄せるほうが現実的です。

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?