【1】JavaScriptのベストプラクティスをご存知でない?

公開:2021/02/14
更新:2021/02/20
4 min読了の目安(約3600字TECH技術記事 4

はじめに

鋭いまさかりやコードレビューを受け、日々しがみつきながら業務に励んでおります。そこから学んだ JavaScriptのTips をアウトプットさせていただきます。もしご指摘などあればコメントなどよろしくお願いします。

1.== ではなく === を 使おう!

== 等価演算子 ではなく === 厳密演算子を使用することを勧める理由として、== 等価演算子は文字列と数値の比較の場合、文字列を数値に変換してくれます。また === 厳密演算子は、型を変換することなく厳密に等しいならば true を返します。ですので、読み手側は等価演算子の知識(文字列を数値に変換してくれる)に悩むことなくコードを読むことができますね。

script.js
let a = "1";
let b = 1;

console.log(a==b);   // result:true
console.log(a===b);  // result:false

2.Falsy値(偽値)について

| false | false キーワード|
| '' | 空文字列の値 |
| null | 何も値が存在しないこと |
| undefined | プリミティブ値 |
| NaN | 非数 |
| 0 | 非数 |

非数について

非数(英語:Not a Number)とは未定義な値か、特に浮動小数点数の計算の結果で、表すことができない数値(データ型)のことを言います。

3.行末に ;(セミコロン) を忘れないで

セミコロンを忘れてもエラー表示がありません。なぜならJavaScriptパーサー(ソースコードファイルを解析するコンパイラ、インタプリタのモジュール)によって挿入されるからです。
ですが、行末にセミコロンを使うのは良いことで、可読性を上げてくれます。

オブジェクトのコンストラクタの作成

script.js
function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;
}  

let yamada = new Person("yamada", "tarou");

4.typeof, instanceof や constructorを使用するときは気をつけよう

typeof
オブジェクトやプリミティブ型を表す値を返します。Nullの場合は"object"を返し,ArrayやDateの場合も"object"を返します。

script.js
let array = ["a", "b", "c"];

// 配列に typeof すると戻り値は "object"
typeof array;   // "object" 

instanceof
オブジェクトが自身のプロトタイプにコンストラクタの prototype プロパティを持っているかを確認します。
戻り値は真偽値(true/false)になる

script.js
let array = ["a", "b", "c"];

// array は Array のオブジェクトを持っているか確認する
array instanceof Array // true

constructor
内側のprototypeプロパティのプロパティで、コードで上書きすることができる

script.js
let array = ["a", "b", "c"];

//コードで上書きされて値は空になります。
array.constructor();  // [] 

5.即時実行関数、 IIFE (Immediately Invoided Function Expression) について

なぜ IIFE を使うのでしょうか?
例を一つあげると、アプリケーション開始時に一回だけ実行したいような初期化処理や一度だけ実行することを保証したい場合に適してます。さらにデータの保護が簡単です。IIFE 内部で正しく変数を宣言してさえいれば、外部の環境にある変数と干渉しません。

script.js
(function(){
    // ただちに一度実行される処置
})();  
(function(a,b){
    let result = a+b;
    return result;
})(10,20)

6.配列からランダムで項目を抽出する

script.js
let items = ['tarou', 23 , 'yuko' , 2 , 789 , 'yamada' , 8852, , 'hanako' , 2145 , 119];
let  randomItem = items[Math.floor(Math.random() * items.length)];

7.指定した範囲からランダムで項目を抽出する

このコードスニペットは便利で,テストデータを生成するときに使います。

script.js
let x = Math.floor(Math.random() * (max - min + 1)) + min;

8. 0から指定した数値ほどの配列を生成する

このコードスニペットは便利で,テストデータを生成するときに使います。

script.js
let numbersArray = [] , max = 100;
for( let i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100] 

9.英数字のランダムな値を生成する

このコードスニペットは便利で,テストデータを生成するときに使います。

script.js
function generateRandomAlphaNum(len) {
  let rdmString = "";
  for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
  return  rdmString.substr(0, len);
}

10.配列の数値をシャッフルする

このコードスニペットは便利で,テストデータを生成するときに使います。

script.js
let numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* numbersは→の例のようになる [120, 5, 228, -215, 400, 458, -

参考にした記事

Falsy値について

https://developer.mozilla.org/ja/docs/Glossary/Falsy
typeof, instanceof や constructorを使用するときは気をつけよう
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/instanceof
配列からランダムで項目を抽出すること
https://css-tricks.com/snippets/javascript/select-random-item-array/
配列の数値をシャッフルする
https://stackoverflow.com/questions/962802/is-it-correct-to-use-javascript-array-sort-method-for-shuffling/962890

まとめ