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

最近の記事

文章のユーザビリティ

この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・

ライティング

インタフェースデザイン

この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・

デザイン思考

フルHD映像を4Kにする → スーパースケール

これを知ったときはマジか!と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・

DaVinci Resolve

Macで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと

試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・

DaVinci Resolve

プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

人気の記事

iOS Safariで絶対配置(position:fixed)して惰性スクロールしてもロックしない、フリーズ回避方法

iPhoneやiPadで position: fixed; で絶対配置したエリア内をスクロールするとき、最上部をより上にスクロールしようとしたり、最下部をより・・・

JavaScript2021年4月28日

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

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

WordPress2018年10月11日

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

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

JavaScript2017年7月19日

Instagram API を使ってインスタに投稿した画像データを取得する

インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・

API2021年2月22日

iframeの高さを自動調整する

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

JavaScript2015年3月17日

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

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

Illustorator2018年2月2日

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

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

WordPress2019年2月11日

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS2011年3月7日

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript2020年12月14日

favicon.icoをWordPressの管理画面からアップロードできない→ wp-config.php を一時的に修正

いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・

WordPress2020年8月4日

コメントありの記事

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました!」

お仕事・制作日記

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

「>名無しさん ご指摘、ありがとうございます! 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」

JavaScript

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります(・・・」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

Instagram API を使ってインスタに投稿した画像データを取得する

「コメントに嬉しいお言葉、ありがとうございます!」

API

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

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

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

05_各種キーワードツール

「公開から14年振りの更新w デッドリンクを削除しました。ツール系は「SEO対策に役立つ便利ツール」に集約します。」

SEO

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