今ではウェブ開発において必須とも言える JavaScript ですが、初期は Flash 人気の影に隠れておりそれほど利用される言語ではありませんでした。2000年代後半頃から Google による Ajax の利用や jQuery の登場などから JavaScript 人気は徐々に高まり、Safari ブラウザの Flash 非サポートなどを経て現在の人気言語に至るような歴史を辿ってきました。
そのような変遷の中で、JavaScript の記法や関数などを定義している EcmaScript も次第に整備され、2015年の ES2015 をひとつのターニングポイントとして、現在は毎年最新バージョンの ECMAScript がリリースされています。こういった背景により、一口に「JavaScript でのコーディング」と言っても、より現代的なモダンな書き方や少し古めかしい書き方といった違いが出てきます。
この記事では、すぐに実践することができて、皆様の JavaScript コーディングをモダン化するポイントをいくつかご紹介します。
- 変数宣言には const を使う
- 関数定義は、const + アロー関数で実装する
- 配列の処理を for 文で回さない / filter, map, flatMap, some, every, forEach を使う
- 等価比較は == ではなく === を使う
- まとめ
変数宣言には const を使う
const を使用することで、変数の値が再代入されることを防ぐことができます。基本的には const を使用するようにしましょう。どうしても参照先を変更する必要のある変数についてのみ、let を使います。var は、古いバージョンの JavaScript で使用されていた変数宣言方法であり、現在は推奨されていません。
let count = 0; count = 1; // 再代入可能 console.log(count); // 1 const PI = 3.14; PI = 3.14159; // 再代入不可能 console.log(PI); // 3.14
TypeScript においては as const も積極的に使っていきましょう。as const を使用することで、TypeScriptは配列やオブジェクトの要素が変更されないことを保証し、コードの安全性を向上させることができます。
const colors = ['red', 'green', 'blue'] as const; colors.push('yellow'); // エラー const person = { name: 'John', age: 30, hobbies: ['reading', 'music', 'sports'] } as const; person.name = 'Mike'; // エラー person.hobbies.push('cooking'); // エラー
関数定義は、const + アロー関数で実装する
function ではなく、const + アロー関数で関数を定義しましょう。アロー関数を用いると可読性の良いコードを書くことができ、また、function では this の挙動が呼び出し元によって異なるという問題を解決することができます。
const add = (a, b) => { return a + b; }; console.log(add(1, 2)); // 3
this を含む function をアロー関数に書き換える場合は、前述の通り this の振る舞いが異なる点に注意しましょう。
配列の処理を for 文で回さない / filter, map, flatMap, some, every, forEach を使う
配列の処理には、for 文を使用することもできますが、ES2015 以降では、配列の要素を処理するための便利なメソッドが提供されています。これらのメソッドを使用することで、コードの可読性を向上させることができます。以下に、代表的なメソッドの説明を示します。
- filter: 配列の要素をフィルタリングするためのメソッド。
- map: 配列の要素を変換するためのメソッド。
- flatMap: 配列の要素を変換し、フラットな配列にするためのメソッド。
- some: 配列の要素が、コールバック関数の条件を少なくとも1つ満たすかどうかを判定するためのメソッド。
- every: 配列の要素が、コールバック関数の条件をすべて満たすかどうかを判定するためのメソッド。
- forEach: 配列の要素を順番に処理するためのメソッド。
VB/C# の LINQ に慣れている方なら、次の対応表で覚えるのもオススメです。
| C# | JavaScript |
|---|---|
| Where | filter |
| Select | map |
| SelectMany | flatMap |
| Any | some |
| All | every |
| ForEach (List |
forEach |
パフォーマンスを重視する場合など、どうしても for 文で回す必要がある場合も const を使っていきましょう。
for (const x of a) { console.log(x) }
等価比較は == ではなく === を使う
等価比較には、=== を使用しましょう。=== は、値と型の両方が一致する場合に true を返し、== は、値が一致する場合に true を返します。== は、暗黙的な型変換を行うため、予期しない結果を返すことがあります。例えば、以下のような場合、== を使うと型変換によって空文字が 0 となり、if 文の結果が true となってしまいます。
if (0 == '') { console.log('true'); //こちらの結果となってしまう } else { console.log('false'); }
予期しない結果が起こることを防ぐために === を使用しましょう。不等価比較は != ではなく !== を使いましょう。
まとめ
以上、JavaScript コーディングをモダン化するために今日から実践できるポイントを４つ紹介しました。まだまだ他にもモダン化のポイントはありますので、今後も情報発信していきたいと思います。 弊社からの技術情報に興味がありましたら、弊社メールマガジンに是非ご登録ください。
