付録: 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が扱う依存モジュールのロックファイル

参考