JavaScriptが無効になっています。有効にしてご覧ください。
QuickAnswer
ECMAScript2015の構文 覚え書き
ECMAScript2015の構文 覚え書き
カテゴリー:ECMAScript2015
記事作成日:2017.10.17
ECMAScript2015(ES6)(ES2015)の登場でJavaScriptはとても書きやすくなりました。難解な構文を意識することなくスイスイ書けるES2015は本当にコーディングが楽しい。しかし、ほんの20行程度のコードの場合はいちいちBabelを通すのは面倒なのでECMAScript5(ES5)で書くことも多いです。ES5とES2015との構文使い分けがちょっと混乱したので自分用のまとめです。自分用のまとめなので詳しい解説は省いていることと、全ては網羅していません。 ## 厳格モード ES2015 ```javascript 'use strict'; ``` 暗黙的グローバル禁止など。関数内で宣言すれば関数内で有効 ## 変数宣言 ES5 ```javascript var ``` ES2015 ```javascript let const ``` スコープが違う ## Symbol ES2015 ```javascript const CAT = Symbol(); const DOG = Symbol(); const CATWHITE = Symbol('cat white'); //文字列は単なる説明用 const DOGONE = Symbol(2); //数値も単なる説明用 const DOGTWO = Symbol(1 + 1); //数値も単なる説明用 console.log(CAT); //Symbol() console.log(DOG); //Symbol() console.log(CATWHITE); //Symbol(cat white) console.log(DOGONE); //Symbol(2) console.log(DOGTWO); //Symbol(2) console.log(DOGONE == DOGTWO); //false Symbolは全てユニーク console.log(CAT == DOG); //false Symbolは全てユニーク ``` いずれとも競合しない一意の値を生成 ## テンプレートリテラル ES2015 ```javascript const a = 100; const b = 200; console.log("あa,bか"); //あa,bか console.log('あa,bか'); //あa,bか console.log(`あa,bか`); //あa,bか console.log("あ${a},${b}か"); //あ${a},${b}か console.log('あ${a},${b}か'); //あ${a},${b}か console.log(`あ${a},${b}か`); //あ100,200か console.log(`あ${a + b}か`); //あ300か ``` ## 分割代入 ES2015 ```javascript const obj = {'b':100,'c':200,'d':300}; const {a,b,c} = obj; console.log(a); //undefined console.log(b); //100 console.log(c); //200 console.log(d); //ReferenceError: d is not defined ``` ```javascript const obj = {'b':100,'c':200,'d':300}; let a,b,c; // {a,b,c} = obj; これは間違い SyntaxError: expected expression, got '=' ({a,b,c} = obj); console.log(a); //undefined console.log(b); //100 console.log(c); //200 ``` ```javascript const ary = [100,200,300]; let [a,b] = ary; console.log(a); //100 console.log(b); //200 ``` ```javascript const ary = [100,200,300,400,500]; let [a,b,...c] = ary; console.log(a); //100 console.log(b); //200 console.log(c); //[300,400,500] ``` ```javascript let a = 100; let b = 200; [a,b] = [b,a]; console.log(a); //200 console.log(b); //100 ``` ```javascript function fnc(...a) { //可変長引数受け取り console.log(a); //[100,200,300] console.log(a[0]); //100 console.log(a[1]); //200 console.log(a[2]); //300 console.log(a[3]); //undefined } fnc(100,200,300); ``` ## ループ ES5 ```javascript for (var i = 0; i < 10; i++) { } ``` ```javascript var i = 0; while (i < 10) { i++; } ``` ```javascript var i = 0; do { i++; } while (i < 10); ``` ```javascript var ary = [100,200,300]; for (var i = 0; i < ary.length; i++) { console.log(ary[i]); //100, 200, 300 } ``` ## 順次アクセス for in / for of ES5 ```javascript var obj = {'a':100,'b':200,'c':300}; for (var key in obj) { console.log(key); //'a', 'b', 'c' console.log(obj[key]); //100, 200, 300 } ``` ES2015 ```javascript const ary = [100,200,300]; for (let v of ary) { console.log(v); //100, 200, 300 } ``` ## 順次アクセス forEach ES2015 ```javascript const a = [100,200,300]; a.forEach((v) => { console.log(v); //100, 200, 300 }); ``` ```javascript const a = [100,200,300]; a.forEach((v,index,ary) => { console.log(v); //100, 200, 300 console.log(index); //0, 1, 2 console.log(ary); //[100,200,300], [100,200,300], [100,200,300] }); ``` ## 関数 ES5 ```javascript function fnc(val) { console.log(val); } fnc(100); //100 ``` ```javascript var fnc = function(val) { console.log(val); } fnc(100); //100 ``` ES2015 ```javascript const fnc = (val) => { //アロー関数 console.log(val); } fnc(100); //100 ``` ```javascript const fnc = (val) => console.log(val); fnc(100); //100 ``` ```javascript const fnc = (a,b) => a + b; const c = fnc(100,200); console.log(c); //300 ``` ES2015 関数の引数で分割代入を使用 ```javascript const fnc = ([a,b,c]) => { console.log(a); //100 console.log(b); //200 console.log(c); //300 } const ary = [100,200,300]; fnc(ary); ``` ```javascript const fnc = ({a,b,c}) => { console.log(a); //100 console.log(b); //200 console.log(c); //300 } const obj = {'a':100,'b':200,'c':300}; fnc(obj); ``` ## 即時関数 ES5 ```javascript (function(a){ console.log(a); //100 })(100); ``` ```javascript var b = (function(a) { console.log(a); //200 return 300; })(200); console.log(b); //300 ``` ES2015 ```javascript ((a) => { console.log(a); //400 })(400); ``` ```javascript const c = ((a) => { console.log(a); //500 return 600; })(500); console.log(c); //600 ``` ```javascript const d = (() => { return 700; })(); console.log(d); //700 ``` ```javascript const e = () => { //即時関数ではない場合 return 800; }; console.log(e); //function e() console.log(e()); //800 ``` ```javascript const f = (() => { //即時関数ではない場合 return 900; }); console.log(f); //function f() console.log(f()); //900 ``` ## デフォルト引数 ES5 ```javascript function fnc(a,b) { console.log(a); //100 console.log(b); //undefined } fnc(100); ``` ```javascript function fnc(a,b) { b = b || 200; console.log(a); //100 console.log(b); //200 } fnc(100); ``` ```javascript function fnc(a,b) { b = (typeof b === 'undefined') ? 200 : b; console.log(a); //100 console.log(b); //200 } fnc(100); ``` ES2015 ```javascript function fnc(a,b = 200) { console.log(a); //100 console.log(b); //200 } fnc(100); ``` ## メソッドの省略記法 ES5 ```javascript var obj = {'a':100,'b':function(){return 200;}}; console.log(obj.a); //100 console.log(obj.b()); //200 ``` ES2015 ```javascript const obj = {'a':100,'b'(){return 200;}}; console.log(obj.a); //100 console.log(obj.b()); //200 ``` ## Map ES2015 ```javascript const a = new Map([ [1,'aaa'], [2,'bbb'], [3,'ccc'], ]); for (let [k,v] of a) { console.log(k); //1, 2, 3 console.log(v); //'aaa', 'bbb', 'ccc' } for (let [k,v] of a.entries()) { console.log(k); //1, 2, 3 console.log(v); //'aaa', 'bbb', 'ccc' } for (let k of a.keys()) { console.log(k); //1, 2, 3 } for (let v of a.values()) { console.log(v); //'aaa', 'bbb', 'ccc' } console.log(a.has(2)); //true console.log(a.has(5)); //false a.delete(2); //キーが2の要素を削除 for (let [k,v] of a) { console.log(k); //1, 3 console.log(v); //'aaa', 'ccc' } a.set(5,'eee'); //キーが5の要素を追加 for (let [k,v] of a) { console.log(k); //1, 3, 5 console.log(v); //'aaa', 'ccc', 'eee' } console.log(a.get(3)); //'ccc' console.log(a.size); //3 a.clear(); console.log(a.size); //0 ``` ## Set ES2015 ```javascript const a = new Set([2,'aaa',100]); const b = new Set([2,'aaa',100,2,100,7]); //重複の2と100は2個目以降無視される(エラーにならない) for (let v of a) { console.log(v); //2, 'aaa', 100 } for (let v of b) { console.log(v); //2, 'aaa', 100, 7 } const c = [2,'aaa',100,2,100,7]; //従来の配列の場合は重複許可 for (let v of c) { console.log(v); //2, 'aaa', 100, 2, 100, 7 } ``` ## map ES2015 ```javascript const fruits = [{n:'banana',p:100},{n:'apple',p:150},{n:'grape',p:200}]; const n = fruits.map(x => x.n); console.log(n); //['banana','apple','grape'] const p = fruits.map(x => x.p); console.log(p); //[100,150,200] const tax = fruits.map(x => x.p * 0.08); console.log(tax); //[8,12,16] const nuc = fruits.map(x => x.n.toUpperCase()); console.log(nuc); //['BANANA','APPLE','GRAPE'] ``` ```javascript const nAry = ['banana','apple','grape']; const pAry = [100,150,200]; //const fruits = nAry.map((x,i) => {n:x,p:pAry[i]}); ()が必要 SyntaxError const fruits = nAry.map((x,i) => ({n:x,p:pAry[i]})); console.log(fruits); //[{n:'banana',p:100},{n:'apple',p:150},{n:'grape',p:200}] ``` ## filter ES2015 ```javascript const fruits = [{n:'banana',p:100},{n:'apple',p:150},{n:'grape',p:200}]; const a = fruits.filter(fruits => fruits.p > 120); console.log(a); //[{n:'apple',p:150},{n:'grape',p:200}] const b = [11,22,33,44,55,66]; const c = b.filter(b => (b % 2 == 0)); console.log(c); //[22,44,66] ``` ## reduce ES2015 ```javascript const ary = [100,200,300]; const sum1 = ary.reduce((a,x) => { //aはアキュムレータ xは現在の配列要素 a = a + x; return a; },0); //0は初期値 console.log(sum1); //600 const sum2 = ary.reduce((a,x) => { a = a + x; return a; }); //初期値が無い場合は配列の先頭要素が初期値として使用され、2番目の要素から呼ばれる console.log(sum2); //600 const sum3 = ary.reduce((a,x) => //ブロックで囲まない場合はreturn文不要 a = a + x ); console.log(sum3); //600 const sum4 = ary.reduce((a,x) => a += x, 0); console.log(sum4); //600 const sum5 = ary.reduce((a,x) => a + x, 0); //計算値がreturnになるのでaへの代入不要 console.log(sum5); //600 const sum6 = ary.reduce((a,x) => a + x); //一番短く書くとこうなる console.log(sum6); //600 var sum7 = ary.reduce(function(a,x) { //ちなみにES5の書式も交えるとこうなる a += x; return a; },0); console.log(sum7); //600 ``` ## class ES2015 ```javascript class Fruit { constructor(n,p) { this.n = n; this.p = p; } namePrice() { return this.n + ' = ' + this.p + 'yen'; } priceWithTax() { return this.p * 1.08; } } const fruit = new Fruit('banana',100); console.log(fruit instanceof Fruit); //true const c = fruit.namePrice(); console.log(c); //'banana = 100yen' const d = fruit.priceWithTax(); console.log(d); //108 ``` ```javascript class Fruit { static addPen(str) { //静的メソッド return str + 'pen'; } } const a = Fruit.addPen('apple'); //インスタンス化無しで呼び出せる console.log(a); //'applepen' ``` ```javascript class Fruit { constructor(n,p) { this._n = n; this._p = p; } set n(n) { //セッター this._n = n; } get n() { //ゲッター return this._n; } } const fruit = new Fruit('apple',150); console.log(fruit.n); //apple fruit.n = 'grape'; console.log(fruit.n); //grape ``` ```javascript class Fruit { constructor(n,p) { this.n = n; this.p = p; } namePrice() { return `${this.n} = ${this.p}yen`; } } class FruitTax extends Fruit { //派生 constructor(n,p,t) { super(n,p); //親クラスのコンストラクタ呼び出し this.t = t; } namePrice() { //オーバーライド return `${super.namePrice()}(with out tax)`; } namePriceTax() { return `${super.namePrice()}(with tax ${this.p * (this.t + 1)}yen)`; } } const fruit = new FruitTax('banana',100,0.08); const c = fruit.namePrice(); console.log(c); //'banana = 100yen(with out tax)' const d = fruit.namePriceTax(); console.log(d); //'banana = 100yen(with tax 108yen)' ``` ## Object.freeze ES2015 ```javascript const obj = {a:100,b:200}; obj.c = 300; console.log(obj); //{a:100, b:200, c:300} Object.freeze(obj); console.log(Object.isFrozen(obj)); //true obj.d = 400; //'use strict'; が無い場合は無視されるだけ console.log(obj); //{a:100, b:200, c:300} ``` ```javascript 'use strict'; const obj = {a:100,b:200}; obj.c = 300; console.log(obj); //{a:100, b:200, c:300} Object.freeze(obj); console.log(Object.isFrozen(obj)); //true obj.d = 400; //Uncaught TypeError: Cannot add property d, object is not extensible /* 'use strict'; が有る場合はここでエラー */ ``` freeze は read only になる ## Object.seal ES2015 ```javascript const obj = {a:100,b:200}; obj.c = 300; console.log(obj); //{a:100, b:200, c:300} Object.seal(obj); console.log(Object.isSealed(obj)); //true obj.d = 400; //'use strict'; が無い場合は無視されるだけ console.log(obj); //{a:100, b:200, c:300} ``` ```javascript 'use strict'; const obj = {a:100,b:200}; obj.c = 300; console.log(obj); //{a:100, b:200, c:300} Object.seal(obj); console.log(Object.isSealed(obj)); //true obj.d = 400; //Uncaught TypeError: Cannot add property d, object is not extensible /* 'use strict'; が有る場合はここでエラー */ ``` seal は read/write可能で、add/delete不可 ## Object.preventExtensions ES2015 ```javascript const obj = {a:100,b:200}; obj.c = 300; console.log(obj); //{a:100, b:200, c:300} Object.preventExtensions(obj); console.log(Object.isExtensible(obj)); //false obj.d = 400; //'use strict'; が無い場合は無視されるだけ console.log(obj); //{a:100, b:200, c:300} ``` ```javascript 'use strict'; const obj = {a:100,b:200}; obj.c = 300; console.log(obj); //{a:100, b:200, c:300} Object.preventExtensions(obj); console.log(Object.isExtensible(obj)); //false obj.d = 400; //Uncaught TypeError: Cannot add property d, object is not extensible ``` preventExtensions は read/write/delete可能で、addのみ不可 ## import export import/exportはまだ使えない様です。(2017.10) ES2015 ```javascript // module.js export const taxRate = 0.08; export class Fruit { constructor(n,p) { this.n = n; this.p = p; } namePrice() { return `${this.n} = ${this.p}yen`; } } ``` ```javascript import {taxRate} from './module.js'; console.log(taxRate); ``` ```javascript import {taxRate,Fruit} from './module.js'; ``` ## ** ES2016 ```javascript const a = 3 ** 2; //Math.pow(3,2) console.log(a); //9 ``` ## Array.prototype.includes ES2016 ```javascript const ary = [100,200,NaN,300]; console.log(ary.includes(100)); //true console.log(ary.indexOf(100)); //0 console.log(ary.includes(150)); //false console.log(ary.indexOf(150)); //-1 console.log(ary.includes(NaN)); //true console.log(ary.indexOf(NaN)); //-1 indexOFではNaNは見つからない ```
##### 参考文献 オライリージャパン オーム社 初めてのJavaScript第3版
日経BP社 日経BPマーケティング 日経ソフトウエア ## あとがき すべては書ききれないので、気づいた点はちょこちょこ追記していくことになります。
CONTENTS
CakePHP3
CakePHP3(CakePHP3.6)でバリデーションが利かない。評価されずに通過する。
Plesk
PleskのCRONがJSTではなくUTCで実行される。service crond restart でも直らない。
Plesk
Plesk PHP-FPMでエラーページを設置する場合、存在しないファイルと存在しないディレクトリの違い
ウェブサーバー
/bin/bash^M: bad interpreter: No such file or directory
CakePHP3
CakePHP3で取得したdateのフォーマットが年2桁。年4桁にデフォルトを変更する
Plesk
Plesk に SSH2 Extension セットアップ php7.2
PHP
XAMPP PHP7.2 でSSH2。 Call to undefined function ssh2_connect()
SVG
SVGをbase64でCSSに埋め込み
ウェブサーバー
ウェブサーバーの指定ディレクトリを丸ごとCRONでローカルに複世代自動アーカイブする
ウェブサーバー
ウェブサーバーのMySQLデータベース複世代自動バックアップ(ダンプ出力)
NextCloud
NextCloudでユーザー作成時に自動設置されるファイルを無くす。または変更する。
ウェブサーバー
NGINXでindex.phpを表示させない。index.phpを省略したい。リダイレクトループを防ぐ。
Plesk
PleskでNextCloud(OwnCloud)セットアップとamazonS3接続で無限ストレージ
Docker
Docker for WindowsのVMイメージをCドライブ以外に作成
Docker
Dockerで OCI runtime create failed 。docker-compose.yml の volumes が原因?
ブラウザ
Firefoxのタイムアウト値変更
CSS
Windows10のIE11では正常表示だが、Windows7のIE11ではレイアウトが崩れる
CakePHP3
XAMPPが遅い。localhostでの開発が遅い。反応速度が悪い。IPv4の優先度を上げる
Plesk
Plesk n日以前の既読メールを削除
Plesk
Plesk postfixのメール送信失敗から再送までの動作。再送メールキューの扱い。
Plesk
Plesk Onyx で PHP Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known
Plesk
Plesk Onyx 17.5.3 から 17.8.11 へアップグレード
Plesk
Pleskで、システムのパッケージマネージャデータベースで不整合が検出されました。この問題を手作業で解決
Plesk
Plesk メールログ保管期間の延長
CSS
CSS フレックスボックス display:flex のまとめ
SVG
インラインSVGで隙間が出来たり、IEは小さくなったり、正常に表示されない
PHP
phpで、文字列を1文字ずつの配列に変換
Plesk
Pleskへの管理者アクセス制限IPアドレスを一括登録
Plesk
Pleskで、メールアドレス一括登録
Plesk
Pleskで、メールコンテンツを含ませずにメールの構成だけを保存
Plesk
Pleskで、/etc/httpd/logs/error_log に Can't locate CGI/Carp.pm の記録
Plesk
Pleskでperl(CGI)がエラー。End of script output before headers 詳しい情報を知る方法
Plesk
Plesk で、顧客に紐づいているプロバイダを変更する
ECMAScript2015
ECMAScript2015の構文 覚え書き
PHP
PHPでHTMLの構文チェック。終了タグ無しやタグの入れ子違いでエラーを出したい
CakePHP3
CakePHP3ではDATE型フィールドのタイムゾーンはUTCになる
ECMAScript2015
初めてのECMAScript2015とBabel
SVG
SVGでハッチングパターン覚え書き
Plesk
古いMacのChromeでサイトが見れない。ERR SPDY INADEQUATE TRANSPORT SECURITY
WebAssembly
WebAssemblyの環境を整えた。最低何を記述すれば動くのか。asm.jsからwasm生成
WebAssembly
WebAssemblyの環境を整えた。最低何を記述すれば動くのか。Cからwasm生成
Plesk
Plesk RoundCubeで特定のユーザーだけ画面真っ白。ブランクページの表示。date.timezone設定。
Plesk
エラーメッセージ connect() failed (111: Connection refused) while connecting to upstream
ウェブサーバー
メール送信が拒否 550 5.7.606 Access denied. mail.protection.outlook.com
ウェブサーバー
大量の404アクセス。Microsoft Office Protocol Discovery
CakePHP2
CakePHP2をサーバー移転したらエラー。open_basedir restriction in effect
Plesk
Plesk ModSecurity ルールセットの更新に失敗 modsecurity_ctl failed
CakePHP3
CakePHP3で、PHP Parse error: syntax error, unexpected T_USE, expecting
Plesk
Pleskでロードアベレージ確認
CakePHP3
CakePHP3 HTMLラジオボタンでlabelの位置がCakePHP2と違う。inputタグを制御できない
Plesk
Pleskでcomposer プレスクでコンポーザーを使用
CakePHP3
CakePHP3 imgタグじゃないimgのアドレス(パス)を得る。拡張子を指定する
CakePHP3
CakePHP3 日付の表示が 年/月/日 (YYYY-MM-DD) じゃない
Plesk
Plesk環境のウェブサーバーでintl.soが古い? ICUが古い?
CakePHP3
CakePHP3 バリデーションでフィールドの値がユニークかチェック
CakePHP3
CakePHP3 データベース更新ログをビヘイビアで作成
CakePHP3
CakePHP3 で intl ICU がエラー。問題箇所はCORE/src/Utility/Text.php
CakePHP3
CakePHP3 Controller/AppControllerのサブクラスを間に挟む
CakePHP3
CakePHP3 Model/Entityのサブクラスを間に挟む
CakePHP3
CakePHP3 Model/Entityで自分のテーブル名を知る。及び、フィールドの最大値をセットするコード
CakePHP3
CakePHP3でテーマ作成