React と TypeScript で判別がしづらい記号をまとめた

ReactとTypeScriptを学び始めるとさまざまな記号が出てくるので、「これはTS？それともReactだったかな...🤔」と、初心者にとって判別が難しくなりがちです。

一見似ている記号でも**値を操作するためのものと型を設計するためのもの**があり、それぞれの記号の意味と使い方をざっくり分類してまとめました。


## JavaScriptでよく使う記号 （値に関する記号）

### `&&`（AND演算子）

左の値がtrueだった場合だけ、右の値（または処理）を実行する
主に「条件付きで何かを表示したい」ときに使う
JavaScriptの標準的な論理演算子の一つ

```tsx
const isLoggedIn = true;

function AndExample() {
  return (
    <div>
      {isLoggedIn && <p>マイページへ移動</p>}
    </div>
  )
}
```

### `||`（OR演算子）

左の値がfalseだった場合右の値を使う
デフォルト値を設定するときによく使われる
また、複数の値の中から最初にtruthyな（有効な）値を取り出す場面にも使われる

```tsx
const username = "";
const displayName = username || "ゲスト";
console.log(displayName); // "ゲスト"
```

### `? :`（三項演算子）

ある条件を満たすかどうかで、2つの選択肢からどちらか一方を選んで使う
if-elseを1行で簡潔に表現できる

```tsx
function getMessage(isMorning: boolean): string {
  return isMorning ? "おはよう" : "こんにちは";
} //isMorningがtrueならおはよう、falseならこんにちはを返す
```

- ? の前が 条件
- ? の右が trueのときの値
- : の右が falseのときの値

一行でシンプルに条件分岐をしたいときに使う

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator

### `?.`（オプショナルチェーン）

オブジェクトや変数が存在する場合だけ、その中のプロパティに安全にアクセスできる
存在しなければエラーを出さずにundefinedを返す

```tsx
const user: { name?: string } | undefined = undefined;
console.log(user?.name); // undefined（エラーにならない）
```

- オブジェクトの中のプロパティにアクセスする
- オブジェクトが存在しない可能性があるとき安全に動かすため
- なければundefinedを返して、そこで止まりエラーを防ぐ

https://typescriptbook.jp/reference/values-types-variables/object/optional-chaining


### `??`（null合体演算子）

左の値がnullまたはundefinedのときだけ、右の値を使う
falseや0はそのまま左の値を使う点で`||`とは違う

```tsx
const name = null ?? "ゲスト";
console.log(name); // "ゲスト"

const count = 0 ?? 5;
console.log(count); // 0
```
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing


### `!`（否定演算子）

真偽値を反転させる
trueをfalseに、falseをtrueにする

```tsx
const isLoggedIn = false;
console.log(!isLoggedIn); // true
```
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_NOT

### `...`（スプレッド構文）

オブジェクトや配列を展開する
新しいオブジェクトや配列を作るときに便利

```tsx
const user = { name: "たろう", age: 20 };
const newUser = { ...user, isAdmin: true };
console.log(newUser);
// { name: "たろう", age: 20, isAdmin: true }
```

## TypeScriptでよく使う記号 （型に関する記号）

### `?`（オプショナルプロパティ）

オブジェクトのプロパティが「存在してもよいし、存在しなくてもよい」と定義できる
外部データなど、値が必ずあるとは限らない場面で重要になる

```tsx
type OptionalUser = {
  name?: string;
};

const optionalUser: OptionalUser = {};
console.log(optionalUser.name); // undefined
```

### `|`（シングルバー、ユニオン型）

複数の型のうち、どれか一つに当てはまればOKとする
TypeScriptではこれをユニオン型（Union型）と呼ぶ

```tsx
type Id = string | number;

const id1: Id = "abc";
const id2: Id = 123;
```

### `&`（アンパサンド、交差型）

複数の型を合成して、両方の条件を同時に満たす新しい型を作る
TypeScriptではこれを交差型（Intersection型）と呼ぶ

```tsx
type User = { name: string };
type Admin = { isAdmin: boolean };

type AdminUser = User & Admin;

const adminUser: AdminUser = {
  name: "たろう",
  isAdmin: true,
};
```
https://zenn.dev/peg/articles/c5fb4ccf0a06b2

### `extends`（型の継承）

ある型をもとに別の型を拡張する
共通の性質を引き継ぎながら、新しい型を作れる

```tsx
type Animal = { name: string };
type Dog = Animal & { breed: string };
```

### `as`（型アサーション）

値が特定の型だと明示する
TypeScriptに「これはこの型だ」と教えるために使う

```tsx
const value: unknown = "hello";
const strLength = (value as string).length;
```
https://typescriptbook.jp/reference/object-oriented/interface/interface-inheritance

### `keyof`（型のキーを列挙）

オブジェクト型のプロパティ名だけを取り出す型を作る

```tsx
type User = { name: string; age: number };
type UserKeys = keyof User; // "name" | "age"
```
https://typescriptbook.jp/tips/generates-type-from-object-key

### `in`（Mapped Typesで使う）

型のプロパティをループで処理して新しい型を作る

```tsx
type User = { name: string; age: number };
type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};
```
https://typescriptbook.jp/reference/type-reuse/mapped-types

## まとめ

- `&&`, `||`, `? :`, `?.`, `??`, `!`, `...` は **値（JavaScriptで動くもの）** に関する記号
- `?`, `|`, `&`, `extends`, `as`, `keyof`, `in` は **型（TypeScriptで設計するもの）** に関する記号

以上、JavaScriptとTypeScriptで使う記号の意味と具体例まとめでした。
他にもこれから出会うことがある記号や型があれば、追記していきます