JavaScriptが無効になっています。有効にしてご覧ください。
QuickAnswer
初めてのECMAScript2015とBabel
初めてのECMAScript2015とBabel
カテゴリー:ECMAScript2015
記事作成日:2017.09.09
大変遅ればせながら今後JavaScriptはECMAScript2015(ES2015)(ES6)で書くことにした。 よってES2015からES5へのトランスコンパイラであるbabelをセットアップ。 ## ES2015でコードを書く まずテストコード以外で最初に書いたコードはこちら。
内容については特に解説しない。 ```JavaScript class HtmlEntity { constructor() { this.entityChars = new Set([ ['&','&'], ['\'','''], ['<','<'], ['>','>'], ['"','"'], ]); } entity(chr) { for (const [ch,ent] of this.entityChars) { if (chr == ch) { return ent; } } return chr; } } ((window,document) => { const inData = 'indata'; const outData = 'outdata'; const outCount = 'outcount'; const convert = () => { const str = document.getElementById(inData).value; let [result,count] = zenHighlight(str) result = result.replace(new RegExp('\n','g'),'
'); document.getElementById(outData).innerHTML = result; document.getElementById(outCount).style.display = 'block'; document.getElementById(outCount).innerHTML = '全角文字が' + count + '文字見つかりました'; } const zenHighlight = (str) => { const htmlEnt = new HtmlEntity(); let result = ''; let count = 0; const chars = str.split(''); chars.forEach((val,index,array) => { if (val.charCodeAt(0) > 0xef) { result += '
' + val + '
'; count++; } else { result += htmlEnt.entity(val); } }); return [result,count]; } const init = () => { document.getElementById(inData).addEventListener('keyup',() => convert(),false); } init(); })(window,document); ``` ## ES5へのトランスパイル結果がこちら ```JavaScript 'use strict'; var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var HtmlEntity = function () { function HtmlEntity() { _classCallCheck(this, HtmlEntity); this.entityChars = new Set([['&', '&'], ['\'', '''], ['<', '<'], ['>', '>'], ['"', '"']]); } _createClass(HtmlEntity, [{ key: 'entity', value: function entity(chr) { var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = this.entityChars[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var _step$value = _slicedToArray(_step.value, 2), ch = _step$value[0], ent = _step$value[1]; if (chr == ch) { return ent; } } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } return chr; } }]); return HtmlEntity; }(); (function (window, document) { var inData = 'indata'; var outData = 'outdata'; var outCount = 'outcount'; var convert = function convert() { var str = document.getElementById(inData).value; var _zenHighlight = zenHighlight(str), _zenHighlight2 = _slicedToArray(_zenHighlight, 2), result = _zenHighlight2[0], count = _zenHighlight2[1]; result = result.replace(new RegExp('\n', 'g'), '
'); document.getElementById(outData).innerHTML = result; document.getElementById(outCount).style.display = 'block'; document.getElementById(outCount).innerHTML = '全角文字が' + count + '文字見つかりました'; }; var zenHighlight = function zenHighlight(str) { var htmlEnt = new HtmlEntity(); var result = ''; var count = 0; var chars = str.split(''); chars.forEach(function (val, index, array) { if (val.charCodeAt(0) > 0xef) { result += '
' + val + '
'; count++; } else { result += htmlEnt.entity(val); } }); return [result, count]; }; var init = function init() { document.getElementById(inData).addEventListener('keyup', function () { return convert(); }, false); }; init(); })(window, document); ``` 1.46KBが3.79KBに化けた。オイオイ、そんなに大きくならなくても!とは思ったがclassをES5に変換すると結構大きくなることは分かった。 元々ES5で書けばES2015の5割増し程度の2KB程度で書けたはずである。 ## ECMAScript2015って素晴らしい ECMAScript2015は学習コストがかかりそうでほとんど学習コスト無しですんなり移行できた感じがした。それだけ他のメジャー言語の構文に近づいたという事だろう。何より今後prototypeで難解なコードを見る機会が減るのがうれしい。自分自身はメンテナンスに難を感じてprototypeを使うことは極力避けていた。 ## 今後の希望 WebAssemblyの仕様策定が進み、AndroidStudioの様な開発環境も整い、WebAssemblyをCで書くという行為が当たり前になる時代をわくわくしながら待っているが、CではなくともECMAScript2015そしてECMAScript2017がWebAssemblyにコンパイル出来ればそれはそれですごく助かるしありがたい。さらに楽しみが増えた。
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でテーマ作成