JavaScriptやTypeScriptで出てくる記述の意味や名称など

初めてES2015のJavaScriptやTypeScriptのコードを読んだときに「この記述の意味と読み方はなんだ?」と思ったことが多かったのでまとめました。

??(Null合体演算子

クエスチョン(はてなマーク)が2つ続いたやつ。名称はNull合体演算子

ES2020から追加されました。

左辺がnullかundefinedの場合は右の値を返してそれ以外の場合は左の値を返します。

let val = null;
console.log(val ?? '値はnullです') // 値はnullです

val = 'test';
console.log(val ?? '値はnullです') // test

?.(オプショナルチェイニング)

?(はてなマーク)と.(ドット)が続いたやつ。名称はオプショナルチェイニング(オプショナルチェー)。

ES2020から追加されました。

オブジェクトで中間のプロパティがなくてもエラーではなくundefinedで返してくれます。

オプショナルチェーンを使用しない場合(エラーになる)

const student = {
    name: 'Taro',
}

console.log(student.name) // Taro
console.log(student.age) // undefined
console.log(student.club.name) // Cannot read properties of undefined (reading 'name') 

オプショナルチェーンを使用する場合(undefinedを返しエラーにならない)

const student = {
    name: 'Taro',
}

console.log(student.name) // Taro
console.log(student.age) // undefined
console.log(student.club?.name) // undefined

…(スプレッド構文)

.(ドット)が3つ続いたやつ。名称はスプレッド構文

ES2015から追加されました。

配列やオブジェクトを展開してくれます。

// 配列を展開
const array1 = [1, 2, 3]
console.log(...array1) // 1, 2, 3

// 配列のコピー
const array1 = [1, 2, 3]
const array2 = [...array1]
console.log(array2) // 1, 2, 3

// 配列の結合
const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
const array3 = [...array1, ...array2]
console.log(array3) // 1, 2, 3, 4, 5, 6

// 関数の引数に渡す
const sumValue = (value1, value2) => {
    return value1 + value2
}
const array1 = [5, 10]
console.log(sumValue(...array1)) // 15

?(オプションパラメータ

TypeScriptのinterfaceとかtypeのプロパティについてるはてなマーク。名称はオプションパラメーター

TypeScriptで使用できます。

関数の引数やインターフェースのプロパティを省略可能になります。

オプションパラメータを使用しない場合

interface Student {
    name: string
    age: number
    club: string
}

const student: Student = {
    name: 'taro',
    age: 16,
}
// プロパティ「club」が存在しないためエラーとなる
// Property 'club' is missing in type '{ name: string; age: number; }' but required in type 'Student'.

オプションパラメータを使用する場合

interface Student {
    name: string
    age: number
    club?: string
}

const student: Student = {
    name: 'taro',
    age: 16,
}
// オプションパラメーターを使用することでプロパティ「club」が存在しなくてもエラーにならない

<T>(ジェネリクス)

大なり小なりの記号の中に型があるやつ。名称はジェネリクス(Generics)

配列の型を指定するときや、型を動的に変えたい場合に使用します。

// 配列の型定義
const array: Array<string> = ['Taro', 'Jiro', 'Saburo']
array[4] = 'Goro'
array[5] = 1 // string型の配列にnumber型を入れようとしているのでエラーになる。Type 'number' is not assignable to type 'string'.
// 動的に型を変更
type Test<T> = {
    (val1: T, val2: T): T
}

const test1: Test<string> = (val1, val2) => {
    return val1 + val2
}
console.log(test1('Taro', 'Jiro')) // TaroJiro


const test2: Test<number> = (val1, val2) => {
    return val1 + val2
}
console.log(test2(1, 2)) // 3
const [name, setName] = useState<string>('')
const [age, setAge] = useState<number>(0)

上記だとイメージしづらいと思いますが、ReactのuseStateをイメージするとわかりやすいと思います。

↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです!
にほんブログ村 IT技術ブログへ
にほんブログ村