JavaScriptのベストプラクティス

グローバル変数を避ける、newを避ける、 ==を避ける、 eval()を避ける。

グローバル変数を避ける

グローバル変数の使用を最小限に抑えます。

これには、すべてのデータ型、オブジェクト、および関数が含まれます。

グローバル変数と関数は、他のスクリプトで上書きできます。

代わりにローカル変数を使用し、クロージャの使用方法を学習してください .

常にローカル変数を宣言する

関数で使用されるすべての変数はローカル変数として宣言する必要があります。

ローカル変数はvar、let、またはconstキーワードを使用して宣言する必要があります。宣言しないとグローバル変数になります。

strictモードでは、宣言されていない変数は許可されません。

上部の宣言

すべての宣言を各スクリプトまたは関数の先頭に置くことは、適切なコーディング方法です。

これを心がけましょう：

よりクリーンなコードを与える
ローカル変数を探す単一の場所を提供する
不要な (暗黙の) グローバル変数を回避しやすくする
不要な再申告の可能性を減らす

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
 
// Use later
firstName = "John";
lastName = "Doe";
    
price = 19.90;
discount = 0.10;
    
fullPrice = price - discount;

これはループ変数にも当てはまります。

    for (let i = 0; i < 5; i++)  {

変数の初期化

変数を宣言するときに変数を初期化することは、コーディングの良い習慣となります。

これを心がけましょう：

よりクリーンなコードを与える
変数を初期化する単一の場所を提供する
未定義の値を避ける

// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};

変数を初期化すると、使用目的(および使用目的のデータ型)がわかります。

constでオブジェクトを宣言する

constを使用してオブジェクトを宣言すると、型が誤って変更されるのを防ぐことができます。

例

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

constを使用して配列を宣言する

constを使用して配列を宣言すると、型が誤って変更されるのを防ぐことができます。

例

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

new Object() を使用しないでください

new String()の代わりに""を使用します。
new Number()の代わりに0を使用します。
new Boolean()の代わりにfalseを使用します。
new Object()の代わりに{}を使用します。
new Array()の代わりに[]を使用します。
new RegExp()の代わりに/()/使用します。
new Function()の代わりにfunction (){}使用します。

例

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

自動型変換に注意

JavaScriptは緩く型付けされています。

変数には、すべてのデータ型を含めることができます。

変数はそのデータ型を変更できます。

例

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

数値が誤って文字列またはNaN(非数値)に変換される可能性があることに注意してください。

数学演算を行う場合、JavaScriptは数値を文字列に変換できます。

例

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

文字列から文字列を減算すると、エラーは発生しませんが、NaN(非数値)が返されます。

例

"Hello" - "Dolly"    // returns NaN

=== 比較を使用

比較演算子==は、比較前に常に(一致する型に)変換します。

演算子===は値と型の比較を強制します。

例

== "";        // true
== "1";       // true
== true;      // true
    
=== "";       // false
=== "1";      // false
=== true;     // false

パラメータのデフォルトを使用

欠落した引数で関数が呼び出された場合、欠落している引数の値はundefinedで設定されます。

未定義の値を使用するとコードが壊れる可能性があります。引数にデフォルト値を割り当てるのは良い習慣です。

例

function myFunction(x, y) {
    if (y === undefined) {
      y = 0;
     }
}

ECMAScript 2015関数定義でデフォルトのパラメーターを許可します。

function (a=1, b=1) { /*function code*/  }

関数のパラメーターと引数の詳細については、次を参照してください。関数パラメータ

スイッチをデフォルトで終了する

switchステートメントの最後には常にdefaultをつけること。必要ないと思っても。

例

switch (new Date().getDay()) {
   case 0:
      day = "Sunday";
      break;
  case 1:
      day = "Monday";
      break;
  case 2:
    day = "Tuesday";
     break;
   case 3:
    day = "Wednesday";
      break;
   case 4:
    day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
      break;
  default:
    day =  "Unknown";
}

数値、文字列、およびブール値をオブジェクトとして避ける

数値、文字列、またはブール値を常にプリミティブ値として扱います。オブジェクトとしてではありません。

これらの型をオブジェクトとして宣言すると、実行速度が遅くなり、厄介な副作用が発生します。

例

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

さらに悪いことに：

例

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

eval()の使用を避ける

このeval()関数は、テキストをコードとして実行するために使用されます。ほとんどの場合、これを使用する必要はありません。

任意のコードが実行される可能性があるため、セキュリティ上の問題もあります。

エンジニアがおすすめするプログラミングスクール９選

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング