JavaScript Primerのスポンサーを募集中

付録: 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真偽値データ型とリテラル字句文法
12310進数の整数リテラルデータ型とリテラル字句文法
123n[ES2020] 巨大な整数を表すBigIntリテラルデータ型とリテラル字句文法
0b10[ES2015]2進数の整数リテラルデータ型とリテラル字句文法
0o777[ES2015]8進数の整数リテラルデータ型とリテラル字句文法
0x30A216進数の整数リテラルデータ型とリテラル字句文法
123_456[ES2021]数値リテラルにおけるNumeric Separatorsデータ型とリテラル字句文法
{ k: v }プロパティ名がk、プロパティの値がvのオブジェクトを作成オブジェクト文法とデータ型
{ n }[ES2015] プロパティ名がn、プロパティの値がnのオブジェクトを作成オブジェクトオブジェクト初期化子
[x, y]xとyを初期値にもつ配列オブジェクトを作成配列文法とデータ型
/pattern/patternをもつ正規表現オブジェクトを作成文字列字句文法
nullnull値データ型とリテラル字句文法

文字列

文字列について。

コード例説明解説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の処理を行う条件分岐条件 (三項) 演算子
breakbreak文。現在の反復処理を終了し、ループから抜け出す。条件分岐break
continuecontinue文。現在の反復処理を終了し、次のループに行く。条件分岐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.jsonnpmが扱う依存モジュールのロックファイル

参考