JavaScript

ES6(ES2015)の主な変更点

オブジェクト指向

クラス定義

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()で配列を文字列で連結している。

<aside class="reference">
<dl>
<dt>参考本</dt>
<dd><a href="https://amzn.to/3cEQ7Td">作りながら学ぶReact入門</a></dd>
</dl>
</aside>

最近の記事

GulpでERRが出てテンパった → gyp: No Xcode or CLT version detected! → PostCSS plugin autoprefixer requires PostCSS 8

Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・

制作効率化

ビジネス前提ワークシート

書籍「LEAN UX リーン思考によるユーザエクスペリエンス・デザイン」から抜粋。 「前提の宣言」「MVPの作成」「実験の実行」「フィードバックとリサー・・・

知識編

リーン思考のUXデザイン

LEAN UX は、コラボレーションと部門/領域横断的な手法によって、製品の本質を素早く明らかにするための実践的手法であり、これによって文書への過度な依存を減・・・

知識編

ES6(ES2015)の主な変更点

オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・

JavaScript

JavaScriptスタイルガイド

書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・

JavaScript

投稿を公開したときに指定したページにアクセスする

この記事では「管理画面で投稿やカスタム投稿の公開ステータスを更新したときに何かしらの処理をする」方法の備忘録です。 functions.php を修正し・・・

WordPress

ローカルフォントをWebフォント指定する

Google Fonts はとても便利だが、適用するまでの遅延が気になったので、同様の効果をローカルにあるフォントを利用して実現させる。 事前に用意する・・・

CSS

[ソフト] Web font用のwoff、woff2にフォントを変換する無料サービス

WOFFコンバータ ダウンロードhttps://opentype.jp/woffconv.htm 以下、リンク先の「概要」を抜粋。 フォント・・・

CSS

JSON

JSON.parse() 配列とオブジェクトのリテラル記法を組み合わせた文字列をデータとして取り扱えるようにする。 // JSONデータ let ・・・

JavaScript

いろいろな判定

真の場合。偽の場合は、!== を使う。 プリミティブ値の判定 文字列の判定 if (typeof a === 'string') {} ・・・

JavaScript

人気の記事

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

イラストレーターでレイヤーごとにPNGで書き出す

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

カウントアップ、カウントダウンするJavaScript

ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・

JavaScript

WEB制作マークアップJavaScriptES6(ES2015)の主な変更点 | シンプルシンプルデザイン