（ この記事は package.json - Specifics of npm's package.json handling をベースに作成しています。 package.json を作成する際、その 書き方 の 参考 になればと思います。 ）

このドキュメントは pakage.json に何を書くべきか について記載しています。 package.json は単に JavaScript オブジェクトリテラルであるだけでなく JSON でなければなりません。

このドキュメントに記載した動作の多くは npm-config に記載された設定の影響を受けます。

{
  "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
}

{
  "url": "https://github.com/owner/project/issues",
  "email": "project@hostname.com"
}

{
  "license": "BSD-3-Clause"
}

{
  "license": "(ISC OR GPL-3.0)"
}

{
  "license": "SEE LICENSE IN <filename>"
}

{
  "name": "Barney Rubble",
  "email": "barney@rubble.com",
  "url": "http://barnyrubble.tumblr.com/"
}

"Barney Rubble <Barney@rubble.com> (http://barneyrubble.tumblr.com/)"

"bin": {
  "myapp": "./cli.js"
}

"bin": {
  "name": "my-program",
  "version": "1.2.5",
  "bin": "./path/to/program"
}

"bin": {
  "name": "my-program",
  "version": "1.2.5",
  "bin": {
    "my-program": "./path/to/program"
  }
}

{
  "name": "foo",
  "version": "1.2.3",
  "description": "A packaged foo fooer for fooing foos",
  "main": "foo.js",
  "man": "./man/doc.1"
}

{
  "name": "foo",
  "version": "1.2.3",
  "description": "A packaged foo fooer for fooing foos",
  "main": "foo.js",
  "man": ["./man/foo.1", "./man/bar.1"]
}

{
   "lib": "src/lib",
   "bin": "local/binaries",
   "doc": "doc" 
} 

"repository": {
  "type" : "git",
  "url" : "https://github.com/npm/npm.git"
}

"repository": {
  "type" : "svn",
  "url" : "https://v8.googlecode.com/svn/trunk/"
}

"repository": "npm/npm"

"repository": "gist:11081aaa281"

"repository": "bitbucket:example/repo"

"repository": "gitlab:another/repo"

"scripts" : {
  "install" : "scripts/install.js",
  "uninstall" : "scripts/uninstall.js"
}

{
  "name" : "foo",
  "config" : {
    "port" : "8080"
  }
}

"dependencies" : {
  "foo" : "1.0.0 - 2.9999.9999",
  "bar" : ">=1.0.2 <2.1.2",
  "baz" : ">1.0.2 <=2.3.4",
  "boo" : "2.0.1",
  "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
  "asd" : "http://asdf.com/asdf.tar.gz",
  "til" : "~1.2",
  "elf" : "~1.2.3",
  "two" : "2.x",
  "thr" : "3.3.x",
  "lat" : "latest",
  "dyl" : "file:../dyl"
}

git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish

{
  "name": "foo",
  "version": "0.0.0",
  "dependencies": {
    "express": "visionmedia/express",
    "mocha": "visionmedia/mocha#4727d357ea"
  }
}

{
  "name": "baz",
  "dependencies": {
    "bar": "file:../foo/bar"
  }
}

{
  "name": "ethopia-waza",
  "description": "a delightfully fruity coffee varietal",
  "version": "1.2.3",
  "devDependencies": {
    "coffee-script": "~1.6.3"
  },
  "scripts": {
    "prepublish": "coffee -o lib/ -c src/waza.coffee"
  },
  "main": "lib/waza.js"
}

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x"
  }
}

├── tea-latte@1.3.5
└── tea@2.2.0

try {
  var foo = require('foo')
  var fooVersion = require('foo/package.json').version
} catch (er) {
  foo = null
}
if ( notGoodFooVersion(fooVersion) ) {
  foo = null
}

// .. then later in your program ..

if (foo) {
  foo.doFooThings()
}

"engines" : {
  "node" : ">=0.10.3 <0.12"
}

"os": [
  "darwin", "linux"
]

"os": [
  "!win32"
]

"cpu": [
  "x64", "ia32"
]

"cpu": [
  "!arm", "!mips"
]

参考記事

• npm - package.json : Specifics of npm's package.json handling

npm の基本的な使い方をまとめておきます。

プロジェクト の 初期化

現在のディレクトリをルートディレクトリとして package.json を作成します。 package.json には今から作ろうとしているプロジェクトで利用するパッケージ情報 (以下の インストール を行った情報) が記載されます。

基本的には質問に答えて入力していくだけで package.json が初期化されます。 もし、すでに package.json が存在している場合、記載されているパッケージ情報に従って必要なパッケージをダウンロードおよび配置設定します。

npm init

package.json に依存関係を保存する場合、インストール時に --save オプションを付与して保存します。

パッケージ の インストール

パッケージ名 %PACKAGE_NAME% を指定して現在のプロジェクトにパッケージをインストールします。 --save オプションを付けると、 package.json に依存関係情報を書き込みます。

npm install %PACKAGE_NAME%

npm install %PACKAGE_NAME% --global

ローカルインストール と グローバルインストール

パッケージインストール先は 「ローカル」 と 「グローバル」 の2種類があります。 --global または -g オプションを付けるかどうかでローカルインストールとグローバルインストールを切り替えられます。 それぞれの違いは以下の通りです。

ローカルインストール (--global オプションなし)

• 現在のプロジェクトの依存関係として取り込む ( Node.js の require で使う) 場合はローカルインストールします
• インストール先は現在のプロジェクト配下に作られる node_modules フォルダ配下にインストールされます
• コマンドとして実行する場合はパスを通して実行する必要があります

グローバルインストール (--global オプションあり)

• コマンドラインツール (e.g. bower, grunt, jshint) はグローバルインストールします
• インストール先はデフォルトなら以下の場所

  C:\Users\<UserName>\AppData\Roaming\npm\node_modules

• パスが通っているので実行はコマンドをそのまま叩けば実行できる

パッケージ の アンインストール

インストール済みのパッケージを削除します。

npm uninstall %PACKAGE_NAME%

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

インストールされているパッケージの一覧を表示します。

npm ls

パッケージ の 更新

インストールされているパッケージに新しいバージョンがあれば更新を行います。

npm update %PACKAGE_NAME%

よく使うコマンドに絞ってまとめてみました。 とりあえずここに記載のコマンドが理解できていれば何とかはなるかと思います。

Node.js だけでは 実践向きではないので、 Express と EJS を組み合わせてもう少し実践で使えるようなサンプルを作ってみました。 Express は Node.js 向けの Webアプリケーション開発フレームワーク で、ミドルウェアのような存在です。 EJS は テンプレートエンジン で、Java で言うところの JSP に近い コーディング ができます。 今回はさらにフロントエンドでよく使われる jQuery、 Bootstrap を組み込んで実装しています。

実用…となるとまだまだ足りない部分がありますが、初心者向けのサンプルとしてはある程度網羅できたものになっているかと思います。

概要

本記事では単純な index ページを返却する Webアプリケーションを作成します。 開発環境は サーバーサイドを Node.js + Express + EJS 、クライアントサイドを jQuery、 Bootstrap が使える環境とするので、 Webアプリケーション開発の雛型になるかと思います。

利用するフレームワークおよびライブラリ

• パッケージ管理
  • npm
  • Bower
• サーバーサイド
  • Node.js
  • Express
  • EJS
• クライアントサイド
• jQuery
• Bootstrap

作成する Webアプリケーション は、「単純な画像入りトップページを表示するもの」です。 出来上がった Webアプリケーション へアクセスした際のイメージは以下のようなものです。

また、今回のプロジェクトで作成するフォルダおよびファイルの全体像は以下の通りです。

前提条件

以下のアプリがインストールされた Windows 環境

• Node.js / npm
• Bower
• Git

環境は Windows で開発を行います。 Node.js に関連する上に記載のアプリは事前にインストール済みである前提で進めます。 まだインストールしていない場合は先にインストールをお願いいたします。 それぞれのインストール方法や手順については以下の記事を参考にしていただければと思います。

• Node.js / npm の インストール (Windows)
• Bower の インストール (Windows)
• Git for Windows の インストール
• GitHub for windows の インストール と 設定

なお、エディタは IDE (Visual Studio や Eclipse) を利用して開発してもよいのですが…裏側で実装されたもろもろが何を示しているのか分からないのでテキストエディタで進めます。

環境作成

開発に必要なディレクトリ、パッケージを準備します。 パッケージは依存関係があるのでバージョンには注意します。

1. プロジェクトディレクトリを作成。

   ここでは「sample」をルートディレクトリとして作成します。 作成する場所はローカルPCの好きな場所で問題ありません…が、後でコマンド叩くとき日本語があると不便なので英語のパスになるような場所に作成することをオススメします。 なお、以下のサンプルは D:\Work\sample へ作成しているのを前提で進めます。

2. デフォルトのディレクトリ構成として以下のフォルダ構成を準備します。

   ディレクトリ構成

   sample
     │
     ├─public
     │  ├─images
     │  ├─javascripts
     │  ├─stylesheets
     │  └─third_party
     │
     ├─routes
     │
     └─views
   

3. npm init で package.json を作成。

   プロジェクトルート D:\Work\sample でコマンドプロンプトを立ち上げ、 npm init を実行します。

   基本的にはすべての質問を Enter で回答すれば完成します。 以下のサンプルでは一部でデフォルト以外の回答をして作成しています。

   package.json

   {
     "name": "sample",
     "version": "1.0.0",
     "description": "",
     "main": "app.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "garafu",
     "license": "MIT"
   }
   

4. 以下のパッケージを npm でインストール。

   • express
   • ejs

   具体的なインストール手順はそれぞれ以下の通りです。 （といっても、npm install パッケージ名 --save をコマンドで叩くだけなのですが…）

   1. express のインストール

      npm install express --save
      

   2. ejs のインストール

      npm install ejs --save
      

5. bower init で bower.json を作成。

   package.json の作成と同じく、基本的にはすべての質問を Enter で回答すれば完成します。 以下のサンプルでは一部でデフォルト以外の回答をして作成しています。

   bower.json

   {
     "name": "sample",
     "description": "",
     "main": "app.js",
     "authors": [
       "garafu"
     ],
     "license": "MIT",
     "homepage": "",
     "ignore": [
       "**/.*",
       "node_modules",
       "bower_components",
       "test",
       "tests"
     ]
   }
   

6. .bowerrc を作成。

   作成用のコマンドは存在しないので テキストエディタ を使って作成します。 ファイル保存は念のため UTF-8 で保存しておきます。

   .bowerrc

   {
     "directory": "public/third_party"
   }
   

7. 以下のパッケージを bower でインストール。

   • jQuery
   • Bootstrap

   具体的なインストール手順はそれぞれ以下の通りです。 （こちらも npm と似ていて bower install パッケージ名 --save をコマンドで叩くだけです）

   1. jQuery を以下のコマンドでインストール。

      jQuery は Bootstrap との依存関係があるため バージョン 2.x.x 以前を指定してインストールします。

      bower install jquery#2 --save
      

   2. Bootstrap を以下のコマンドでインストール。

      bower install bootstrap --save
      

実装

実際に作成するのは以下のファイルです。

• ./app.js
• ./routes/index.js
• ./views/index.ejs
• ./public/javascripts/index.js
• ./public/stylesheets/index.css

また、以下の場所に任意の画像を置いてください。

• ./public/images/neko.jpg

ちなみに今回は PAKUTASO に公開されている 獲物を狙ってるメス猫（スコティッシュフォールド） のフリー素材をお借りしました。

./app.js

var express = require('express');

// express の実態 Application を生成
var app = express();

// テンプレートエンジンを EJS に設定
app.set('views', './views');
app.set('view engine', 'ejs');

// 静的ファイルは無条件に公開
app.use('/public', express.static('public'));

// ルーティング設定
app.use('/', require('./routes/index.js'));

// サーバーをポート 3000 で起動
app.listen(3000);

// アプリケーション開始ログ
console.log('Server running at http://localhost:3000');

./routes/index.js

var express = require('express');
var router = express.Router();

// デフォルトルーティング
router.get('/', function (request, response) {
    response.render('index', { title: 'Sample Node.js', message: 'Hello there!' });
});

module.exports = router;

第2引数で渡されたオブジェクトはテンプレートエンジン（ EJS ）に渡されます。

./views/index.ejs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= title %></title>
    <link rel="stylesheet" href="/public/third_party/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/public/stylesheets/index.css" />
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        <p><img id="img" src="/public/images/neko.jpg" class="img-thumbnail"></p>
        <p><%= message %></p>
      </div>
    </div>

    <script type="text/javascript" src="/public/third_party/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/public/third_party/bootstrap/dist/js/bootstrap.js"></script>
 <script type="text/javascript" src="/public/javascripts/index.js"></script>
  </body>
</html>

渡されたオブジェクトは <%= プロパティ名%> で呼び出すことができます。 JSP 同様、条件判定 や ループ処理 もありますが…、今回はただ表示するだけのサンプルとしています。

./public/javascripts/index.js

var image_onclick = function (event) {
    window.alert('Hello World !');
};

var document_onready = function (event) {
    $('#img').on('click', image_onclick);
};

$(document).ready(document_onready);

./public/stylesheets/index.css

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

テスト

実装まで終わりましたので、実際に動かして動作することを確認します。

1. コマンドプロンプトを起動
2. プロジェクトルートディレクトリへ移動

   cd /d "D:\Work\sample"
   

3. 以下のコマンドを実行して Webアプリケーション を起動

   node app.js
   

4. ブラウザからアクセス

   任意のブラウザから http://localhost:3000/ へアクセスします。 正常に動作していれば、以下のような画面が表示されるハズです。

   

以上でサンプル実装は完了となります。 多数あるパッケージやフレームワークをどのように組み合わせていけばよいかが理解できたかと思います。 これをベースに Node.js で実践的な Webアプリケーション が作られるといいな、と思っています。

参考記事

• Express

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

参考記事

• MDN - import
• MDN - export
• uehaj's blog - (Babel 5における)ES6のモジュールを解説してみた

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

ちなみに、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 のクラス作成、利用 は出来る…ハズ！

参考記事

• ECMAScript6 compatibility table
• MDN - Classes

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

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

関連記事

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

目次

• データ型
  • 数値
    • 8進数、2進数
  • 文字列
    • テンプレートリテラル
    • Unicodeコードポイントエスケープ
  • オブジェクト
    • オブジェクトリテラル拡張
  • 正規表現
    • "y" および "u" オプション
  • Symbol型
• 宣言
  • const
  • let
• 式と演算子
  • 分割代入
  • スプレッド演算子
  • for ... of 文
• 関数
  • デフォルト引数
  • 残余引数
  • アロー関数

データ型

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 ライフ が始まる予感がしますが… まだまだ クラス や モジュール といった新機能もあります。 続きはまた別の記事にて…。

参考記事

• ECMAScript6 compatibility table
• MDN - JavaScript リファレンス

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

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

目次

• strict モード
  • strictモード の 適用
    • strictモード を スクリプト全体 に 適用する
    • strictモード を 特定関数のみ に 適用する
• オブジェクト
  • getter / setter
  • 末尾 カンマ を 無視
  • 予約後 を プロパティ名 に指定可能
  • メソッドの追加
    • 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
• 配列
  • 末尾 カンマ を 無視
  • メソッドの追加
    • 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
• 文字列
  • プロパティアクセス
  • メソッドの追加
    • String.prototype.trim
• 日付
  • メソッドの追加
    • Date.now
    • Date.prototype.toISOString
    • Date.prototype.toJSON
• 関数
  • メソッドの追加
    • 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 の仕様についていくのが大変ですが、改良が続けられているということはその分見込みもある気もします。 今後も適当なタイミングでまとめていきたいと思います。

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

参考記事

• Qiita - ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ
• MDN - JavaScriptリファレンス
• Qiita - JavaScriptのGetter/Setter ～ JSおくのほそ道 #018
• ②ality – JavaScript and more - Trailing commas in object literals and array literals
• ECMAScript 5 compatibility table