プログラミング

プログラミング

思わず「あっ!」と驚いてしまう20のJavaScriptツール【前編】

235 views

今回はSegrio CruzさんのJavaScriptに関する投稿についてご紹介したいと思います。きっと「あっ!」と驚いてしまうと思います。この記事は前編と後編の2部構成となっております。

 

 

かつてブラウザを中心に活躍してきたJavaScript。Node.jsの登場によってサーバーから外の世界へと飛び出し、数々のイノベーションを起こしてきました。

 

こうした動きの中で生まれたのが、ECMAScript2015(ES6)です。その登場を機にJavaScriptのアップデートサイクルは加速し、今も進化しています。

 

この記事では、私のお気に入りのJavaScriptツールや裏技を紹介します。特にJavaScriptがここ数年でどう進化したのか知らない人は、きっと驚くことでしょう。

 

1.最新版の言語もBabelで古いブラウザに対応

 

njpj85tn33q7snqyk8we9k

BabelはES2015コードを、すべてのブラウザが対応できるES5に変換してくれるツール。最新版のJavaScriptを使いつつ、古いブラウザでも最新言語アプリに対応できるようにしてくれます。

 

2.新しい変数によるリアサイン

 

ES2015では、JavaScriptはletとconstという新しい変数が。変数をリアサインするときは前者、リアサインを防ぐときは後者を使います。

 

3.arrowで“this”を指定し続ける

 

o3udaer3din8az6dnqgjek
最近JavaScriptに加わった新機能のひとつが「arrow」です。これを使えば関数の終わりに(this)を逐一、追加する必要がないのです。

 

let doubleShort = (num) => num * 2;
let doubleLong = (num) => {
 let doubleNum = num * 2;
 return doubleNum;
}

 

4.ややこしいコールバックの束をpromiseで回避

 

コールバック関数を飛ばして待つ、というのはよくあることですよね。問題はコ-ルバックが多すぎると、コードがごちゃごちゃして見にくくなってしまうことです。

 

promiseを使えばコードを順序通りに実行でき、途中でミスもパパッと修正できますよ。

 

5.“for”でループさせずに“map”に置き換える

 

ca7bb2yhgimr2nus5ver9k
特定の配列を繰り返したいとき、空白の配列をループさせるのも手ですが、配列から配列へとマッピングするとすっきりします。

 

[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で言語のスイッチングを回避

 

efzpw4jxm7m9xwgded6lek
クライアントとサーバのコードを行ったり来たりしなくていいため、生産性が劇的に向上します。

 

10.NPM:世界一の規模を誇るパッケージマネージャー

 

30万以上のパッケージ数を誇るNPMは、コミュニティの規模も桁違い。アプリの開発にも便利です。

 

※本稿は20 JavaScript tools to blow your mindを翻訳・再編集したものです。後編はこちら

関連記事

おすすめ記事