そろそろES6使わねば

旧タイプjavascripterの、下駄です。 すっかり世の中がES6になっているのに、未だにvar宣言やcallback関数を書きまくっていたんですが、 色々なライブラリを使ったり、他人のスニペットを利用する時に、ES6記述になっていて、旧型に書き直すのもめんどくさくなったので、ボチボチ覚えなければ・・・ と、重い腰を上げてみました。 ES6が意味不明な人は、この記事の下にある参考リンクなどを読むと簡単に理解できますよ。 一言で説明すると、javascriptの新バージョンですね。

ES6が使えないブラウザの検討

ES6を"can i use"で調べてみると、 IE11は、ほぼ使い物になりません。 要するにIEに対応させようとすると、旧タイプJSで書かなければいけないけど、IEを無視できるのであれば、ES6以上のバージョンで書けるということがわかります。 ES6の恩恵は、プログラムソースコードの効率化だけでなく、ブラウザの処理スピードや、処理効率化による無駄にエネルギーを使わなくなり、スマホなどのデバイスであれば、バッテリー使用率も軽減できるというメリットがあるようですね。 何より、旧タイプと新タイプが混在しているという状況がとにかくキモチワルい。 あと、自分の作っているライブラリなどにES6を適用しておく必要もあるので、この際覚えなければイケないことには間違いなさそうだ。 ちなみに、IEはなくなるものだからとタカを括っているエンジニアは、世の中のことがよく分かっていない。 未だにIEしか受け付けない環境はたくさん世の中に存在しているのだ。 記憶に新しいところであれば、政府の作った、「マイナポイント」のサイトは、開始直後は、IEのみしか受付ができず、大問題になっていたが、これはIEが現役バリバリである環境が存在することが伺える。（2020年９月時点） でも、「pollyfill」というライブラリを使えば、ES6に対応していない旧タイプブラウザでも、強引にES6機能を実行してくれるという優れたものがすでに存在しているので、こちらの利用を検討してもいいかもしれない。 JavaScriptのブラウザごとの互換性をポリフィル・Babelで解決する！

とりあえずvarをletとconstにする

意味なくvarを使うよりは、より処理の軽い(であろう・・・)letとconstを使うことを意識するといいらしい。 ただし、varを使わなくなるわけではなく、スコープの対象範囲の広いvarを使う場合と、ifやfor文の外には対応したくないスコープ外を無効にできる場合は、letやconstを使うのが良さそうです。 constはphpで言うところの、defineで、letは、書き換え範囲の狭いスコープ限定変数という理解で問題なさそうなので、さほど難しくはない。 あまりscopeを意識しなかったvarをそのまま書き換えると、不具合が出ることは間違いなさそうだ。 この意識付けが重要なんだな。

promise-async-awaitの理解

色々なサイトで丁寧に解説をしてくれているが、いまひとつ理解しやすいサイトが無かった。 ここでは、そんなサイトに変わってわかりやすく解説してあげるというような、親切をするつもりはなく、あくまで、自分が理解できた事を書いてみる。 まず、async-awaitを理解する前に、Promiseを理解しなければいけないようだ。 Promiseというのは、処理完了をした場合と、その処理がコケた時を一括で定義することがで切る命令で、それを関数化しておくことでかなり便利に使えるという機能。 これまでは、ajax系のコールバックを大量に書き込んでいたが、１つの命令で実装できるので、書きやすくて便利という事だね。 そして、asyncは、promiseのコールバック関数を個別で書ける機能で、その中に書かれたawaitは、処理待ちをするという、単品機能という事のようだ。

これからの課題

これまでのコールバックに慣れてきて、bindやcallを使ってthisの継承などを行ってきた自分としては、全く違う書き方にする必要があるので、この点がES6の最大の壁になりそうだな。 とりあえずは、今まで作ったライブラリを書き直して、ES6の機能を使い慣れるのと、自分のコーディングの書き方への組み込み方を学習する必要があるので、書いているうちに色々な自分なりポイントに気がついていくだろう。 こうした学習は、正直しんどいけど、楽しいという気分も大きい。 仕事でも効率化することは間違いないので、とにかくここは覚えておくことに前向きにならねば！！！

参考

ES2015(ES6) 入門 ES6でのvar、let、constの使い分け