今回はSegrio CruzさんのJavaScriptに関する投稿についてご紹介したいと思います。きっと「あっ！」と驚いてしまうと思います。この記事は前編と後編の2部構成となっております。
かつてブラウザを中心に活躍してきたJavaScript。Node.jsの登場によってサーバーから外の世界へと飛び出し、数々のイノベーションを起こしてきました。
こうした動きの中で生まれたのが、ECMAScript2015（ES6）です。その登場を機にJavaScriptのアップデートサイクルは加速し、今も進化しています。
この記事では、私のお気に入りのJavaScriptツールや裏技を紹介します。特にJavaScriptがここ数年でどう進化したのか知らない人は、きっと驚くことでしょう。
1．最新版の言語もBabelで古いブラウザに対応
BabelはES2015コードを、すべてのブラウザが対応できるES5に変換してくれるツール。最新版のJavaScriptを使いつつ、古いブラウザでも最新言語アプリに対応できるようにしてくれます。
2．新しい変数によるリアサイン
ES2015では、JavaScriptはletとconstという新しい変数が。変数をリアサインするときは前者、リアサインを防ぐときは後者を使います。
3．arrowで“this”を指定し続ける
最近JavaScriptに加わった新機能のひとつが「arrow」です。これを使えば関数の終わりに（this）を逐一、追加する必要がないのです。
let doubleShort = (num) => num * 2;
let doubleLong = (num) => {
let doubleNum = num * 2;
return doubleNum;
}
4．ややこしいコールバックの束をpromiseで回避
コールバック関数を飛ばして待つ、というのはよくあることですよね。問題はコ－ルバックが多すぎると、コードがごちゃごちゃして見にくくなってしまうことです。
promiseを使えばコードを順序通りに実行でき、途中でミスもパパッと修正できますよ。
5．“for”でループさせずに“map”に置き換える
特定の配列を繰り返したいとき、空白の配列をループさせるのも手ですが、配列から配列へとマッピングするとすっきりします。
[1, 2, 3].map((num) => num * 2); // [2, 4, 6]
6．“for”でループさせずに“filter”に置き換える
例えば、配列の中の偶数のみ繰り返したい場合も、ループさせるよりもfilterを使ったほうが効率がいいのです。
[4, 7, 2, 3].filter((num) => num % 2 === 0); // [4, 2]
7．“for”でループさせずに“reduce”を使う
配列の中の数字の和を求めるような場合、reduceを使います。
[7, 2, 4].reduce((a, b) => a + b); // 13
これまで見てきた方法をすべて使い、すべての数を7倍して20以下の数字の和を求める場合
[3, 2, 1, 6] .map(num => num * 7) .filter(num => num < 20) .reduce((a, b) => a + b); // 21
8. イミュータビリティ(不変)の強みを生かす
不変データでは、プログラムがオブジェクトを参照することで、変更すべき箇所を指摘することが可能です。
JavaScriptではオブジェクトや配列は変わることがありますが、Immutable.jsを使えば克服できますよ。
9．Node.jsで言語のスイッチングを回避
クライアントとサーバのコードを行ったり来たりしなくていいため、生産性が劇的に向上します。
10．NPM：世界一の規模を誇るパッケージマネージャー
30万以上のパッケージ数を誇るNPMは、コミュニティの規模も桁違い。アプリの開発にも便利です。
※本稿は20 JavaScript tools to blow your mindを翻訳・再編集したものです。後編はこちら！
おすすめ新着記事
おすすめタグ