付録: JavaScriptチートシート

JavaScriptの言語機能に関するチートシートです。

言語機能
ガイド
- プロジェクト構造

言語機能

コメントの書き方について。

コード例	説明	解説
`// xxx`	一行コメント	コメント
`/* xxx */`	複数行コメント	コメント
`<!-- xxx -->`	[ES2015] HTML-likeコメント	コメント

データ構造

変数宣言について。

コード例	説明	解説
`const x`	[ES2015] 変数宣言。`x`に値の再代入はできない	変数と宣言
`let x`	[ES2015] 変数宣言。`const`と似ているが、`x`に値を再代入できる	変数と宣言
`var x`	変数宣言。レガシーな変数宣言方法	変数と宣言

リテラル

データ構造を表現するリテラルについて。

コード例	説明	解説
`true` または `false`	真偽値	データ型とリテラル
`123`	10進数の整数リテラル	データ型とリテラル
`123n`	[ES2020] 巨大な整数を表すBigIntリテラル	データ型とリテラル
`0b10`	[ES2015] 2進数の整数リテラル	データ型とリテラル
`0o777`	[ES2015] 8進数の整数リテラル	データ型とリテラル
`0x30A2`	16進数の整数リテラル	データ型とリテラル
`123_456`	[ES2021]数値リテラルにおけるNumeric Separators	データ型とリテラル
`{ k: v }`	プロパティ名が`k`、プロパティの値が`v`のオブジェクトを作成	オブジェクト
`{ n }`	[ES2015] プロパティ名が`n`、プロパティの値が`n`のオブジェクトを作成	オブジェクト
`[x, y]`	`x`と`y`を初期値にもつ配列オブジェクトを作成	配列
`/pattern/`	`pattern`をもつ正規表現オブジェクトを作成	文字列
`null`	`null`値	データ型とリテラル

文字列

文字列について。

コード例	説明	解説
`"xxx"`	ダブルクォートの文字列リテラル。改行などは`\`と特定の文字を組み合わせたエスケープシーケンスとして表現します。	文字列
`'xxx'`	シングルクォートの文字列リテラル。`"xxx"`と意味は同じ。	文字列
`xxx`	[ES2015] テンプレート文字列リテラル。改行を含んだ入力が可能	文字列
`${x}`	[ES2015] テンプレート文字列リテラル中の変数`x`の値を展開する	文字列

データアクセス

データへのアクセスについて。

コード例	説明	解説
`array[0]`	配列へのインデックスアクセス	配列
`obj["x"]`	オブジェクトへのプロパティアクセス（ブラケット記法）	オブジェクト
`obj.x`	オブジェクトへのプロパティアクセス（ドット記法）	オブジェクト
`obj?.x`	[ES2020] オブジェクトへのプロパティアクセス（Optional chaining演算子）	オブジェクト
`const { x } = obj;`	[ES2015] オブジェクトの分割代入	オブジェクト
`const [ x ] = array;`	[ES2015] 配列の分割代入	配列
`f(...array)`	[ES2015] Spread構文での配列の展開	配列
`f({ ...obj })`	[ES2018] Spread構文でのオブジェクトの展開	オブジェクト

演算子

演算子について。

コード例	説明	解説
`+`	プラス演算子、文字列結合演算子	演算子
`-`	マイナス演算子	演算子
`*`	乗算演算子	演算子
`/`	除算演算子	演算子
`%`	剰余演算子	演算子
`**`	[ES2016] べき乗演算子	演算子
`++`	インクリメント演算子	演算子
`--`	デクリメント演算子	演算子
`===`	厳密等価演算子	演算子
`!==`	厳密不等価演算子	演算子
`==`	等価演算子	演算子
`!=`	不等価演算子	演算子
`>`	大なり演算子/より大きい	演算子
`>=`	大なりイコール演算子/以上	演算子
`<`	小なり演算子/より小さい	演算子
`<=`	小なりイコール演算子/以下	演算子
`&`	ビット論理積	演算子
`\|`	ビット論理和	演算子
`^`	ビット排他的論理和	演算子
`~`	ビット否定	演算子
`<<`	左シフト演算子	演算子
`>>`	右シフト演算子	演算子
`>>>`	ゼロ埋め右シフト演算子	演算子
`&&`	AND演算子	演算子
`??`	[ES2020] Nullish coalescing演算子	演算子
`\|\|`	OR演算子	演算子
`(x)`	グループ演算子	演算子
`x, y`	カンマ演算子	演算子

関数と挙動

関数の定義と挙動について。

サンプル	説明	解説
`function f(){}`	関数宣言	関数と宣言
`const f = function(){};`	関数式	関数と宣言
`const f = () => {};`	[ES2015] Arrow Functionの宣言	関数と宣言
`async function f(){}`	[ES2017] Async Functionの宣言	非同期処理
`const f = async function(){};`	[ES2017] 関数式を使ったAsync Functionの宣言	非同期処理
`const f = async () => {};`	[ES2017] Arrow Functionを使ったAsync Functionの宣言	非同期処理
`function f(x, y){}`	関数における仮引数の宣言	関数と宣言
`function f(x = 1, y = 2){}`	デフォルト引数、引数が渡されていない場合の初期値を指定する。	関数と宣言
`function f([x, y]){}`	[ES2015] 関数の引数における配列の分割代入。引数の配列からインデックスが`0`の値を`x`に、インデックスが`1`の値を`y`に代入する。	関数と宣言
`function f({ x, y }){}`	[ES2015] 関数の引数におけるオブジェクトの分割代入。引数のオブジェクトから`x`と`y`プロパティを受け取る。	関数と宣言
`function f(...args)){}`	[ES2015] 可変長引数/Rest parameters。引数に渡された値を配列として受け取る	関数と宣言
`const o = { method: function(){} };`	メソッド定義	関数と宣言
`const o = { method(){} };`	[ES2015] メソッド定義の短縮記法	関数と宣言
`class X{}`	[ES2015] クラス宣言	クラス
`const X = class X{};`	[ES2015] クラス式	クラス
`class X{ method(){} }`	[ES2015] クラスのインスタンスメソッド定義	クラス
`class X{ get x(){}, set x(v){} }`	[ES2015] クラスのアクセッサメソッドの定義	クラス
`class X{ static method(){} }`	[ES2015] クラスの静的メソッド定義	クラス
`class C extends P{}`	[ES2015] クラスの継承	クラス
`super`	[ES2015] 親クラスを参照する	クラス
`fn()`	関数呼び出し	関数と宣言
fn`xxx`	[ES2015] タグ関数呼び出し	文字列
`new X()`	`new`演算子でのクラス（コンストラクタ関数をもつオブジェクト）からインスタンスを作成	クラス

コントロールフロー

コントロールフローの制御構文について。

例	説明	解説
`while(x){}`	whileループ。`x`が`true`なら反復処理を行う	ループと反復処理
`do{}while(x);`	do...whileループ。`x`が`true`なら反復処理を行う。`x`に関係なく必ず初回は処理が行われる	ループと反復処理
`for(let x=0;x < y ;x++){}`	forループ。`x < y`が`true`なら反復処理を行う	ループと反復処理
`for(const p in o){}`	for...inループ。オブジェクト（`o`）のプロパティ(`p`)に対して反復処理を行う	ループと反復処理
`for(const x of iter){}`	[ES2015] for...ofループ。イテレータ(`iter`)の反復処理を行う	ループと反復処理
`if(x){/A/}else{/B/}`	条件式。`x`が`true`ならAの処理を、それ以外ならBの処理を行う	条件分岐
`switch(x){case "A":{/A/} "B":{/B/}}`	switch文。`x`が`"A"`ならAの処理を、"B"ならBの処理を行う	条件分岐
`x ? A: B`	条件（三項）演算子。`x`が`true`なら`A`の処理を、それ以外なら`B`の処理を行う	条件分岐
`break`	break文。現在の反復処理を終了し、ループから抜け出す。	条件分岐
`continue`	continue文。現在の反復処理を終了し、次のループに行く。	条件分岐
`try{}catch(e){}finally{}`	`try...catch`構文	例外処理
`throw new Error("xxx")`	`throw`文	例外処理

モジュール

ECMAScriptモジュールについて。

コード	説明	解説
`import x from "./x.js"`	[ES2015] デフォルトインポート	ECMAScriptモジュール
`import { x } from "./x.js"`	[ES2015] 名前付きインポート	ECMAScriptモジュール
`import { x as y } from "./x.js"`	[ES2015] 名前付きインポートのエイリアス	ECMAScriptモジュール
`import * as x from "./x.js"`	[ES2015] すべての名前付きエクスポートをインポートしてエイリアス	ECMAScriptモジュール
`import "./x.js"`	[ES2015] 副作用のためのインポート	ECMAScriptモジュール
`export default x`	[ES2015] デフォルトエクスポート	ECMAScriptモジュール
`export { x }`	[ES2015] 名前付きエクスポート	ECMAScriptモジュール
`export { x as y }`	[ES2015] 名前付きエクスポートのエイリアス	ECMAScriptモジュール
`export { x } from "./x.js"`	[ES2015] 名前付きエクスポートの再エクスポート	ECMAScriptモジュール
`export * from "./x.js"`	[ES2015] すべての名前付きエクスポートの再エクスポート	ECMAScriptモジュール
`export * as ns from "./x.js";`	[ES2020] すべての名前付きエクスポートをインポートして`ns`という名前で再エクスポート	ECMAScriptモジュール

その他

コード例	説明	解説
`x;`	文	文と式
`{ }`	ブロック文	文と式

ガイド

プロジェクト構造

JavaScriptにおける基本的なプロジェクトレイアウト、ファイル、フォルダ構造について。

名前	説明
src/	プロジェクトのソースコード
index.js	アプリケーションのデフォルトエントリーポイント
test/	テストコード。`src/`に対するユニットテストを置くことが多い
index.test.js	アプリケーションのユニットテストファイル。例) `index-test.js`、`indexSpec.js`など
node_modules/	プロジェクトが依存するnpmモジュールのインストール先
package.json	プロジェクトの設定ファイル。名前、説明、スクリプト、依存モジュールなど
package-lock.json	npmが扱う依存モジュールのロックファイル

参考

Todoアプリ