付録: JavaScriptチートシート

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

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

言語機能

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

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

データ構造

変数宣言について。

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

リテラル

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

コード例	説明	解説	MDN
`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`値	データ型とリテラル	字句文法

文字列

文字列について。

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

データアクセス

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

コード例	説明	解説	MDN
`array[0]`	配列へのインデックスアクセス	配列	Array
`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構文でのオブジェクトの展開	オブジェクト	スプレッド構文

演算子

演算子について。

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

関数と挙動

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

サンプル	説明	解説	MDN
`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] クラス宣言	クラス	class
`const X = class X{};`	[ES2015] クラス式	クラス	クラス式
`class X{ method(){} }`	[ES2015] クラスのインスタンスメソッド定義	クラス	クラス
`class X{ get x(){}, set x(v){} }`	[ES2015] クラスのアクセッサメソッドの定義	クラス	オブジェクトでの作業
`class X{ property = 1; }`	[ES2022] クラスのPublicクラスフィールドの定義	クラス	パブリッククラスフィールド
`class X{ #privateField = 1; }`	[ES2022] クラスのPrivateクラスフィールドの定義	クラス	プライベートクラス機能
`class X{ static method(){} }`	[ES2015] クラスの静的メソッド定義	クラス	static
`class C extends P{}`	[ES2015] クラスの継承	クラス	extends
`super`	[ES2015] 親クラスを参照する	クラス	super
`fn()`	関数呼び出し	関数と宣言	関数
fn`xxx`	[ES2015] タグ関数呼び出し	文字列	テンプレートリテラル (テンプレート文字列)
`new X()`	`new`演算子でのクラス（コンストラクタ関数をもつオブジェクト）からインスタンスを作成	クラス	new 演算子

コントロールフロー

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

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

モジュール

ECMAScriptモジュールについて。

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

その他

コード例	説明	解説	MDN
`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アプリ