索引:記号とキーワード
JavaScriptやTypeScriptのコードには?.のような記号やasのようなキーワードが使われます。こういった記号やキーワードはGoogleで検索しづらく、意味を調べるのは難しいものです。
この索引は、JavaScriptとTypeScriptの記号やキーワードから、その名前や意味を調べられるようにするためのものです。コードを読んでいて未知の記号やキーワードに出くわしたら、その意味や使い方を調べる手がかりにしてください。
ここで扱う記号とキーワードには、JavaScript由来のもの、つまり、JavaScriptとTypeScriptに共通して使えるものと、TypeScriptでのみ使えるものを併記しています。JavaScript由来のものには
のマークを、TypeScript固有のものには
マークを表示しています。

記号とキーワード

! 論理否定演算子 (logical not operator)

真値と偽値を反転します。

! 非Nullアサーション (non-null assertion operator)

値がnullやundefinedでないことを宣言し、 コンパイラーに値を非Nullとして解釈させます。
1
function firstChar(text: string | undefined) {
2
// コンパイルエラーにならない
3
return text!.charAt(0);
4
}
Copied!

! Definite Assignment Assertion演算子

クラスのプロパティが型アノテーションで示された型でセットされていることをコンパイラーに伝える記号です。
1
class Example {
2
public foo!: number;
3
}
Copied!
または、変数の値が型アノテーションで示された型でセットされていることをコンパイラーに伝える記号です。
1
let numbers!: number[];
Copied!

!! Double Bang

double bangはJavaScriptで定義されている演算子ではなく、論理否定演算子を2つ連続したイディオムです。値がtruthyかを求めるときに使われます。

!= 不等価演算子 (inequality operator)

左の値と右の値が異なるか判定します。型が異なる場合は型変換されて比較されます。
1
"1" != 1; // false
Copied!

!== 厳密不等価演算子 (strict inequality operator)

型を含めて左の値と右の値が異なるか判定します。
1
1 !== 2; // true
Copied!

" 文字列リテラル (string literal)

"foo"のように文字列リテラルの開始と終了に使われる記号です。

# プライベートプロパティ (private property)

クラスのプロパティのうち#で始まるプロパティはプライベートになります。
1
class ExampleClass {
2
#privateField;
3
#privateMethod() {}
4
static #PRIVATE_STATIC_FIELD;
5
static #privateStaticMethod() {}
6
}
Copied!

$ ドル変数 (dollar variable)

慣習的にjQueryなどのライブラリで変数として使われることがあります。変数名として$が使われる場合は、JavaScriptとしては変数以上の特別な意味はありません。

$ 文字列中の変数展開

テンプレートリテラル内で変数を展開するときに用いられる記号です。
1
const name = "John";
2
console.log(`Hi, ${name}.`); // "Hi, John."
Copied!

% 剰余演算子 (reminder operator)

左の値を右の値で割った余りを計算します。
1
12 % 5; // 2
Copied!

%= 剰余代入 (reminder assignment)

左の変数の値に右の値で割り算した余りを左の変数に割り当てます。

& ビット論理積 (bitwise and)

左の値と右の値で共にビットが1である位置のビットを1に します。
1
const a = 1; // 00000001
2
const b = 5; // 00000101
3
console.log(a & b); // 00000001
4
// 出力: 1
Copied!

& インターセクション型

複数の型を組み合わせたインターセクション型を定義する。
1
interface Swordsman {
2
sword: string;
3
}
4
interface Wizard {
5
magic: string;
6
}
7
type MagicalSwordsman = Swordsman & Wizard;
Copied!

&= ビット論理積代入 (bitwise and assignment)

左の変数の値と右の値で共にビットが1である位置のビットを1にした結果を左の変数に割り当てます。
1
let a = 1; // 00000001
2
const b = 5; // 00000101
3
a &= b;
4
console.log(a); // 00000001
5
// 出力: 1
Copied!

&& 論理積 (logical and)

すべての真偽値が true のときに true を返します。そうでない場合に false を返します。

&&= 論理積代入 (logical and assignment)

左の変数の真偽値と右の真偽値の論理積の結果を左の変数に割り当てます。
1
let a = true;
2
let b = false;
3
a &&= b;
4
console.log(a); // false
Copied!

' 文字列リテラル (string literal)

'foo'のように文字列リテラルの開始と終了に使われる記号です。

() 即時実行関数の一部

定義されるとすぐ実行される即時実行関数式(IIFF; Immediately Invoked Function Expression)の一部に用いられる書き方です。即時実行関数式そのものがデザインパターンで、その一部である()は関数呼び出しのカッコであり、JavaScriptの特別な演算子や構文というわけではありません。即時実行関数式は即時関数と呼ばれることがあります。
1
(function () { /* 何らかの処理 */ }());
2
// ^^
3
(function () { /* 何らかの処理 */ })();
4
// ^^
5
(() => { /* 何らかの処理*/ })();
6
// ^^
Copied!

* 乗算演算子 (multiplication operator)

左の値と右の値を掛け算します。

* ジェネレーター関数の宣言

Generatorオブジェクトを返すジェネレーター関数を宣言するときに用いられる記号です。
1
function* numberGenerator() {
2
yield 1;
3
yield 2;
4
yield 2;
5
}
Copied!

* yield*式

別のジェネレーターに移譲する式を書くときに用いられる記号です。
1
function* func1() {
2
yield 123;
3
}
4
5
function* func2() {
6
yield* func1();
7
// ^ここ
8
}
Copied!

*= 乗算代入 (multiplication assignment)

左の変数の値と右の値を掛け算した結果を左の変数に割り当てます。

** べき乗演算子 (exponentiation)

左の値を右の値でべき乗します。
1
2 ** 3; // 8
Copied!

**= べき乗代入 (exponentiation assignment)

左の変数の値を右の値でべき乗した結果を左の変数に割り当てます。

+ 単項正値演算子

Number型に変換します。
1
+"1"; // 1
Copied!

+ 加算演算子 (addition operator)

2つの値を足し算します。

+ 文字列結合演算子

2つの文字列を結合します。

+ 修飾子の付加

readonly?などの修飾子を追加する。
何も指定しない場合は暗黙的に+が付与されるので +を実際に利用する機会はおそらくありません。
1
type MyPartial<T> = {
2
[k in keyof T]+?: T[k];
3
};
4
5
type MyReadonly<T> = {
6
+readonly [k in keyof T]: T[k];
7
};
Copied!

+= 加算代入 (addition assignment)

左の変数の値とに右の値を足し算した結果を左の変数に割り当てます。

++ インクリメント (increment)

変数に1を足す演算子です。
1
let x = 3;
2
x++;
3
console.log(x); // 4
Copied!

, 関数引数の区切り

複数の引数を関数に与えたり、複数の引数を受け取る関数宣言に用いる記号です。
1
function plus(x, y, z) {
2
return x + y + z;
3
}
4
plus(1, 2, 3);
Copied!

, 配列要素の区切り

複数の要素を持つ配列を宣言するときに用いる記号です。
1
const numbers = [1, 2, 3];
Copied!

, オブジェクトプロパティの区切り

複数のプロパティを持つオブジェクトを宣言するときに用いる記号です。
1
const data = {
2
property1: 1,
3
property2: true,
4
property3: "hello",
5
};
Copied!

, タプル型の要素の区切り

複数の要素を持つタプル型を宣言するときに用いる記号です。
1
type Tuple = [number, string, boolean];
Copied!

, カンマ演算子 (comma operator)

左から右に式を評価をして、一番右の評価した値を返します。
1
let x = -1
2
const a = x++, x++, x > 0
3
console.log(a) // true
Copied!

- 単項負値演算子

正負を反転してNumber型に変換します。
1
-"1"; // -1
Copied!

- 減算演算子 (subtraction operator)

2つの値を引き算します。

- 修飾子の削除

readonly?などの修飾子を削除します。
1
type MyRequired<T> = {
2
[k in keyof T]-?: T[k];
3
};
4
5
type Writable<T> = {
6
-readonly [k in keyof T]: T[k];
7
};
Copied!

-= 減算代入 (subtraction assignment)

左の変数の値から右の値を引き算した結果を左の変数に割り当てます。

-- デクリメント (decrement)

変数に1を引き算する演算子です。
1
let x = 3;
2
x--;
3
console.log(x); // 2
Copied!

. プロパティへのアクセス

オブジェクトのプロパティにアクセスするときに用いる記号です。
1
const object = { property: 123 };
2
object.property; // 123
Copied!

... スプレッド構文 (spread syntax)

配列などの反復可能オブジェクトを関数の引数にする構文です。
1
function sum(x, y, z) {
2
return x + y + z;
3
}
4
const numbers = [1, 2, 3];
5
console.log(sum(...numbers)); // 6
Copied!
または、配列などの反復可能オブジェクトを配列要素に展開する構文です。
1
const numbers = [1, 2, 3];
2
const newNumbers = [0, ...numbers, 4];
3
console.log(newNumbers); // [ 0, 1, 2, 3, 4 ]
Copied!
または、オブジェクトのプロパティを展開する構文です。
1
const object = { x: 1, y: 2 };
2
const newObject = { ...object, z: 3 };
3
console.log(newObject); // { x: 1, y: 2, z: 3 }
Copied!

... 残余構文 (rest syntax)

関数の残りの引数をひとつの配列として受け取るのに用いられる構文です。
1
function func(a, b, ...rest) {
2
return rest;
3
}
4
console.log(func(1, 2, 3, 4, 5)); // [ 3, 4, 5 ]
Copied!
または、配列などの反復可能オブジェクトの残りの要素を取り出す構文です。
1
const numbers = [1, 2, 3, 4, 5];
2
const [first, second, ...rest] = numbers;
3
console.log(rest); // [ 3, 4, 5 ]
Copied!
または、オブジェクトの残りのプロパティを取り出す構文です。
1
const object = { a: 1, b: 2, c: 3, d: 4 };
2
const { a, b, ...rest } = object;
3
console.log(rest); // { c: 3, d: 4 }
Copied!

/ 除算演算子 (division operator)

左の値を右の値で割り算します。

/ 正規表現リテラル (regular expression literal)

/[0-9]+/のような正規表現リテラルの前後に書かれる記号です。

/= 除算代入 (division assignment)

左の変数の値を右の値で割り算した結果を左の変数に割り当てます。

// 一行コメント (one line comment)

行コメントの開始を表す記号です。

/* 複数行コメント (multiline comment)

複数行コメントの開始を表す記号です。
1
/*
2
コメント
3
*/
Copied!

/** JSDoc

慣習的にJSDocなどのドキュメンテーションコメントの開始を表す記号です。これはJavaScriptやTypeScriptの構文ではなく、複数行コメントを用いたドキュメンテーションに慣習的に用いられるものです。

: オブジェクトの一部

オブジェクトプロパティのキーと値の対関係を表すのに用いられる記号です。
1
const object = { a: 1, b: 2, c: 3, d: 4 };
Copied!

: 三項演算子の一部

a ? b : cのような三項演算子のelseを表すのに用いられる記号です。

: 型アノテーション

変数の型アノテーションに用いられる記号です。
1
const variable: number = 20;
Copied!
または、関数の引数や戻り値の型アノテーションに用いられる記号です。
1
function numberToString(x: number): string {
2
return x.toString();
3
}
Copied!

< 小なり演算子 (less than operator)

左の値が右の値よりも小さいか判定します。

< ジェネリクス

ジェネリクスの型引数の開始に用いられる記号です。
1
function func1<T>(x: T) { /*...*/ }
2
const result = func<string>("hello");
Copied!

< JSX

JSXと呼ばれるXMLリテラルの開始に現れる記号です。
Hello.tsx
1
function Hello() {
2
return <div>HELLO</div>;
3
}
Copied!

< 型アサーション

型アサーションに用いられる記号です。asの別の書き方です。
1
let someValue: unknown = "this is a string";
2
let strLength: number = (<string>someValue).length;
Copied!

<= 小なりイコール演算子 (less than or equal)

左の値が右の値以下か判定します。

<< ビット左シフト演算子 (left shift operator)

左の値のビットを右の値の数だけ左にずらします。
1
const a = 1; // 00000001
2
const b = 3;
3
console.log(a << b); // 00001000
4
// 出力: 8
Copied!

<<= 左シフト代入

左の変数の値のビットを右の値の数だけ左にずらした結果を左の変数に割り当てます。
1
let a = 1; // 00000001
2
const b = 3;
3
a <<= b;
4
console.log(a); // 00001000
5
// 出力: 8
Copied!

= 代入演算子

左の変数に右の値を割り当てます。

== 等価演算子

左の値と右の値が等しいか判定します。型が異なる場合は型変換されて比較されます。
1
"1" == 1; // true
Copied!

=== 厳密等価演算子

型を含めて左の値と右の値が等しいか判定します。
1
"1" === 1; // false
Copied!

=> アロー関数の一部

アロー関数の引数と関数ボディーの間に書かれる記号です。
1
const increment = (num) => num + 1;
2
// ^^^ 引数
3
// ^^^^^^^ 関数ボディ
Copied!

> 大なり演算子

左の値が右の値よりも大きいか判定します。

>= 大なりイコール演算子

左の値が右の値以上か判定します。

>> ビット右シフト演算子

左の値のビットを右の値の数だけ右にずらします。
1
const a = 8; // 00001000
2
const b = 3;
3
console.log(a >> b); // 00000001
4
// 出力: 1
Copied!

>>= 右シフト代入

左の変数の値のビットを右の値の数だけ右にずらした結果を左の変数に割り当てます。

>>> 符号なし右シフト演算子

左の値のビットを右の値の数だけ右にずらします。左に入る符号ビットは常に0になります。
1
const a = -2; // 11111111111111111111111111111110
2
const b = 3;
3
console.log(a >>> b); // 00011111111111111111111111111111
4
// 出力: 536870911
Copied!

>>>= 符号なし右シフト代入

左の変数の値のビットを右の値の数だけ右にずらした結果を左の変数に割り当てます。左に入る符号ビットは常に 0 になります。

? 三項演算子の一部

三項演算子a ? b : cの一部で、条件式の終わりに置かれる記号です。

? オプション修飾子

オブジェクトのプロパティを任意プロパティとして定義します。
1
interface User {
2
name: string; // name は必須
3
age?: number; // age は任意
4
}
5
const user: User = { name: "taro" };
Copied!
または、関数の引数を必須ではなくします。
1
function func(x?: number) {}
2
func(); // xがなくてもOK
Copied!

?. オプショナルチェーン

プロパティのアクセス元が null または undefined のときにエラーを発生させずに undefined を返します。
1
const user = null;
2
console.log(user.name); // Cannot read property 'name' of null
3
console.log(user?.name); // undefined
Copied!

?? Null合体

左の値が null または undefined のときに右の値を返します。そうでない場合は左の値を返します。
1
console.log(undefined ?? 1); // 1
2
console.log(2 ?? 1); // 2
Copied!

??= Null合体代入

左の変数の値が null または undefined の場合のみ右の値を左の変数に割り当てます。
1
const user1 = { name: undefined };
2
user1.name ??= "taro";
3
console.log(user1.name); // taro
4
5
const user2 = { name: "kaori" };
6
user2.name ??= "taro";
7
console.log(user2.name); // kaori
Copied!

@ デコレーター

デコレーターはクラスやクラスメンバーに注釈を追加するもので、デコレーターを使うのに用いられる記号です。

[ 配列リテラル

[1, 2, 3]のような配列リテラルの開始に用いられる記号です。

[ アクセッサー

配列の要素やオブジェクトのプロパティにアクセスするときに用いられる記号です。
1
const numbers = [1, 2, 3];
2
numbers[0]; // 1
3
const object = { a: 1, b: 2 };
4
object["a"]; // 1
Copied!

[ 配列の分割代入

配列などの反復可能オブジェクトの分割代入の開始に用いられる記号です。
1
const numbers = [1, 2, 3];
2
const [first, ...rest] = numbers; // 分割代入
3
console.log(first, rest); // 1 [ 2, 3 ]
4
5
function func([first, ...rest]) { // 分割代入
6
console.log(first, rest);
7
}
8
func([1, 2, 3]); // 1 [ 2, 3 ]
Copied!

[ インデックス型

インデックス型(index signature)の開始に用いられる記号です。
1
type StringKeysAndStringValues = {
2
[key: string] : string;
3
};
Copied!

[] 配列型

配列型を表現するのに用いられる記号です。
1
let names: string[];
2
type FooList = Foo[];
Copied!

\ 文字列エスケープシーケンス

文字列のエスケープシーケンスの開始に用いられる記号です。
1
const lineBreak = "\n";
Copied!

^ ビット排他的論理和

左の値と右の値でビットの値が異なる位置のビットを1にします。
1
const a = 1; // 00000001
2
const b = 5; // 00000101
3
console.log(a ^ b); // 00000100
4
// 出力: 4
Copied!

^= ビット排他的論理和代入

左の変数の値と右の値でビットの値が異なる位置のビットを1にした結果を左の変数に割り当てます。

_ 数値の区切り文字

数値の可読性のために、桁区切りとして用いられる記号です。
1
const hyakuman = 1_000_000;
Copied!

_ アンダースコア変数

慣習的にlodashなどのライブラリで変数として使われることがあります。変数名として_が使われる場合は、JavaScriptとしては変数以上の特別な意味はありません。
また、慣習的に使わない変数の受け取り先に使われることがあります。たとえば、2つの引数を受け取るコールバック関数で、第2引数だけを使う場合、第1引数をアンダースコアにする書き方をするコードが中にはあります。
1
[1, 2, 3].map((_, index) => {
2
// _ は 1, 2, 3のような要素値。それを使わないという意味で _ にしている
3
});
Copied!

````` テンプレートリテラル

テンプレートリテラル(テンプレート文字列)の前後に置かれる記号です。
1
`string text`;
Copied!

{ ブロック文

if文やfor文などの構文に付随して使われる記号です。
1
if (isOK) {
2
// ...
3
} else {
4
// ...
5
}
Copied!
if文やfor文などの構文を伴わないブロック文は、単に変数のスコープを分けることを目的にしていることがあります。
1
{
2
const value = 1;
3
}
4
{
5
const value = 2; // 上と同じ変数名で初期化しているが、スコープが別になるためエラーにならない。
6
}
Copied!

{ オブジェクトの分割代入

オブジェクトの分割代入に用いられる記号です。
1
const object = { a: 1, b: 2, c: 3, d: 4 };
2
const { a, b, ...rest } = object; // 分割代入
3
console.log(a, b, rest); // 1 2 { c: 3, d: 4 }
4
5
function func({ a, b, ...rest }) { // 分割代入
6
console.log(a, b, rest);
7
}
8
func(object); // 1 2 { c: 3, d: 4 }
Copied!

| ビット論理和

左の値と右の値でどちらのビットが1である位置のビットを1に します。
1
const a = 0b010;
2
const b = 0b101;
3
console.log((a | b) === 0b111); // true
Copied!

| ユニオン型

複数の型を組み合わせたユニオン型を定義する。
1
type ID = string | number;
2
const id1 = "e29b41"; // OK
3
const id2 = 100; // OK
4
const id3 = true; // ERROR
Copied!

|= ビット論理和代入

左の変数の値と右の値でどちらかがのビットが1である位置のビットを1にした結果を左の変数に割り当てます。

|| 論理和

ひとつでも真偽値が true のときに true を返します。そうでない場合に false を返します。

||= 論理和代入

左の変数の真偽値と右の真偽値の論理和の結果を左の変数に割り当てます。

~ ビット否定演算子

ビットを反転します。
1
const a = 1; // 00000001
2
console.log(~a); // 11111110
3
// 出力: -2
Copied!

~~ Double Tilde

ビット否定演算子を2つ重ねたもので、小数点以下を消し去る計算をするイディオムです。JavaScriptにこういう演算子があるわけではなく慣習的なものです。double tildeの計算結果は、正の数についてはMath.floorと同じに、負の数はMath.ceilと同じになります。
1
~~1.5; // 1
2
Math.floor(1.5); // 1
3
Math.ceil(1.5); // 2
4
5
~~(-1.5); // -1
6
Math.floor(-1.5); // -