オブジェクト指向

クラス定義

JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。
ES6でclass構文が導入されたが、オブジェクト指向の仕組みが変わるわけではない。

従来

var Saikoro = function () {
  this.no = 1;
}

/**
 * 1〜6のランダム数値を変数 no に代入する
 */
Saikoro.prototype.furu = function () {
  this.no = Math.floor(Math.random() * 6) + 1;
}

/**
 * 現在のサイコロの目を返却する
 */
Saikoro.prototype.me = function () {
  return this.no;
}

var s1 = new Saikoro();
var s2 = new Saikoro();

s1.furu();
s2.furu();

console.log(s1.me());
console.log(s2.me());

ES6

class Saikoro {
  
  /**
   * constructor
   * クラスからインスタンスを作成するときに自動で実行される特別なメソッド
   */
  constructor() {
    
    // コンストラクターでは、インスタンス変数に初期値を与えます。
    // また、this. を付けることでローカル変数と区別する。
    this.no = 1;
  }
  
  /**
   * 1〜6のランダム数値を変数 no に代入する
   */
  furu() {
    this.no = Math.floor(Math.random() * 6) + 1;
  }
  
  /**
   * 現在のサイコロの目を返却する
   */
  me() {
    return this.no;
  }
}

const s1 = new Saikoro();
const s2 = new Saikoro();
  
s1.furu();
s2.furu();

console.log(s1.me());
console.log(s2.me());

さらに、ES6では、ぼくにはなかなか理解できないでいた継承をシンプルに実装できるようになった！

/**
 * 継承を使う
 */
class IkasamaSai extends Saikoro {
  furu() {
    
    // 1/6の確率以上で、5が出るようにする
    if (Math.random() > (1 / 6)) {
      this.no = 5;
    } else {
      
      // superを使って、Saikoroクラスのfuru() を呼び出す
      super.furu();
    }
  }
}

const s3 = new IkasamaSai();
s3.furu();
console.log(s3.me());

関数定義

アロー関数

従来

var square = function (x) {
  return x * x;
}

ES6

const square = (x) => x * x;

ES6では、関数式をコンパクトに書けるようになった。

デフォルト引数

従来

function hello(object) {  
  var obj = object || "world";
  
  console.log('Hello ' + obj);
}

ES6

function hello(object = "world") {    
  console.log('Hello ' + object);
}

引数を省略した場合 undefined が代入されるが、ES6では、引数省略時の値を指定できるようになった。

レフトパラメーター

従来

function f(first, second) {
  console.log(first);    // 'いち'
  console.log(second);    // 'に'
  console.log(arguments[2]);    // 'さん'
  console.log(arguments[3]);    // 'よん'
}

f('いち', 'に', 'さん', 'よん');

ES6

function f(first, second, ...rest) {
  console.log(first);    // 'いち'
  console.log(second);    // 'に'
  console.log(rest[0]);    // 'さん'
  console.log(rest[1]);    // 'よん'
}

f('いち', 'に', 'さん', 'よん');

ES6では、関数の引数を見るだけで、可変長引数を受け取るのだ判断できるようになった。

変数定義

ES6では、let と const が追加された。

const は再代入するとエラーになるので、明らかな定数やプログラムで変化しない値に対しては const を使う。

var PI = 3.14;
PI = 3;
console.log(PI);   // 3

const PI = 3.14;
PI = 3;    // TypeError

let は、varと似て非なるので注意。let は同じ変数名を再定義できず、スコープが、var より狭い。

let は、同じ変数名を再定義できない。

var x = 10;
x = 20;

var x = 30;
console.log(x);    // 30

let x = 10;
x = 20;

let x = 30;    // SyntaxError

let は、スコープが var より狭い。

if (1 === 1) {
  var y = 3;
}
console.log(y);    // 3

if (1 === 1) {
  let y = 3;
}
console.log(y);    // ReferenceError

式、定数

スプレッド演算子

配列の場合は、スプレッド演算子により残り全ての代入や、配列の連結などにも使える。

let [f, ...r] = [1, 2, 3];
console.log(f);   // 1
console.log(r);   // [2, 3]
  
let a1 = [1, 2, 3];
let a2 = [0, ...a1, 4, 5];
console.log(a2);    // [0, 1, 2, 3, 4, 5, 6]

テンプレート文字列

従来

var x = 'comment';
console.log('<!--' + x + '-->');

ES6

let x = 'comment';
console.log(`<!--${x}-->`);

モジュール

大規模なプログラムを書く場合、複数のモジュール（ファイル）に分けてオブジェクトを書く（ファイル名がモジュール名となる）。
export属性を付けたオブジェクトは公開してよいものとなり、他のモジュールでimportできる。

余談：ぼくの場合、複数のJSファイルを一ファイルにまとめて、難読化しているため、このモジュールに関しては未検証。

shop.js

export class CustomerTable { ...省略... }
class PriceTable { ...省略... }
export class ProductTables { ...省略... }
class StockTable { ...省略... }

shop2.js

export default class ShopTalbe { ...書略... }

sample.js

import {CustomerTable, ProductTables} from 'shop'
import ShopTable from 'shop2'

補足：分割代入

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

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

let o1 = {
  x: 10,
  y: 20,
  z: 30
};

let {x, y} = o1;

console.log(x);    // 10
console.log(y);    // 20

補足：イテレーター

配列 ['赤', '緑', '青'] を
<ul><li>赤</li><li>緑</li><li>青</li></ul>
というhtmlに変換する場合

const rgb = ['赤', '緑', '青'];
const rgb_length = rgb.length;

let tds = '',
    i = 0;

for (i = 0; i < rgb_length; i++) {
  tds += '<li>' + rgb[i] + '</li>';
}

console.log('<ul>' + tds + '<ul>');

同じ処理を、 map() メソッドを使う

const rgb = ['赤', '緑', '青'];
const tds = rgb.map((v) => `<li>${v}</li>`);

console.log(`<ul>${tds.join('')}</ul>`); 

コードの長さを短縮できる。
ちなみに、tds には、tdsをベースに配列の値を入れ替えている。そして、join()で配列を文字列で連結している。