2/24 JavaScriptのレビュー指摘 - プログラム備忘録

フロントエンドに強いエンジニアが部署にいるのでJavaScriptのレビューをしていただいてます。
以前出た高階関数の利用の他に、以下の説明を受けました。

①変数宣言にはconst, letを利用すること。varは巻き上げが起こるのでエラーを発見しにくいみたい。
②単純な分岐処理には三項演算子を利用すること
③コードフォーマッターにprettierを利用すること
④静的解析にはESLintを利用すること

PHPではcs-fixerやPHPStanを使ってたけど同じようなのがJavaScriptにもあるんやな。

const と let の違いについて
JavaScriptにおける const と let の主な違いは、変数の値が再代入可能かどうかです。
const: 宣言した変数に再代入をすることができません。ただし、オブジェクトや配列などの参照型については、その中身を変更することは可能です。
let: 宣言した変数に再代入をすることができます。

const a = 1; a = 2; // エラーが発生する
let b = 3; b = 4; // bの値が4に変更される
const c = { x: 1 }; c.x = 2; // cの中身が { x: 2 } に変更される
let d = [1, 2, 3]; d.push(4); // dの中身が [1, 2, 3, 4] に変更される

const は再代入ができないため、一度値を設定したら変更する必要がない場合に利用すると良いでしょう。一方、let は再代入ができるため、値が変化する可能性がある場合に利用すると良いでしょう。

varの巻き上げについて

JavaScriptにおいて、varで宣言された変数は、そのスコープ内で巻き上げ（Hoisting）されるという特性があります。巻き上げとは、変数の宣言がコードの先頭に移動することを指します。

console.log(a); // undefined
var a = 1;

このコードは、変数 a を宣言してから、その値を 1 に設定しています。しかし、コードを実行すると undefined が出力されます。これは、var で宣言された変数が、実際にその行に到達する前に、宣言が先頭に移動したためです。

この特性により、varで宣言された変数は、宣言前に参照しようとしても undefined となるため、注意が必要です。また、このような特性を持たない let や const を使うことで、より安全で予測しやすいコードを書くことができます。

三項演算子について
JavaScriptにおいて、三項演算子は以下のように書きます。

条件式 ? 真の場合の処理 : 偽の場合の処理

この演算子は、if-else文と同様に条件分岐を行いますが、より簡潔に書くことができます。条件式が true の場合には、真の場合の処理が実行され、false の場合には偽の場合の処理が実行されます。

以下に例を示します。

const age = 20;
const message = age >= 20 ? "成年です" : "未成年です";
console.log(message); // "成年です"

上記の例では、変数 age が 20 以上であるかどうかを条件式で評価し、真の場合には message に "成年です" を代入し、偽の場合には message に "未成年です" を代入しています。

三項演算子は、短い処理を分かりやすく書く場合によく利用されますが、複雑な条件分岐を行う場合は、if-else文を使った方が読みやすいコードを書くことができます。また、複数の処理を実行したい場合には、ブロックスコープを作成する必要があるため、if-else文を使った方が適しています。

prettier と ESLintについて
PrettierとESLintは、どちらもコードの品質を向上させるためのJavaScriptのツールですが、それぞれ異なる役割を持っています。

Prettierは、コードのフォーマットを統一するためのツールです。コードを自動的に整形し、読みやすく保つことができます。Prettierは、改行、インデント、クオートのスタイルなど、コードの外観に関する様々なルールを自動的に適用することができます。これにより、開発者がコードの見た目に気を取られることなく、コードの品質を維持することができます。

一方、ESLintは、コードの品質を検証するためのツールです。コードに文法的な問題や、ベストプラクティスに反するコードが含まれていないかをチェックし、開発者に警告やエラーメッセージを表示することができます。ESLintは、変数の未使用、関数の未定義、不適切な命名規則など、コードの内部品質に関するルールを定義することができます。これにより、開発者が品質の高いコードを書くための指針を提供することができます。

つまり、Prettierはコードのフォーマットに関するツールであり、ESLintはコードの品質に関するツールです。両方のツールを併用することで、コードのフォーマットと品質の両方を向上させることができます。ただし、ルールの設定や設定ファイルの管理など、両方のツールを組み合わせることで発生する課題に対応する必要があるため、適切に設定する必要があります。