ReactとTypeScriptを学び始めるとさまざまな記号が出てくるので、「これはTS？それともReactだったかな...🤔」と、初心者にとって判別が難しくなりがちです。
一見似ている記号でも値を操作するためのものと型を設計するためのものがあり、それぞれの記号の意味と使い方をざっくり分類してまとめました。
JavaScriptでよく使う記号 （値に関する記号）
&&（AND演算子）
左の値がtrueだった場合だけ、右の値（または処理）を実行する
主に「条件付きで何かを表示したい」ときに使う
JavaScriptの標準的な論理演算子の一つ
const isLoggedIn = true;
function AndExample() {
return (
<div>
{isLoggedIn && <p>マイページへ移動</p>}
</div>
)
}
||（OR演算子）
左の値がfalseだった場合右の値を使う
デフォルト値を設定するときによく使われる
また、複数の値の中から最初にtruthyな（有効な）値を取り出す場面にも使われる
const username = "";
const displayName = username || "ゲスト";
console.log(displayName); // "ゲスト"
? :（三項演算子）
ある条件を満たすかどうかで、2つの選択肢からどちらか一方を選んで使う
if-elseを1行で簡潔に表現できる
function getMessage(isMorning: boolean): string {
return isMorning ? "おはよう" : "こんにちは";
} //isMorningがtrueならおはよう、falseならこんにちはを返す
- ? の前が 条件
- ? の右が trueのときの値
- : の右が falseのときの値
一行でシンプルに条件分岐をしたいときに使う
?.（オプショナルチェーン）
オブジェクトや変数が存在する場合だけ、その中のプロパティに安全にアクセスできる
存在しなければエラーを出さずにundefinedを返す
const user: { name?: string } | undefined = undefined;
console.log(user?.name); // undefined（エラーにならない）
- オブジェクトの中のプロパティにアクセスする
- オブジェクトが存在しない可能性があるとき安全に動かすため
- なければundefinedを返して、そこで止まりエラーを防ぐ
??（null合体演算子）
左の値がnullまたはundefinedのときだけ、右の値を使う
falseや0はそのまま左の値を使う点で||とは違う
const name = null ?? "ゲスト";
console.log(name); // "ゲスト"
const count = 0 ?? 5;
console.log(count); // 0
!（否定演算子）
真偽値を反転させる
trueをfalseに、falseをtrueにする
const isLoggedIn = false;
console.log(!isLoggedIn); // true
...（スプレッド構文）
オブジェクトや配列を展開する
新しいオブジェクトや配列を作るときに便利
const user = { name: "たろう", age: 20 };
const newUser = { ...user, isAdmin: true };
console.log(newUser);
// { name: "たろう", age: 20, isAdmin: true }
TypeScriptでよく使う記号 （型に関する記号）
?（オプショナルプロパティ）
オブジェクトのプロパティが「存在してもよいし、存在しなくてもよい」と定義できる
外部データなど、値が必ずあるとは限らない場面で重要になる
type OptionalUser = {
name?: string;
};
const optionalUser: OptionalUser = {};
console.log(optionalUser.name); // undefined
|（シングルバー、ユニオン型）
複数の型のうち、どれか一つに当てはまればOKとする
TypeScriptではこれをユニオン型（Union型）と呼ぶ
type Id = string | number;
const id1: Id = "abc";
const id2: Id = 123;
&（アンパサンド、交差型）
複数の型を合成して、両方の条件を同時に満たす新しい型を作る
TypeScriptではこれを交差型（Intersection型）と呼ぶ
type User = { name: string };
type Admin = { isAdmin: boolean };
type AdminUser = User & Admin;
const adminUser: AdminUser = {
name: "たろう",
isAdmin: true,
};
extends（型の継承）
ある型をもとに別の型を拡張する
共通の性質を引き継ぎながら、新しい型を作れる
type Animal = { name: string };
type Dog = Animal & { breed: string };
as（型アサーション）
値が特定の型だと明示する
TypeScriptに「これはこの型だ」と教えるために使う
const value: unknown = "hello";
const strLength = (value as string).length;
keyof（型のキーを列挙）
オブジェクト型のプロパティ名だけを取り出す型を作る
type User = { name: string; age: number };
type UserKeys = keyof User; // "name" | "age"
in（Mapped Typesで使う）
型のプロパティをループで処理して新しい型を作る
type User = { name: string; age: number };
type ReadonlyUser = {
readonly [K in keyof User]: User[K];
};
まとめ
-
&&,||,? :,?.,??,!,...は 値（JavaScriptで動くもの） に関する記号 -
?,|,&,extends,as,keyof,inは 型（TypeScriptで設計するもの） に関する記号
以上、JavaScriptとTypeScriptで使う記号の意味と具体例まとめでした。
他にもこれから出会うことがある記号や型があれば、追記していきます