付録: JavaScriptチートシート

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

言語機能

コメント

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

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

データ構造

変数宣言について。

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

リテラル

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

コード例 説明 解説
true または false 真偽値 データ型とリテラル
123 10進数の整数リテラル データ型とリテラル
0b10 [ES2015] 2進数の整数リテラル データ型とリテラル
0o777 [ES2015] 8進数の整数リテラル データ型とリテラル
0x30A2 16進数の整数リテラル データ型とリテラル
{ 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 オブジェクトへのプロパティアクセス（ドット記法） オブジェクト
const { x } = obj; [ES2015] オブジェクトの分割代入 オブジェクト
const [ x ] = array; [ES2015] 配列の分割代入 配列
f(...array) [ES2015] Spread構文での配列の展開 配列
f({ ...obj }) [ES2018] Spread構文でのオブジェクトの展開 オブジェクト

演算子

演算子について。

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

その他

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

ガイド

プロジェクト構造

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

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

参考