galife: JavaScript

ラベル JavaScript の投稿を表示しています。すべての投稿を表示

ECMAScript 2015 (ES6) まとめ (モジュール編)

ECMAScript2015 (ES6) で機能追加されたもののうち、今回は class に関連する部分をピックアップしてまとめていきます。ついに JavaScript でもクラスが使えるようになった！ …のですが、不完全な部分もありますので、この記事を読んでそんなところもピックアップしてもらえればと思います。

ES2015 に関連するまとめ記事は以下の通りです。

関連記事

ECMAScript 2015 (ES6) まとめ (基本編)
ECMAScript 2015 (ES6) まとめ (クラス編)
ECMAScript 2015 (ES6) まとめ (モジュール編) ← この記事

ESモジュール概要
基本構文
- import
- export

ESモジュール概要

ESモジュールは ECMAScript で定義された標準規格です。 Node.js で定義されているモジュールとは少し異なるので注意です。残念なのは現在（2016年6月時点）どのブラウザも実装してないような点。。

ブラウザで試せないですが、以下に簡単なサンプルコードを記載します。

module.js

export default function () {
  console.log('exported module method.');
};

main.js

import sample from './module.js';

sample();     // module.js の default function が実行される。

基本構文

import

外部定義されたモジュールファイルパスを指定してモジュールを読み込みます。読み込まれたモジュールは指定された変数へ代入して読み込みまたはモジュールに定義された名称そのままで読み込みが行われます。

構文

import name from 'module';

import {member} from 'module';
import {member1 [as alias1] [, ... , menberN [as aliasN]]} from 'module';

name: デフォルトエクスポート設定されたオブジェクトを受け取る変数名
module: モジュールファイルへのパス
member1 ... memberN: モジュールファイル中に定義された名前付きエクスポートのうち、インポートしたいオブジェクト名
alias1 ... aliasN: インポートしたオブジェクトを受け取る変数名

利用例

モジュール内のすべてのコンテンツをインポート

import some from './some.js';

モジュール内のオブジェクト名を指定してインポート

import {some} from './some.js';

モジュール内のオブジェクト名を複数指定してインポート

import {hoge, foo, bar} from './some.js';

モジュール内のオブジェクト名を指定して別名にインポート

import {some as hoge} from './some.js';

export

export できるものはプリミティブ、オブジェクト、関数、クラスと何でも指定されたものをモジュールとしてエクスポートできます。

export する方法は default export と named export の2種類があります。 default export はその名の通り、デフォルトとして指定された単一オブジェクトをエクスポートできます。 named export は名前付けされたオブジェクトを複数同時にエクスポートできます。実際のモジュールでは default export と named export を混在させることもできます。

構文

default export

export default function () {...};
export default class {...}

named export

export var name1 = ...;
export let name2 = ...;
export const name3 = ...;
export function name4 () {...}
export class name5 {...}

利用例

デフォルトで関数を出力するサンプルコード

export default function (msg) {
  console.log(msg);
}

デフォルトでクラスを出力するサンプルコード

export default class {
  id: '',
  name: '',
  say () {
    console.log('My name is ' + this.name + '.');
  }
}

名前付きでオブジェクトを出力するサンプルコード

export User = function () {
  this.id = '';
  this.name = '';
};

名前付きで定数を出力するサンプルコード

export const STATUS_X = 0x0001;
export const STATUS_Y = 0x0002;
export const STATUS_Z = 0x0004;

名前付きで複数のオブジェクトを出力するサンプルコード

const STATUS = {
  X: 0x001,
  Y: 0x002,
  Z: 0x004
};

var User = function () {
  this.Id = '';
  this.Name = '';
  this.Status = '';
};

export {STATUS, User};

ESモジュールについてまとめてみました。ブラウザでは使えないので参考情報にしかならないですが…。。そのうち使えるようになった時にそなえての準備になればと思います。

参考記事

ECMAScript 2015 (ES6) まとめ (クラス編)

ちなみに、ES2015 に関連するまとめ記事は以下の通りです。

関連記事

ECMAScript 2015 (ES6) まとめ (基本編)
ECMAScript 2015 (ES6) まとめ (クラス編) ← この記事
ECMAScript 2015 (ES6) まとめ (モジュール編)

JavaScript のクラス概要
クラスの定義
クラスの利用
- インスタンス化

JavaScript のクラス概要

Java や C# 等の言語には最初から class キーワードが存在していますが、 JavaScript には ES2015 まで存在しませんでした。 ES2015 に対応しているブラウザから class が使えるようになります。

JavaScript において class を利用する簡単な例を以下に載せます。

// クラスを宣言
class Car {
  constructor (name) {
    this.name = name;
  }
  
  drive () {
    console.log(`drive ${this.name}.`);
    console.log('zoom zoom ...');
  }
}

// クラスをインスタンス化して利用
var mycar = new Car('ponkotsu');
mycar.drive();

クラスの宣言は class キーワードに続けてクラス名を指定することでできます。クラスの内容はオブジェクト定義する記載方法と似ていますが、メンバの区切りにカンマ不要な点が異なります。クラスを利用する際のインスタンス化は new で行い、メソッド呼び出しは . で行うあたりはよくある記法と同じかと思います。

クラスの定義

クラス宣言

クラス宣言を行うには class キーワードを利用します。宣言方法は「classキーワードに引き続きクラス名を記述する方法」と「変数としてクラス定義する方法」の2通りがあります。

構文

class ClassName {
  definitions
}

var ClassName = class [ClassNameAlias] {
  definitions
}

ClassName: クラス名を指定。インスタンス生成時に利用する名前。
ClassNameAlias: クラス内部で利用するクラス名。staticメソッドを呼び出すとき等に使う。オプションなので定義しなくても動作する。
definitions: クラスの内容を記述。

コンストラクタ

その名の通り、クラスをインスタンス化するとき呼ばれる特別なメソッドです。名称が決まっており constructor を利用します。メソッドになるため仮引数やメソッド本体の記載方法は通常のメソッドと同じです。 JavaScript のクラスではメンバ変数の初期化をコンストラクタで行います。

構文

var ClassName = class {
  constructor ([param...]) {
    statements
  }
}

利用例

var Car = class {
  constructor (name) {
    console.log(`create ${name}`);
  }
}

var mycar = new Car('ponkotsu');    // "create ponkotsu"

メソッド

オブジェクトの操作を表すメソッドを定義することができます。通常の関数と同じで関数名と仮引数を定義します。利用する際はインスタンス化した後に定義したメソッド名を指定することで呼び出せます。インスタンス化せずに呼び出せる staticメソッドは static キーワードを用いて定義します。

JavaScript のクラスで通常通りメソッドを追加すると public な扱いになり、どこからでもアクセスできるメソッドになります。 private なメソッドを作りたい場合は ES2015 で追加された Symbol を使うことで疑似的な表現ができると思います。 Symbol はユニークな値のため、その名称を知ったうえで意図的に Symbol を利用してアクセスしない限りメソッドアクセスできません。

構文

publicメソッド

var ClassName = class {
  MethodName ([params...]) {
    statements
  }
}

privateメソッド

var ClassName = class {
  [Symbol('MethodName')] ([params...]) {
    statements
  }
}

staticメソッド

var ClassName = class {
  static MethodName ([params...] {
    statements
  }
}

MethodName: メソッド名
params...: メソッドに渡す仮引数
statements: メソッド本体

利用例


var Car = class {
  constructor(name) {
    this.name = name;
  }

  // publicメソッド
  echo () {
    console.log(this.name);
  }

  // privateメソッド
  [Symbol.for('_echo')]() {
    console.log(`${(new Date(Date.now())).toISOString()} : ${this.name}`);
  }

  // staticメソッド
  static maintenance() {
    console.log('now maintenance...');
  }
};


var o = new Car('hoge');
o.echo();                     // "hoge"
o._echo();                    // TypeError: o._echo is not a function
o['_echo']();                 // TypeError: o._echo is not a function
o[Symbol.for('_echo')]();     // "2016-07-01T00:22:36.471Z : hoge"
Car.maintenance()             // "now maintenance..."

プロパティ

プロパティ（メンバ変数）の定義および初期化はコンストラクタの中で行います。プロパティに対するアクセスを setter / getter で制御したい場合は追加で必要な setter / getter を定義を行います。 setter / getter を利用する際は本体となるプロパティは private とするのが通常と思いますので、 Symbol とセットで定義になるかと思います。

構文

通常の定義

var ClassName = class {
  constructor () {
    // publicプロパティ
    this.publicMember = 'prop1';

    // privateプロパティ
    this[Symbol.for('privateMember')] = 'prop2';
  }
}

setter / getter を用いた定義

var ClassName = class {
  constructor () {
    // プロパティの実態
    this[Symbol.for('memberName')] = initialValue;
  }
  
  // getter定義
  get PropertyName () {
    // getterの内容
    return this[Symbol.for('memberName')];
  }

  // setter定義
  set PropertyName (value) {
    // setterの内容
    this[Symbol.for('memberName')] = value;
  }
}

利用例

var Car = class {
  constructor(name) {
    this.name = name;
    this[Symbol.for('created')] = (new Date(Date.now())).toISOString();
    this[Symbol.for('_number')] = Math.floor(Math.random() * 10000);
  }
  getCreatedTime() {
    console.log(this[Symbol.for('created')]);
  }
  echo() {
    console.log(`this name is "${this.name}"`);
  }
  get number() {
    return this[Symbol.for('_number')];
  }
  set number(value) {
    this[Symbol.for('_number')] = value;
  }
};


var o = new Car('hoge');
o.created;                    // undefined
o.getCreatedTime();           // 2016-07-01T01:00:22.833Z  <- インスタンス生成日時
o.echo();                     // this instance's name is "hoge"
o.number;                     // 7184  <- 乱数

継承

あらかじめ作成してあるクラスを継承して新しいクラスを作成することができます。継承は extends キーワードを利用して親クラスを指定します。

子クラスにおいて親クラスのメソッドを呼ぶ場合、super キーワードを利用して呼び出します。親クラスのコンストラクタを呼び出す場合は super() で呼び出します。親クラスのメソッドを呼び出す場合は super.parentMethod() で呼び出します。

子クラスにおいて親クラスのメソッドをオーバーライド（上書き）する場合、同名のメソッドを定義することでオーバーライドできます。

構文

var ChildClassName = class [ChildClassNameAlias] extends ParentClassName {
  definitions
}

ChilClassName: 子クラス名
ParentClassName: 親クラス名

利用例

// 親クラスの定義
var Car = class {
  constructor(name) {
    this.name = name;
    this.created = (new Date(Date.now())).toISOString();
  }

  getTimeStamp() {
    return this.created;
  }

  drive() {
    console.log('zoom zoom ...');
  }
};

// 子クラスの定義
// Car を継承して Lamborghini を作成
var Lamborghini = class extends Car {
  constructor(name) {
    // 親コンストラクタを呼び出す例
    super(name);
  }

  echo() {
    // 親メソッドを呼び出す
    console.log('call parent class getTimeStamp() : ' + super.getTimeStamp());
  }

  // オーバーライドの例
  drive() {
    console.log(`fire ${this.name} !!`);
  }
};


var car1 = new Lamborghini('lamgorghini');
car1.getTimeStamp();    // "2016-07-01T04:14:01.131Z"
car1.echo();            // call parent class getTimeStamp() : 2016-07-01T04:14:01.131Z
car1.drive();           // fire lamgorghini !!

クラスの利用

インスタンス化

インスタンス化は new に続いてクラス名を記述することで行えます。インスタンス化した際は最初にコンストラクタ (constructor メソッド) が呼ばれます。ちなみに、インスタンス破棄時に呼ばれるデストラクタは存在しません。

構文

var instance = new ClassName();

利用例

var User = class User {
  constructor () {
    this.id = '';
    this.name = '';
  }
  login () {
    console.log('login');
  }
  logout () {
    console.log('logout');
  }
};

var user = new User();
user.login();
user.logout();

ECMAScript2015 (ES2015 / ES6) から利用できるようになったクラスについてまとめてみました。 JavaScript においてクラスを利用するとき利用する setter / getter (ES5) や Symbol型についてもあわせて記載しました。この記事一本で JavaScript のクラス作成、利用は出来る…ハズ！

参考記事

ECMAScript 2015 (ES6) まとめ (基本編)

ECMAScript 2015 (ECMAScript 6 / ES6 と呼ばれていたもの) は以前の ECMAScript 5 と比べるとかなりの構文、式、機能が追加されています。ざっくりとまとめ…としたくてもかなりの量があったので数回に分けてみていきたいと思います。

初回は JavaScript 実装する中でもコアとなりそうなデータ型、宣言、式と演算子、関数に関して見ていきます。次回以降ではクラス、モジュール、組み込みオブジェクトについて見ていきたいと思います。

関連記事

データ型
- 数値
  - 8進数、2進数
- 文字列
  - テンプレートリテラル
  - Unicodeコードポイントエスケープ
- オブジェクト
  - オブジェクトリテラル拡張
- 正規表現
  - "y" および "u" オプション
- Symbol型
宣言
- const
- let
式と演算子
関数

データ型

8進数 (Octal) / 2進数 (Bynary) リテラル

8進数と 2進数のリテラルが使えるようになります。 8進数は "0(ゼロ)" と "o(オー)" のプレフィックスを付けることで表現します。 "o(オー)" のプレフィックスは任意なのでなくても 8進数として扱われます。 2進数は "0(ゼロ)" と "b(ビー)" のプレフィックスを付けることで表現します。

構文

"0(ゼロ)" + ["o(オー)"] + "数字"  // 8進数

"0(ゼロ)" + "b(ビー)" + "数字"    // 2進数

利用例

var oval = 0o0012;  // 8進数の"12"   (= 10進数の"10")
var bval = 0b1010;  // 2進数の"1010" (= 10進数の"10")

console.log(oval);  // "10"
console.log(bval);  // "10"

テンプレートリテラル

組み込み式を利用できる文字列リテラルが定義できます。テンプレートリテラルはバッククォート(``) で文字列を囲みます。プレースホルダーはドル記号と波括弧(${expression})で囲みます。改行はエスケープを行わなくてもそのまま表現できます。テンプレートリテラルは生成時にプレースホルダ―が計算されるため、あらかじめプレースホルダーに代入する値は準備しておく必要があります。

構文

var text = `plane text ${expression}`;

利用例

複数行

// 複数行
var text = `O Romeo, Romeo! 
Wherefore art thou Romeo?`;

// 式内挿入
var a = 3;
var b = 4;
var text = '${a} + ${b} = ${a+b}';

console.log(text);   // "3 + 4 = 7"

Unicodeコードポイントエスケープ

文字列を表現する際、Unicodeコードポイントエスケープが利用できます。 "\u"のプレフィックスに続いて4桁の16進数を記載することで表現します。

構文

\uhhhh

利用例

var escaped = "\u3053\u3093\u306B\u3061\u306F";
console.log(escaped);  // "こんにちは"

オブジェクトリテラル拡張

オブジェクト生成に関して以下のようなことができるようになります。

プロパティ値の自動代入
算出プロパティキー
メソッド定義の省略

利用例

プロパティ値の自動代入。

オブジェクト生成時にスコープ内でプロパティ名と同名の変数がある場合、その変数値をプロパティの値として自動代入します。

var getMessage(id, message) {
  return {
    id,
    message
  };
};
var m = getMessage(123, 'Hello World');
console.log(m.message);  // 'Hello World'

算出プロパティーキー

オブジェクト生成時に動的なキー作成ができます。

var key = 'foo'
var o = {
  [key]: 'bar'
};
console.log(o.foo);  // 'bar'

メソッド定義の略記

オブジェクトにメソッドを追加する際、function を省略できます。

var o = {
  msg: 'hello world.',
  greet() {
    return this.msg;
  }
};

正規表現の "y" および "u" フラグ

正規表現で新しいフラグ y および u が使えるようになります。それぞれのフラグの意味は以下のようなものになっています。

y: lastIndexで指定された位置から始まる文字列に対してマッチングを行う
u: 指定されたマッチングパターンに対してUnicodeに関する機能を有効化する

利用例

var text = "1st 2nd 3rd 4th 5th";
var regexp = /\d\w\w/y

regexp.lastIndex;       // 0
text.match(regexp);     // ["1st"]
regexp.lastIndex = 2    // 2
text.match(regexp);     // null
regexp.lastIndex = 4    // 4
text.match(regexp);     // ["2nd"]

Symbol型

新しいプリミティブ型 Symbol が追加されます。 Symbol は必ずユニークな値をとる型です。

構文

var value = Symbol([name]);

name: シンボルを説明する文字列。

利用例

Symbol型 は同じ文字列で生成しても違う値とみなされます。完全に同じ値を利用したい場合、 Symbol.for メソッドを利用して Symbol型の生成および利用を行います。

var sym1 = Symbol('key1');
var sym2 = Symbol('key1');

console.log(sym1 === sym2);    // false

var sym3 = Symbol.for('key2');
var sym4 = Symbol.for('key2');

console.log(sym3 === sym4);    // true

宣言

const

読み取り専用の定数を生成できます。読み取り専用のため、再設定することができません。

有効なスコープは宣言されたグローバルまたは関数内になります。

構文

const name = value;

name: 定数名
value: 定数値

利用例

const MESSAGE = 'Hello World.';
console.log(MESSAGE);        // "Hello World."

MESSAGE = 'Hello World !!';  // <-エラーになる

let

ブロックスコープ内で有効な変数を宣言できます。宣言された変数値はブロック内だけで利用できます。

構文

let name = value;

name: 変数名
value: 変数値

利用例

var msg = 'Hello';

{
  // この範囲はブロックスコープ
  let msg = 'こんにちは';
  console.log(msg);    // "こんにちは"
}

console.log(msg);      // "Hello"

波括弧 ({}) で囲まれた範囲がブロックスコープとなるため、その範囲内だけが有効範囲となります。ブロックスコープを抜けるとブロックスコープ内の内容は破棄されるため、もとのスコープをたどって得られる値が表示されます。

var arr = [1, 2, 3, 4, 5];
for (let i = arr.length; i--;) {
  console.log(i);
}

変数 i はブロックスコープとして forループ の内部だけで有効な変数となります。

式と演算子

分割代入(Destructing assignment)

配列またはオブジェクトから任意のプロパティ値を取り出して代入する方法です。

構文

[a, b] = [1, 2];

({a, b} = {a:1, b:2});

オブジェクトへ分割代入する際は式として実行するために丸括弧でくくります。

利用例

単純な初期化

var a, b;

// 配列を使った例
[a, b] = [1, 2];

// オブジェクトを使った例
({a, b} = {a:1, b:2});

console.log(a);    // 1
console.log(b);    // 2

デフォルト値

var a, b, c, d;

// 配列を使った例
[a=1, b=2, c=3, d=4] = [, ,5, 10];

// オブジェクトを使った例
({a=1, b=2, c=3, d=4} = {c:5, d:10});

console.log(a);    // 1
console.log(b);    // 2
console.log(c);    // 5
console.log(d);    // 10

スワップ

var a = 5, b = 8;
[a, b] = [b, a];

console.log(a);    // 8
console.log(b);    // 5

必要な値の取り出し

var url = "https://garafu.blogspot.com/2015/06/regexp-sample.html";
var regexp = /^(\w+)\:\/\/([^\/]+)\/(.*)$/;
var [,protocol, host, fullpath] = regexp.exec(url);

console.log(protocol);    // "http"
console.log(host);        // "garafu.blogspot.jp"
console.log(fullpath);    // "2015/06/regexp-sample.html"

var name, age;

var getUser = function (id) {
  var name, kana, age, status;
  
  // 何か処理
  name = 'Yoko Nishikawa';
  age = 16;
  
  return {
    id,
    name,
    kana,
    age,
    status
  };
};

var {name, age} = getUser('0123');
console.log(name);      // "Yoko Nishikawa"
console.log(age);       // 16

スプレッド演算子 (Spread Operator)

配列が設定されている変数名に ... のプレフィックスを付けることで、複数の引数、複数の配列要素、複数の値を利用する場所で式が展開されます。

構文

...arg

利用例

関数の引数

var helloFunc = function (x, y, z) { };
var args = [1, 2, 3];
helloFunc(...args);

配列リテラル生成

var parts = [2, 3];
var full = [1, ...parts, 4, 5];
console.log(full); // "[1, 2, 3, 4, 5]"

分割代入

var [a, b, ...arr] = [1, 2, 3, 4, 5];
console.log(a);    // "1"
console.log(b);    // "2"
console.log(c);    // "[3, 4, 5]"

配列の結合

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
arr1.push(...arr2);

for ... of 文

カウント可能なオブジェクト(Array, Map, Set, String, TypedArray, DOMElementsTree, arguments) の明らかな要素のみを順に捜査します。 for ... in はプロパティ含めてすべての値を列挙するが for ... of は配列の要素のみを列挙します。

構文

for (variable of iterable) {
  statement
}

variable: 要素を代入する変数
iterable: カウント可能なオブジェクト
statement: 処理

利用例

var arr = [1, 2, 3];
arr.message = 'Hello World';

for (let item of arr) {
  console.log(item);
};
// -> 1, 2, 3
// 'Hello World'; は表示されない

関数

デフォルト引数 (Default Parameters)

関数の仮引数にデフォルト値を設定することができます。デフォルト引数は呼び出し時に評価されるので、オブジェクトは呼び出される度に生成されます。

構文

function [name]([param1[=defaultValue1][, ... [, paramN[=defaultValueN]]]]){
  // 何か処理...
}

利用例

var getMessage(name = 'tanaka') {
  return 'Hello ' + name + '.';
};

var message = getMessage();

console.log(message);       // 'Hello tanaka.'

残余引数 (Rest Parameters)

関数の最後の引数に「...」の接頭辞を付けることで、不特定多数の引数を配列として受け取ります。

残余引数(Rest Prameters) と arguments の違いは以下にあります。

残余引数は任意の名前を付けられる
残余引数は一部の引数値になりうる
argumentsはすべての引数を持つ
残余引数はarrayインスタンス
argumentsは独自オブジェクト

構文

var expression = function (a, b, ...args) {
}

expression: 関数名
a, b: 通常の引数。
...args: 残余引数。「...」のプレフィックスを仮引数名につけることで設定できる。

利用例

var log = function (...args) {
  console.log(args.join(','));
};

log("host", "status");    // "host,status"

アロー関数

C# のラムダ式のような記載ができます。アロー関数で定義された関数はすべて無名関数になります。

構文

基本

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

引数が1個の場合、丸括弧は省略可能

(param) => { statements }
param => { statements }

引数が0個の場合、丸括弧は省略不可

() => { statements }

利用例

var hoge = function () {
  var self = this;
  this.arg = 0;

  // ES6より前の古い書き方
  window.setInterval(function () {
    self.arg += 1;
    $('#out').val(self.arg);
  }, 1000);

  // ES6の新しい書き方
  window.setInterval(() => {
    this.arg += 1;
    $('#out').val(this.arg);
  }, 1000);
};

ECMAScript2015 で追加変更された内容の中でもコアな部分についてまとめてみました。これだけでも今までにない JavaScript ライフが始まる予感がしますが… まだまだクラスやモジュールといった新機能もあります。続きはまた別の記事にて…。

参考記事

ECMAScript 5 (ES5) 新機能まとめ

最新は ECMAScript2015 が出ていますが…ECMAScript3から知識が止まっているので少しずつ更新したいと思います。まずは、ECMAScript5について見ていきます。すべて見ても ECMAScript3 と被る部分が多いので、ECMAScript3 と ECMAScript5 の差分に絞ってまとめます。

差分だけでも結構な量になってしまいましたが…それだけ新規機能が増えたということですね。今まで JavaScript で上手くいかずにもどかしかったもろもろが、そこそこ解決されている気がします。

strict モード
- strictモードの適用
  - strictモードをスクリプト全体に適用する
  - strictモードを特定関数のみに適用する
オブジェクト
配列
- 末尾カンマを無視
- メソッドの追加
文字列
- プロパティアクセス
- メソッドの追加
  - String.prototype.trim
日付
- メソッドの追加
関数
- メソッドの追加
  - Function.prototype.bind
JSON
- ネイティブオブジェクトの追加
  - JSON.parse
  - JSON.stringify

strictモード

strictモードとは、もともと曖昧な記載でも動くようになっていた JavaScript に対して、厳格なコード記述を求めるようにすることで、少しでもましなコードを書けるようにする仕組み…と言ったところでしょうか。

strictモードを利用すると、以下のようなことができるようになります。

JavaScript でエラーにはならないが問題となりそうなコードを厳格にエラーとする
strictモードでない実装に比べて速く処理できる可能性があります

strictモードの適用

実際に strictモードを適用する方法は以下にあげる 2通りがあります。基本的にはどんな処理よりも先に 'use strict' を宣言することで利用できます。

strictモードをスクリプト全体に適用する

読み込まれる JavaScriptファイルの先頭で宣言することで、その JavaScriptファイル全体に対して strictモードを強制できます。

// JavaScript file.
'use strict';

var message = 'Oh, my god !!';

// ... 以下にコードが続く ...

この適用方法の場合、ファイルに記載されているコードすべてが対象となるため、1ファイルに自動マージするケースやコードが多すぎる場合、予期しない場所でエラーとなる可能性があるので、以下に記載する関数毎に strictモードを適用して順次移行を行う方が良いと思います。

strictモードを特定関数のみに適用する

関数の先頭に 'use strict' を記載することで、該当関数内に関して strictモードを強制することができます。こちらは関数内なので気を付ける範囲が限られるため、順次取り組むと良いと思います。

// ... ここまでにコードがいろいろ ...

var hoge = function () {
  'use strict';
  
  var message = 'Hello World !';
  
  // ... 何か処理
}

// ... 以下にもコードが続く ...

オブジェクト

getter / setter

オブジェクトのプロパティに対して getter / setter が作成できるようになりました。

構文

{ get [expression]() { ... } }

expression: getterプロパティ名を指定。

{ set [expression](value) { ... } }

expression: setterプロパティ名を指定。
value: プロパティを設定するために引き渡された値。Object.defineProperties の第2引数と同じ値。

利用例

var user = {
  firstName: '',
  lastName: '',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(val) {
    var arr = (val || '').split(' ');
    this.firstName = arr[0];
    this.lastName = arr.length > 1 ? arr[1] : '';
  }
};

user.firstName = 'Saya';
user.lastName = 'Sasamiya';
console.log(user.fullName);   // -> 'Saya Sasamiya'

user.fullName = 'Kirin Toudou';
console.log(user.fullName);   // -> 'Kirin Toudou'

末尾カンマを無視

ES5 から末尾のカンマが無視されるようになります。これにより、オブジェクト内の順序入れ替えでカンマの付け忘れ、消し忘れによるエラーの心配がなくなります。

var obj = {
  firstName: 'Ayato',
  lastName: 'Amagiri',
  age: 16,    // <-末尾のカンマが無視される 
};

予約後をプロパティ名に指定可能

予約後（var, if, for 等）がプロパティ名として利用できるようになりました。

var obj = {
  if: 'Hello World.'
};

console.log(obj.if);    // -> 'Hello World.'

メソッドの追加

オブジェクトに以下にあげる新規メソッドが追加されました。詳しくは各メソッドの説明で見ていきます。

Object.create
Object.defineProperty
Object.defineProperties
Object.getPrototypeOf
Object.keys
Object.seal
Object.freeze
Object.preventExtensions
Object.isSealed
Object.isFrozen
Object.isExtensible
Object.getOwnPropertyDescriptor
Object.getOwnPropertyNames

Object.create

指定されたプロトタイプを元に新しいオブジェクトを生成します。

構文

Object.create(proto [, propertiesObject])

引数

proto: {object}
新しく生成するオブジェクトのプロトタイプを指定します。
propertiesObject: {object}
省略可能。オブジェクトが指定されていた場合、指定されたオブジェクトのプロパティを新しく生成するオブジェクトのプロパティに追加します。

戻り値

: {object}
新しく生成されたオブジェクト。

利用例

// 基本クラスを準備
var Animal = function () {
  this.message = '';
};
Animal.prototype.say = function () {
  return this.message + '!!';
};

// プロトタイプを継承してオブジェクト生成
// 以下のコードは「var o = new Animal();」と同じ。
var o = Object.create(Animal.prototype);

Object.defineProperty

指定されたオブジェクトにプロパティを新規作成、または指定された既存のプロパティを変更します。

構文

Object.defineProperty(obj, prop, descriptor)

引数

obj: {object}
プロパティが定義されたオブジェクト
prop: {string}
作成または変更したいプロパティ名
descriptor: {object}
作成または変更するプロパティのディスクリプタ

戻り値

: {object}
プロパティ追加されたオブジェクト。元のオブジェクトと同じ。

descriptor に設定できるプロパティおよびその概要は以下の通りです。

configurable: 規定値は false。プロパティを変更または削除できるかどうかを指定します。
enumerable: 規定値は false。プロパティ列挙に現れるかどうかを指定します。
value: 規定値は undefined。プロパティの値を設定します。
writable: 規定値は false。プロパティに関連付けられた値を変更できるかどうかを指定します。
get: 規定値は undefined。getter関数を定義します。
set: 規定値は undefined。setter関数を定義します。

利用例

var obj = {};

// データディスクリプタによるプロパティ追加
Object.defineProperty(
  obj,
  'value', {
    configurable: true,
    enumerable: true,
    writable: true,
    value: 10
  });

// アクセサディスクリプタによるプロパティ追加
Object.defineProperty(
  obj,
  'size', {
    configurable: true,
    enumerable: true,
    get: function () { return this.value * 2; },
    set: function (value) { this.value = value / 2; }
  });

console.log(obj.value);   // -> 10
console.log(obj.size);    // -> 20

Object.defineProperties

Object.defineProperty を複数同時指定するメソッドです。内容は前述の Object.defineProperty とほぼ被るので詳細は割愛します。

構文

Object.defineProperties(obj, props)

引数

obj: {object}
プロパティを追加または変更したいオブジェクト。
props: {object}
追加または変更したいプロパティのディスクリプタを列挙したオブジェクト。

戻り値

: {object}
プロパティ追加されたオブジェクト。元のオブジェクトと同じ。

利用例

var obj = {};

// obj に 'key1' および 'key2' のプロパティをまとめて追加
Object.defineProperties(obj, {
                          'key1': {
                            writable: true,
                            value: 'Hello'
                          },
                          'key2': {
                            writable: true,
                            value: 'こんにちは'
                          }
                        });

Object.getPrototypeOf

指定したオブジェクトのプロトタイプを取得します。

構文

Object.getPrototypeOf(obj)

引数

obj: {object}
プロトタイプを取得したいオブジェクト。

戻り値

: {object}
プロトタイプオブジェクト。

利用例

var proto = Object.getPrototypeOf(Animal);
proto.say = function () {
  console.log('Hello World.');
};
// ↑実際にこのような実装をすると、参照先の書き換えで処理速度の低下が懸念されるので行いません。
//   あくまでサンプルコードです。。

Object.keys

指定されたオブジェクト自身に存在するプロパティのうちプロパティディスクリプタで enumerable: true の指定があるプロパティを列挙します。 for ... in との違いはプロトタイプチェーンを含まない点です。 Object.getOwnPropertyNames との違いは enumerable: true のみを列挙する点です。

構文

Object.keys(obj)

引数

obj: {object}
プロパティリストを取得したいオブジェクト。

戻り値

: {string[]}
キーを格納した配列。

利用例

// 元となる car インスタンス を生成
var car = Object.create(
  {}, {
    _name: {
      writable: true,
      value: ''
    },
    name: {
      get: function () { return this._name; },
      set: function (value) { this._name = value; }
    },
    move: {
      enumerable: true,
      value: function () {
        console.log('zoom zoom ...');
      }
    }
  });

// car インスタンス を拡張して mycar インスタンス を生成
var mycar = Object.create(
  car, {
    number: {
      value: 123456
    },
    owner: {
      enumerable: true,
      value: 'foobar'
    }
  });

// 生成後にプロパティ追加
mycar.old = 10;

// Object.keys でプロパティ抽出
// 抽出されるのは ["owner", "old"] の 2プロパティ。
var keys = Object.keys(mycar);

Object.seal

指定されたオブジェクトを封印して新しいプロパティの追加と既存プロパティの削除を抑止します。プロパティに対する変更は抑止対象外です。

構文

Object.seal(obj)

引数

obj: {object}
プロパティの追加削除を禁止したいオブジェクト。

戻り値

: {object}
封印されたオブジェクト。元のオブジェクトと同じ。

利用例

// 元オブジェクト
var user = {
  id: '123456789'
};

// 封印前はプロパティの追加・変更・削除ができる。
user.name = 'Saya Sasamiya'

// オブジェクトを封印する。
Object.seal(user);

// 封印後はプロパティの追加・削除ができなくなる。
user.age = 16;                  // プロパティ追加はできない。
delete user.name;               // 削除もできない。

// 封印後にプロパティ変更はできる。
user.name = 'Kirin Toudou';

Object.freeze

指定されたオブジェクトのプロパティ追加・変更・削除を抑止します。実質的に何もできなくなります。

構文

Object.freeze(obj)

引数

obj: {object}
凍結したいオブジェクト。

戻り値

: {object}
凍結したオブジェクト。元のオブジェクトと同じ。

利用例

// 元のオブジェクト
var user = {
  id: '123456789',
  _name: 'Saya Sasamiya',
  get name() { return this._name;  },
  set name(value) { this._name = value; }
};

// オブジェクトのプロパティ追加・変更・削除を禁止
Object.freeze(user);

// プロパティの追加・変更・削除ができなくなる
user.age = 16;                  // 追加したようで実際には追加されていない。
user.name = 'Kirin Toudou';     // setterは呼び出されるが、_name の変更ができない。
delete user._name;              // プロパティ削除もできない。

Object.preventExtensions

指定されたオブジェクトの拡張を抑止します。拡張は抑止しますが、プロパティの変更・削除は出来る点に注意してください。

構文

Object.preventExtensions(obj)

引数

obj: {object}
拡張を抑止したいオブジェクト。

戻り値

: {object}
拡張を抑止したオブジェクト。元のオブジェクトと同じ。

利用例

// 元のオブジェクト
var user = {
  id: '123456789',
  name: 'Saya Sasamiya'
};

// オブジェクトの拡張を禁止
Object.preventExtensions(user);

// プロパティの追加ができなくなる
user.action = function () {
  // 何か処理...
};

Object.isSealed

指定されたオブジェクトが封印されているかどうかを検証します。

構文

Object.isSealed(obj)

引数

obj: {object}
封印されているかどうか検証したいオブジェクト。

戻り値

: {boolean}
指定されたオブジェクトが封印されている場合 true、それ以外の場合 false。

利用例

if (Object.isSealed(user)) {
  console.log('sealed.');
}

Object.isFrozen

指定されたオブジェクトが凍結されているかどうかを検証します。

構文

Object.isFrozen(obj)

引数

obj: {object}
凍結されているかどうか検証したいオブジェクト。

戻り値

: {boolean}
指定されたオブジェクトが凍結されている場合 true、それ以外の場合 false。

利用例

if (Object.isFrozen(user)) {
  console.log('frozen.');
}

Object.isExtensible

指定されたオブジェクトの拡張が可能かどうかを検証します。

構文

Object.isExtensible(obj)

引数

obj: {object}
拡張可能かどうか検証したいオブジェクト。

戻り値

: {boolean}
指定されたオブジェクトが拡張可能な場合 true、それ以外の場合 false。

利用例

if (Object.isExtensible(user)) {
  console.log('extensible.');
}

Object.getOwnPropertyDescriptor

指定されたオブジェクトのプロパティに関するプロパティディスクリプタを取得します。取得したプロパティディスクリプタは元のインスタンスのコピーとなるため、変更しても元のオブジェクトの設定は変更されません。変更したい場合は Object.defineProperty を利用して変更します。

構文

Object.getOwnPropertyDescriptor(obj, prop)

引数

obj: {object}
プロパティディスクリプタを取得したいプロパティを持つオブジェクト。
prop: {string}
プロパティディスクリプタを取得したいプロパティ名。

戻り値

: {object}
プロパティディスクリプタ情報がまとめられたオブジェクト。

利用例

// 元のオブジェクト
var user = {
  id: '123456789',
  name: 'Saya Sasamiya'
};

// プロパティディスクリプタの取得
var propdesc = Object.getOwnPropertyDescriptor(user, 'name');

// propdesc -> Object {value: "Saya Sasamiya", writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyNames

指定されたオブジェクトで列挙可能および列挙不可能なプロパティをすべて取得します。

構文

Object.getOwnPropertyNames(obj)

引数

obj: {object}
列挙可能不可能にかかわらずプロパティを列挙したいオブジェクト。

戻り値

: {string[]}
プロパティ名の配列

利用例

// 元のオブジェクト
var user = Object.create({
    id: '123456789',
    name: 'Saya Sasamiya'
  }, {
    age: {
      enumerable: false,
      value: 16
    },
    action: {
      enumerable: true,
      value: function () {
        // 何か処理...
      }
    }
  });

// "getOwnPropertyNames" は指定されたオブジェクト直属のプロパティはすべて列挙する
Object.getOwnPropertyNames(user);
// -> ["age", "action"]

// "keys" は指定されたオブジェクトのプロパティのうち enumerable:true を列挙する
Object.keys(user);
// -> ["action"]

配列

末尾カンマを無視

オブジェクト同様に配列も末尾のカンマを無視するようになります。

var arr = [1,2,3,4,,,];

メソッドの追加

Array に以下のメソッドが追加されました。詳しくは各メソッドの説明で見ていきます。

Array.isArray
Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

Array.isArray

指定されたオブジェクトが配列かどうかを検証します。配列であれば true を、配列でなければ false を返します。

構文

Array.isArray(obj)

引数

obj: {object}
配列かどうか判定したいオブジェクト。

戻り値

{boolean}: 指定されたオブジェクトが配列の場合 true、それ以外の場合 false。

利用例

var arr = [1,2,3];
Array.isArray(arr)    // -> true

Array.prototype.indexOf

配列中から指定されたオブジェクトと一致する最初のインデックスを取得します。

構文

var index = array.indexOf(target [, fromIndex]);

引数

target: {object}
配列中から検索したい値。
fromIndex: {number}
検索を始めるインデックス。

戻り値

: {number}
配列中に指定されたオブジェクトが見つかった場合、該当のインデックス。見つからなかった場合 -1。

利用例

var arr = [3,1,4,1,5,9,2];

// 配列の先頭から 1 を探す
arr.indexOf(1);       // -> 1

// 配列インデックス 2 から 1 を探す
arr.indexOf(1, 2);    // -> 3

Array.prototype.lastIndexOf

配列中から指定されたオブジェクトと一致する最後のインデックスを取得します。

構文

var index = array.lastIndexOf(target [, fromIndex])

target: {object}
配列中から検索したい値。
fromIndex: {number}
逆向きに検索を始めるインデックス。負の値を指定した場合、配列末尾からの開始インデックスになる。

利用例

var arr = [3,1,4,1,5,9,2];

// 先頭から探して一番最後に 1 がある配列インデックス
arr.lastIndexOf(1);     // -> 3 

// 配列インデックス 2 から先頭に向かって検索して最初に 1 がある配列インデックス
arr.lastIndexOf(1, 2);  // -> 1

// 配列インデックスが後ろから 2番目 (=5) から先頭に向かって検索して最初に 1 がある配列インデックス
arr.lastIndexOf(1, -2); // -> 3

Array.prototype.every

配列に含まれる要素が指定されたチェック条件をすべて満たすかどうかを検証します。

構文

var valid = array.every(callback [, thisObject])

引数

callback: {Function (Object item, Number index, Array array)}
検証処理を行う関数を指定します。
thisObject: {object}
検証処理を行う関数の this オブジェクトを指定します。

戻り値

: {boolean}
すべての要素が条件を満たしていた場合 true、それ以外の場合 false。

利用例

var arr = [3,1,4,1,5,9,2];

var valid = arr.every(function (item, index, array) {
  return item % 2;
});    // -> false

Array.prototype.some

配列に含まれる要素に指定されたチェック条件を満たすものが存在するかどうかを検証します。要素中に１つでも満たすものがあれば true を返します。

構文

var valid = array.some(callback [, thisObject])

引数

callback: {Function (Object item, Number index, Array array)}
検証処理を行う関数を指定します。
thisObject: {object}
検証処理を行う関数の this オブジェクトを指定します。

戻り値

: {boolean}
条件を満たす要素があれば true、それ以外の場合 false。

利用例

var arr = [3,1,4,1,5,9,2];

var valid = arr.some(function (item, index, array) {
  return item % 2;
});    // -> true

Array.prototype.forEach

与えられた関数を配列の各要素に対して一度ずつ実行します。元の配列を変更することはありません。

構文

array.forEach(callback [, thisObject]);

引数

callback: {Function (Object item, Number index, Array array)}
検証処理を行う関数を指定します。
thisObject: {object}
検証処理を行う関数の this オブジェクトを指定します。

戻り値

: なし

利用例

var arr = [3,1,4,1,5,9,2];

// コンソールに配列の内容を表示する
arr.forEach(function (item, index, array) {
  console.log(item);
});

Array.prototype.map

与えられた関数を配列のすべての要素に対して実行し、その戻り値から新しい配列を作成します。

構文

var convert = array.map(callback [, thisObject]);

引数

callback: {Function (Object item, Number index, Array array)}
変換処理を行う関数を指定します。
thisObject: {object}
変換処理を行う関数の this オブジェクトを指定します。

戻り値

: {Array}
変換関数で変換された配列。

利用例

var arr1 = [3,1,4,1,5,9,2];

var arr2 = arr1.map(function (item, index, array) {
  return item * item;
});

console.log(arr2);    // -> [9, 1, 16, 1, 25, 81, 4]

Array.prototype.filter

与えられた関数を配列のすべての要素に対して実行し、合格した要素だけからなる新しい配列を作成します。

構文

var valid = array.filter(callback [, thisObject]);

引数

callback: {Function (Object item, Number index, Array array)}
フィルター処理を行う関数を指定します。
thisObject: {object}
フィルター処理を行う関数の this オブジェクトを指定します。

戻り値

: {Array}
フィルター関数でフィルターされた配列。

利用例

var arr1 = [3,1,4,1,5,9,2];

var arr2 = arr1.map(function (item, index, array) {
  return item * item;
});

console.log(arr2);    // -> [9, 1, 16, 1, 25, 81, 4]

Array.prototype.reduce

隣り合う2つの配列要素に対してインデックスが小さい方から大きい方へ順（左から右の順）に指定された関数を実行します。数学で言うところの漸化式処理が実行できます。処理に置いて元の配列の値が変化することはありません。

構文

var result = array.reduce(callback [, initial]);

引数

callback: {Function (Object previousItem, Object currentItem, Number index, Array array)}
処理を行いたい関数を指定します。
initial: {object}
初期値として与える値を指定します。

戻り値

: {object}
処理結果。

利用例

var arr = [3,1,4,1,5,9,2];

var result = arr.reduce(function (previousItem, currentItem, index, array) {
  var message = '';
  message += '[' + array.toString() + '] ';
  message += 'No.' + index + ' :';
  message += previousItem;
  message += '+';
  message += currentItem;
  message += '=';
  message += (previousItem + currentItem);
  console.log(message);

  return previousItem + currentItem;
});

/*
// ログ出力結果は以下の通り
> [3,1,4,1,5,9,2] No.1 :3+1=4
> [3,1,4,1,5,9,2] No.2 :4+4=8
> [3,1,4,1,5,9,2] No.3 :8+1=9
> [3,1,4,1,5,9,2] No.4 :9+5=14
> [3,1,4,1,5,9,2] No.5 :14+9=23
> [3,1,4,1,5,9,2] No.6 :23+2=25

// 結果値(=result)は以下の通り
> 25
*/

Array.prototype.reduceRight

隣り合う2つの配列要素に対してインデックスが大きい方から小さい方へ順（右から左の順）に指定された関数を実行します。処理自体は Array.prototype.reduce を逆順に実行するものになります。

構文

var result = array.reduceRight(callback [, initial]);

引数

callback: {Function (Object previousItem, Object currentItem, Number index, Array array)}
処理を行いたい関数を指定します。
initial: {object}
初期値として与える値を指定します。

戻り値

: {object}
処理結果。

利用例

var arr = [3,1,4,1,5,9,2];

var result = arr.reduceRight(function (previousItem, currentItem, index, array) {
  var message = '';
  message += '[' + array.toString() + '] ';
  message += 'No.' + index + ' :';
  message += previousItem;
  message += '+';
  message += currentItem;
  message += '=';
  message += (previousItem + currentItem);
  console.log(message);

  return previousItem + currentItem;
});

/*
// ログ出力結果は以下の通り
> [3,1,4,1,5,9,2] No.5 :2+9=11
> [3,1,4,1,5,9,2] No.4 :11+5=16
> [3,1,4,1,5,9,2] No.3 :16+1=17
> [3,1,4,1,5,9,2] No.2 :17+4=21
> [3,1,4,1,5,9,2] No.1 :21+1=22
> [3,1,4,1,5,9,2] No.0 :22+3=25

// 結果値(=result)は以下の通り
> 25
*/

文字列

プロパティアクセス

文字列に対してブラケットを用いた配列のようなアクセスができるようになりました。ただし、この記法を用いて文字を削除したり書き換えたりはできません。

利用例

"Hello World !"[3];  // -> 'l'

メソッドの追加

String にも以下のメソッドが追加されました。

String.prototype.trim

String.prototype.trim

文字列の前後にある空白を削除した文字列を取得します。その文字自身が変更されることはありません。全角空白やタブを削除できるかどうかはブラウザに依存するようです（Chrome 50 では削除していました）。

構文

text.trim();

引数

: なし

戻り値

: {string}
両端の空白が削除された文字列

利用例

"   foobar   ".trim();  // -> "foobar"

日付

メソッドの追加

Dateオブジェクトに以下のメソッドが追加されました。詳細はそれぞれの関数についての記載で見ていきます。

Date.now
Date.prototype.toISOString
Date.prototype.toJSON

Date.now

UTC（協定世界時）における 1970 年 1 月 1 日 00 時 00 分 00 秒から現在までの経過ミリ秒を取得します。

構文

var time = Date.now();

引数

: なし

戻り値

: {number}
UTC（協定世界時）における 1970 年 1 月 1 日 00 時 00 分 00 秒から現在までの経過ミリ秒。

利用例

var time = Date.now(); // (new Date()).getTime(); と同じ。

Date.prototype.toISOString

Webアプリケーションではよく使われる ISO8601 形式 (W3C-DTF 形式) の文字列で日付を取得します。以前はこの形式に変換する実装が必要（ string→Date 、 Date→string ）でしたが、ネイティブ化は嬉しいです。

構文

var text = date.toISOString();

引数

: なし

戻り値

: {string}
グリニッジ天文時（Z）における W3C-DTF (ISO8601) 形式の文字列を取得。

利用例

(new Date()).toISOString();    // "2016-06-05T07:03:22.407Z"

Date.prototype.toJSON

Dateオブジェクトを JSONシリアライズした値を取得します。実際は Date.prototype.toISOString() と同じ値が取得できます。

構文

var json = date.toJSON();

引数

: なし

戻り値

: {string}
グリニッジ天文時（Z）における W3C-DTF (ISO8601) 形式の文字列を取得。

利用例

(new Date()).toJSON();         // "2016-06-05T07:03:22.407Z"

関数

メソッドの追加

Function にも以下のメソッドが追加されました。 apply や call にも似ている this 問題を解決する手段です。

Function.prototype.bind

Function.prototype.bind

構文

func.bind(thisObject [, arg1, arg2, ...]);

引数

thisObject: {object}
関数が呼び出された際に this へ設定するオブジェクト。
arg1, arg2, ...: {object...}
関数を呼び出す際に先頭に引数として渡す値。

戻り値

: {Function}
呼び出した際の this を固定化した関数

利用例

var Timer = function () {
};

Timer.prototype._num = 0;

/**
* window.setTimeout から呼ばれるこの関数の this は
* bind() を用いない場合、 this = window。
* bind() で固定化した場合、 this = t (<- インスタンス化されたオブジェクト)。
*/
Timer.prototype.tick = function () {
  this._num += 1;
  console.log('tick : ' + this._num);
  this.start();
};

Timer.prototype.start = function () {
  // bind() で this を固定化する
  window.setTimeout(this.tick.bind(this), 1000);
};

var t = new Timer();
t.start();

JSON

ネイティブオブジェクトの追加

新規ネイティブオブジェクトとして JSON が追加されました。

JSON.parse

指定された JSON文字列をオブジェクトに変換します。

構文

var obj = JSON.parse(data);

引数

data: {string}
オブジェクトに変換したいJSON文字列。

戻り値

: {object}
オブジェクト

利用例

// サーバーから受信した JSONテキスト 等。
var data = '{"id":"123456789","name":"Saya Sasamiya"}';

// parse() で オブジェクト に変換。
var obj = JSON.parse(data);

JSON.stringify

オブジェクトを JSON文字列に変換します。

構文

var data = JSON.stringify(obj);

引数

obj: {object}
JSON文字列に変換したいオブジェクト。

戻り値

: {string}
JSON文字列

利用例

// クライアント側で作ったデータ
var obj = {
  id: '123456789',
  name: 'Saya Sasamiya'
};

// JSON文字列に変換 ... → AjaxでサーバーにPOST送信
var data = JSON.stringify(obj);

以上が "ECMAScript 3" と "ECMAScript 5" の違いになります。

実はすべてをあげきれているわけではなく、メインどころとなりそうな部分をピックアップしてのまとめです。今後は毎年 ECMAScript の改変を行っていくというウワサを小耳に挟んだのですが…どうなんでしょう？毎年改変されると JavaScript の仕様についていくのが大変ですが、改良が続けられているということはその分見込みもある気もします。今後も適当なタイミングでまとめていきたいと思います。

ではでは、本記事はここまでで…。

参考記事

Node.js で作る Webアプリケーション開発入門

実際の現場で今回の記事に記載の方法で実装することはあり得ないと思いますが、Node.js の基礎を知るための参考として記事にしてみました。この記事は、Node.js で実装する場合どのように実装および実行することで Webアプリケーションが開発できるのか、が理解できるようになるのが目的です。

この記事では以下のような前提で Node.js を用いた Webアプリケーション開発を行っていきたいと思います。前提を満たしていない場合は参考程度にこの記事を読んでいただければと思います。前提を満たしていれば、実際に試してみることをオススメします。

前提

Windows 環境
Node.js インストール済み (まだの場合はこちらを参照してください)

では、早速 Node.js で Webアプリケーション開発を行っていきたいと思います。

概要
プロジェクト作成
実装
実行（テスト）

概要

Node.js とは、Chrome V8 エンジン上に実装されたランタイムです。 …と、言われてもよくわからないですが、Javaで言う Apache + Tomcat、C# で言う IIS なイメージの認識です（間違ってたらゴメンなさい）。

Node.js を使った Webアプリケーション開発の大まかな流れは以下のような感じです。 Hello World を表示するだけなら簡単にできてしまいます。

プロジェクトルートディレクトリを作成
エントリポイントとなる JavaScriptファイルを作成
node コマンドで実行

以下ではそれぞれについてもう少し詳しく見ていきます。

プロジェクト作成

Visual Studio や Eclipse で言うような「プロジェクト」は存在しませんが、これから開発する Webアプリケーションのルートディレクトリを作成します。今回は「WebApplication1」と言う名前のルートディレクトリにしています。あわせて記載している「app.js」はこの後の実装で作成する JavaScript ファイルになります。今回のサンプルプログラムで作るファイルはこれだけになります。

プロジェクト構成

WebApplication1/
  app.js

実装

前述のプロジェクト作成で作成したディレクトリ直下に以下の JavaScript ファイルを作成します。

app.js

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World');
}).listen(3000);

console.log('Server running at http://localhost:3000');

実行（テスト）

コマンドプロンプトを起動して以下の手順を行います。

プロジェクトルートディレクトリへ移動
```
cd D:\workspace\WebAplication1
```
node <JavaScriptファイル> を実行

今回実行する JavaScript ファイルは「app.js」になるので、以下のようなコマンドを実行します。
```
node app.js
```
ブラウザで http://localhost:3000/ へアクセス

以上で Node.js を使った Webアプリケーション開発の基本になります。

参考記事

bower.json の仕様 (日本語)

（この記事は bower/spec の json.md をベースに作成しています。 bower.json を作成する際、その書き方の参考になればと思います。）

bower.json は作成しようとしているパッケージが他のパッケージとどのような依存関係にあるかを設定するものです。これは Node.js の package.json、 Ruby の Gemfile と似ています。

bower.json は bower init コマンドを利用することでウィザードに従って作成することができます。

{
  "name": "blue-leaf",
  "description": "Physics-like animations for pretty particles",
  "main": [
    "js/motion.js",
    "sass/motion.scss"
  ],
  "dependencies": {
    "get-size": "~1.2.2",
    "eventEmitter": "~4.2.11"
  },
  "devDependencies": {
    "qunit": "~1.16.0"
  },
  "moduleType": [
    "amd",
    "globals",
    "node"
  ],
  "keywords": [
    "motion",
    "physics",
    "particles"
  ],
  "authors": [
    "Betty Beta <bbeta@example.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "homepage": "http://betty.github.io/blue-leaf/index.html",
  "repository": {
   "type": "git",
    "url": "git://github.com/betty/blue-leaf.git"
  },
  "resolutions": {
    "angular": "1.3.0-beta.16"
  },
  "private": true
}

プロパティ名型説明

name

string

必須

Bower リポジトリに登録するパッケージ名。

ユニークな名前であること。
シンプルさ、一貫性、互換性のために、分かりやすい名前であること。
小文字の "a-z"、数字 "0-9"が含められる。
ダッシュ "-"、ドット "." も利用できるが最初と最後には使えない。
連続したダッシュ "-" 、ドット "." は利用できない。
50文字未満であること。

description

string

推奨

140文字までの任意の文字列。

簡単な説明を付けることで作成したパッケージを検索および特定しやすくします。パッケージがどう作られているかではなく、どのようなものかを記載します。 CLIで検索した結果やWebサイトのパッケージ検索結果に表示されます。

main

string / string[]

推奨

パッケージを利用する際に必要となるエントリーポイントファイルを記載します。ファイルタイプごとに１ファイルずつ指定できます。

エントリーポイントファイルではモジュールのエクスポートやインポートがあります。 Bower では直接 main ファイルを利用しませんが、bower list --json や bower list --paths コマンドを使用するときリストアップを行います。

例えば以下のようなパッケージを準備していたとします。

package
  js/
    motion.js
    run.js
    walk.js
  sass/
    motion.scss
    run.scss
    walk.scss
  img/
    motion.png
    walk.png
    run.png
  fonts/
    icons.woff2
    icons.woff
  dist/
    movement.js
    movement.min.js
    movement.css
    movement.min.css

motion.js は run.js と walk.js をインポートするモジュールで、motion.scss は run.scss と walk.scss をインポートしているモジュールの場合、main は次のようになります。

"main": [
  "js/motion.js",
  "sass/motion.scss",
]

画像およびフォントファイルも JS や Sass ファイルの中で参照されているかもしれませんが、エントリーポイントではないため main ファイルではありません。

ビルド前の配布ファイルを指定してください。
縮小ファイルは含めないでください。
画像、フォント、音声、動画といったリソースファイルは含めないでください。
ファイル名にバージョンを含めないでください。（悪い例：package.1.1.0.js；良い例：package.js）
js/*.js といったワイルドカードは使えません。

dependencies

object

dependencies はパッケージ名と単純なハッシュ

キーは有効なパッケージ名でなくてはなりません。
バリューは有効な semver範囲、Git URL、URL （tarball や zipball を含む）でなければなりません。
Git URL は末尾にハッシュ"#"を付けて参照 (リビジョンを示す SHA、ブランチ、タグ）に制限を付けることができます。
例：https://github.com/owner/package.git#branch
バリューは owner/package という短縮表記が利用できます。デフォルトでは短縮形は GitHub の git://github.com/%owner%/%package%.git を参照します。この設定は .bowerrc の shorthand_resolver で変更することもできます。
ローカルパスはローカル開発のための値として使われますが、Bowerリポジトリへ登録する際は許可されません。

devDependencies

object

dependencies を同じルールです。

テストフレームワークやビルドドキュメントといった開発時でしか利用しないパッケージを記載します。

moduleType

string / string[]

推奨

main JavaScriptファイルで定義されるモジュールの種別を記載します。以下の種別から１つないし複数指定できます。

`globals`	`window.namespace` や `this.namespace` を利用してグローバル名前空間に公開される JavaScriptモジュール。
`amd`	`define()` を利用するRequireJS のような AMD 互換する JavaScript モジュール。
`node`	`module.exports` で公開する node や CommonJS 互換の JavaScriptモジュール。
`es6`	`export` や `import` を利用する ECMAScript6 互換の JavaScriptモジュール。
`yui`	`YUI.add()` を利用する YUI Modules 互換の JavaScriptモジュール。

keywords

string[]

推奨

"name" と同じフォーマットで指定します。

キーワード検索で使われます。パッケージ名が分からなくても簡単にパッケージを検索できるようにします。

authors

string[] / object[]

パッケージを作成している著者のリストを指定します。以下のどちらかのフォーマットで指定します。

"authors": [
  "John Doe",
  "John Doe <john@doe.com>",
  "John Doe <john@doe.com> (http://johndoe.com)"
]

"authors": [
  { "name": "John Doe" },
  { "name": "John Doe", "email": "john@doe.com" },
  { "name": "John Doe", "email": "john@doe.com", "homepage": "http://johndoe.com" }
]

license

string / string[]

推奨

SPDX ライセンスリストの識別子 (Identifier) またはライセンスへのパスか URL を指定します。

ignore

string[]

推奨

あなたのパッケージをインストールする際、Bower が無視するファイルのリストを指定します。

(*) シンボリックリンクは常に無視されますが、bower.json は無視されません。

無視するルールは gitignore pattern spec と同じルールに従います。

homepage string パッケージに関する情報があるURLを記載します。指定がない場合、GitHubプロジェクトにフォールバックします。

repository

object

ソースコードがあるリポジトリを指定します。

resolutions

object

パッケージ間で競合が発生した場合に自動解決させる依存バージョンを指定します。

private boolean true に設定した場合、 Bower はパッケージの公開を拒否します。これは間違ってプライベートリポジトリを公開することを防ぐために利用します。

Bower のパッケージインストール先を変更する方法

デフォルト設定のままだと "bower_components" 配下にインストールされますが、インストール先のフォルダ名を変更したいケースがあるかと思います。これに対して、Bower には ".bowerrc" という設定ファイルを準備することでパッケージインストール先を変更できる仕組みがあります。ここでは ".bowerrc" を利用してインストール先を変更する方法を見ていきます。

.bowerrc 概要
.bowerrc を追加反映するタイミング
- 新規プロジェクト作成時に .bowerrc を追加する場合
- 既存プロジェクトに .bowerrc を追加する場合

.bowerrc 概要

プロジェクトのルートディレクトリ直下に以下に載せるサンプルのような .bowerrc ファイルを作成します。 Bower 自体に作成するためのコマンドが存在しないので、普通にテキストエディタで作成して保存します。ファイルは SHIF-JIS でも動きましたが、他の JavaScript ファイルにあわせて UTF-8 が望ましいと思います。

.bowerrc 自体は配置さえされてしまえば即時反映されるため、配置以降の Bower コマンド実行に反映されます。

配置先のサンプル

PROJECT_ROOT/
│   .bowerrc
│   bower.json
│   index.html
│
├─ library/
│    
├─ images/
│    
├─ javascripts/
│    
└─ stylesheets/

.bowerrc サンプル

{
  "directory": "library"
}

.bowerrc ファイルの設定項目は他にもありますがここでは取り上げていません。詳しくは bower/spec を参照してください。

.bowerrc を追加反映するタイミング

.bowerrcを作成、配置した後はその設定を反映させる手順になります。設定反映には2つの状況「新規プロジェクト作成時に .bowerrc を追加する場合」と「既存プロジェクトに .bowerrc を追加する場合」があるかと思うので、それぞれの場合について以下で見ていきます。

新規プロジェクト作成時に .bowerrc を追加する場合

新規プロジェクト作成時に最初から .bowerrc を考慮して進められると一番キレイだと思います。ざっくりと作業手順は以下のようになるかと思います。

bower.json を作成するタイミングは .bowerrc を作成するタイミングやパッケージインストールするタイミングと前後しても問題ないと思いますが、 bower install を実行する前には作成しておかないと意味がありません。

プロジェクトルートディレクトリを作成
bower.json を作成
.bowerrc を作成
bower install で必要なパッケージインストール

既存プロジェクトに .bowerrc を追加する場合

Bower ですでにパッケージをインストール済みの場合、デフォルト保存先である "bower_components" 配下のファイルを新しく指定したフォルダ配下に移動します。ファイルを移動した後は bower list を実行して Bower で認識できているかどうか確認します。既存の場合はファイル配置場所が変わっているので HTMLファイルや CSSファイルの参照先を変更する必要もあります。

.bowerrc を作成
"bower_components" から新しいディレクトリ配下へファイル移動
bower list で動作確認
HTMLファイルの scriptタグ、linkタグを修正

Bower のパッケージを公開する方法

最近の Webフロントエンド開発では Bower を使っている人が増えているのでしょうか。そんな Bower に自分が作ったパッケージを公開する手順についてまとめてみました。

概要
bower.json の作成
GitHub プロジェクトにコミット & タグ作成
Bower リポジトリに公開

概要

チートシート的にコマンドだけ並べると以下のような流れで Bowerリポジトリに公開します。ここでは概要なので細かいコマンドの説明や注意点は以降に見ていきます。

bower.json の作成
```
bower init
```
GitHubへコミット
```
git commit
```

GitHubにタグ作成

git tag <バージョン>
git push origin --tags

Bowerリポジトリに公開

bower register <パッケージ名> <GitHubプロジェクトURL>

bower.json の作成

Bower にパッケージ公開するにあたり、公開するパッケージがどのようなものであるかを定義しておく必要があります。ちょうどこれを行うのが "bower.json" です。 "bower.json" ではパッケージ名、著者、ホームページ、他パッケージとの依存関係等の情報を保存できます。

公開したいパッケージを作成しているディレクトリへ移動
```
> cd /d "D:\workspace\sample_prj"
```
bower init コマンドを実行
```
> bower init
```
ウィザードの質問に答えていくと bower.json が作成される

初期化時の質問については別記事に記載しているのでご参照ください。

GitHub プロジェクトにコミット & タグ作成

GitHub にコミット

コミットはコマンドからでも UIからでも行えます。

コマンドからコミット

コマンドからのコミットは単純に git commit で実行できます。
```
git commit
```
UIからコミット

[Commit to master]ボタンを押下すればコミットできます。

タグ作成

タグ作成は残念ながら GUI で行えません。 Shell から行う必要があります。 PowerShell またはコマンドプロンプトを起動して、プロジェクトが存在するパスへ移動し、以下のコマンドを実行します。 GitHub for Windows を利用している場合、プロジェクト名を右クリックすると「Open in Git Shell」という選択肢があるので、これを実行するとプロジェクトフォルダを最初のディレクトリとして PowerShell が起動します。

実行するコマンド

git tag <バージョン>
git push origin --tags

コマンドサンプル

git tag v1.0.0
git push origin --tags

バージョンの付け方は「セマンティックバージョニング」に従う必要があります。「セマンティックバージョニング」の詳しい説明は本家サイトを参照いただければと思います。概要だけ説明すると、以下の3点に従ってバージョン付けを行います。ちなみにバージョン番号の前に "v" を付けるかどうかについて、Bower においては任意だそうです。

セマンティックバージョニング

APIの変更に互換性のない場合はメジャーバージョンを、
後方互換性があり機能性を追加した場合はマイナーバージョンを、
後方互換性を伴うバグ修正をした場合はパッチバージョンを上げます。

セマンティックバージョニングの詳細は「セマンティックバージョニング」に記載があるのでご確認ください。

Bower リポジトリに公開

前述のタグ作成まで終わったら、いよいよ Bower のリポジトリへ公開です。引き続き、以下のコマンドを実行することで公開できます。

実行するコマンド

bower register <パッケージ名> <GitHubプロジェクトURL>

コマンドサンプル

bower register jquery.depend git://github.com/garafu/jquery.depend.git

GitHubプロジェクトへのURLは GitHub の以下の場所から取得できるURLにおいてスキーマを https → git へ変更したものになります。

以上で Bower リポジトリへパッケージの公開ができたと思います。車輪の再発明は避けたいので…世界中の人たちと便利なものを作っていけるといいですね ^^

Bower の使い方

Bower の基本的な使い方およびよく使うコマンドについてまとめてみました。初心者向け Bower 入門といったところでしょうか。

概要
package 操作
bower.json 利用
おまけ
- bower.json 初期化時の質問

概要

Bower を利用した Webフロントエンド開発を行う場合、大まかには以下のような流れで始めていきます。以下の流れを読むことでざっくり Bower を利用するイメージは出来るかと思います。

ワークディレクトリの作成

以下のサンプルコマンドでは "sample" という名前のワークディレクトリを作成し、そのフォルダへ移動しています。以下の例ではすべてコマンドで実行していますが、エクスプローラーでフォルダを作成して該当フォルダへ移動しても良いです。
```
> cd /d "D:\workspace"
> mkdir sample
> cd sample
```
初期化（bower.json の作成）

ウィザードに従って質問に答えていくことで bower.json を作成します。ここで作成する bower.json は、この後パッケージをインストールした際にパッケージ情報を書き込む先になります。ウィザードで質問される詳しい内容は以下の "bower.json 初期化時の質問を参照ください。
```
> bower init
```
パッケージのインストール

ここではサンプルとして jQuery の 1.x をインストールしてみます。パッケージインストールは bower install <パッケージ名>#<バージョン> で指定できます。 --save のオプションを指定することで bower.json にインストールしたパッケージ情報を保存できます。
```
> bower install jquery#1 --save
```
パッケージの利用

ワークディレクトリ "sample" の直下に "index.html" を作成する場合、以下のサンプルコードのような実装を行うとインストールしたパッケージが利用できます。単純に scriptタグ で JavaScript を呼び出すだけです。

/sample/index.html
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>sample html title</title>
    <script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    sample html body
</body>
</html>
```

以上で一通りの利用はできるかと思います。細かなコマンドの使い方はこの後に記載していきます。

package 操作

以下ではパッケージ操作に関するコマンドの利用方法を少し詳しく見ていきます。

パッケージの追加

bower.json に従ってパッケージをインストールする

引数に何も指定しない場合、ワークディレクトリに存在する bower.json に記載されているパッケージを集めてきます。
```
> bower install
```
"jquery" パッケージをインストールする

パッケージ名を指定すると該当のパッケージで最新のバージョンをインストールします。
```
> bower install jquery
```
"jquery" で指定バージョンのパッケージをインストールする

特定のバージョンをインストールしたい場合は # に続けてバージョン番号を記載します。
```
> bower install jquery#1
```
パッケージ公開されていない GitHub 上のパッケージをインストールする

Bower に公開されていないパッケージでも GitHub のプロジェクト名を指定することでインストールが可能です。
```
> bower install garafu/jquery.depend
```
GitHub 上のパッケージをバージョン指定してインストールする

GitHub のプロジェクト名に続いてバージョン指定することができます。
```
> bower install garafu/jquery.depend#1.1.0
```

パッケージの削除

インストールしたパッケージを削除する

bower uninstall <パッケージ名> でアンインストールできます。インストールとアンインストールを連続で行うとなぜかうまく動作しません。いったんコマンドプロンプトを閉じて再度アンインストールを実行するとうまくいくことが多いです。
```
> bower uninstall jquery
```

パッケージの更新

指定したパッケージを最新バージョンにアップデートする

単純に update コマンドで最新版があればアップデートを行います。ただし、最初にインストールした際に指定したバージョン条件に依存するため、パッチバージョンまで指定していた場合はアップデートされません。ちなみにインストール時に指定したバージョン条件は該当パッケージ配下にある bower.json の _target の値を確認するとわかります。（逆に言えばこの値を変更すればバージョン条件を変更できます。）
```
> bower update jquery
```

利用可能なパッケージの検索

パッケージを検索する

searchコマンドで登録されているパッケージに対してパッケージ名の部分一致検索を行って結果を一覧表示できます。
```
> bower search jquery
```

インストール済みパッケージの一覧表示

インストール済みパッケージ一覧を表示する

list コマンドでインストール済みパッケージの一覧を確認できます。同時に最新バージョンがでていないかの確認が行われるため、最新版がでているかどうかも確認できます。
```
> bower list
```

bower.json 利用

初期化（bower.json の作成）

bower.json を初期化します。

init コマンドを利用してウィザードに従って bower.json を初期化します。ウィザードで問われる細かな質問は以下の "bower.json 初期化時の質問" をご参照ください。
```
> bower init
```

bower.json へパッケージの追加

bower.json へインストールしたパッケージの依存関係情報を保存する

パッケージインストール時に --save オプションを利用することで bower.json へ保存できます。開発時でしか利用しないパッケージであれば --save-dev オプションを利用します。
```
> bower install jquery --save
```
```
> bower install jquery --save-dev
```

bower.json からパッケージの削除

bower.json からインストールしたパッケージの依存関係情報を削除する

パッケージアンインストール時に --save オプションを利用することで bower.json へ反映できます。開発時でしか利用しないパッケージであればインストール時と同様に --save-dev オプションで反映できます。
```
> bower uninstall jquery --save
```
```
> bower uninstall jquery --save-dev
```

おまけ

bower.json 初期化時の質問

bower.json の初期化時 (init コマンド実行時) にウィザードで質問される内容について以下にまとめます。何も指定しない時のデフォルト値は () 内の値または () 内で大文字になっている値です。

質問	概要
? name (<ディレクトリ名>)	必須レジストリに登録する際のパッケージ名を指定します。
? description	推奨最大140文字までの文字列。ユーザーがパッケージを特定できるような簡易な説明を記載します。パッケージがどのようにできているかではなく、どんなことができるかを記載します。
? main file	推奨パッケージのエントリーポイントファイルを指定します。 bower.json では複数指定できるようですが、ウィザードからは複数指定できないようです。
? keywords	推奨パッケージを検索しやすくするためのキーワードを指定します。カンマ区切りで複数指定できます。
? authors	パッケージ作成にかかわる製作者を指定します。カンマ区切りで複数指定できます。 `John Doe <john@doe.com> (http://hondoe.com)`
? license (MIT)	推奨パッケージ利用する際のライセンスを特定できる名前または URL、パスを指定します。
? homepage	作成するパッケージに関する詳細を記載したホームページのURLを指定します。特に指定がなければ GitHub プロジェクトにフォールバックします。
? set currently installed components as dependencies? (Y/n)	既に配置済みのパッケージを dependencies に追加するかどうか新規作成であればそもそも追加しているパッケージなどないので Y でも N でも変わりません。既存の JavaScript プロジェクトに対して bower.json を作成する場合、Y にすると良いと思います。
? add commonly ignored files to ignore list? (Y/n)	一般的に無視するファイルを ignore リストに追加するかどうか Y 一択で。
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)	このパッケージを間違って一般公開してしまわないようプライベートとして設定するかどうか作成するパッケージの事情にあわせて公開/非公開を設定してください。
? Looks good? (Y/n)	これまでに答えてきた内容をもとに bower.json のサンプルができているので、問題なければ Y を選択します。

参考記事

Bower のインストール (Windows)

Windows で Bower が利用できるようにする手順を載せます。 Bower を使う際、 npm および git がインストールされていることが前提となるので、以下の手順を始める前にあらかじめインストールをしておく必要があります。

Bower とは
Bower 利用時の要件
インストール
動作確認

Bower とは

Webフロントエンド開発向けのパッケージマネージャーです。

Webサイト構築で利用するライブラリやフレームワークは日々開発が行われてバージョンアップを繰り返しています。これらを管理してくれるツールが Bower です。具体的には HTML, CSS, JavaScript, フォント, 画像と言ったコンポーネントを管理できます。ファイル結合や圧縮はできないようです。

ちなみに… "Bower" という名前ですが "bowerbird (ニワシドリ。庭師鳥)" からきているそうです。ニワシドリはその名の通り庭師のようにいろいろなもを集めてきて素晴らしい巣を作ります。 Bower はまさにそうしたものを目指したツールです。

Bower 利用時の要件

Bower をインストールおよび利用するためには以下のアプリケーションが導入されている必要があります。 Bower のインストールを始める前に以下のアプリケーションをインストールしておきましょう。

前提

インストール

前提として npm および git がインストールされている必要があります。 npm がインストールされていなければこちらから、 git がインストールされていなければこちらからインストールを行ってください。

npm install -g bower を実行
インストールが始まるのでしばらく待つ…
インストール完了

動作確認

動作確認としてコマンドプロンプト上で bower -version を実行します。正しくインストールできていれば、インストールされた Bower のバージョンが表示されます。

ESモジュール概要

基本構文

import

構文

利用例

export

構文

利用例

JavaScript の クラス 概要

クラス の 定義

クラス宣言

構文

コンストラクタ

構文

利用例

メソッド

構文

利用例

プロパティ

構文

利用例

継承

構文

利用例

クラス の 利用

インスタンス化

構文

利用例

データ型

8進数 (Octal) / 2進数 (Bynary) リテラル

構文

利用例

テンプレートリテラル

構文

利用例

Unicodeコードポイントエスケープ

構文

利用例

オブジェクトリテラル拡張

利用例

正規表現 の "y" および "u" フラグ

利用例

Symbol型

構文

利用例

宣言

const

構文

利用例

let

構文

利用例

式と演算子

分割代入(Destructing assignment)

構文

利用例

スプレッド演算子 (Spread Operator)

構文

利用例

for ... of 文

構文

利用例

関数

デフォルト引数 (Default Parameters)

構文

利用例

残余引数 (Rest Parameters)

構文

利用例

アロー関数

構文

利用例

strictモード

strictモード の 適用

strictモード を スクリプト全体 に 適用する

strictモード を 特定関数のみ に 適用する

オブジェクト

getter / setter

構文

利用例

JavaScript のクラス概要

クラスの定義

クラスの利用

正規表現の "y" および "u" フラグ

strictモードの適用

strictモードをスクリプト全体に適用する

strictモードを特定関数のみに適用する

末尾カンマを無視

予約後をプロパティ名に指定可能

メソッドの追加

末尾カンマを無視

メソッドの追加