TECH I.S.

JavaScriptのベストプラクティス


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


グローバル変数を避ける

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

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

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

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


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

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

ローカル変数はvarlet、 または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


=== 比較を使用

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

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

0 == "";        // true 1 == "1";       // true 1 == true;      // true 0 === "";       // false 1 === "1";      // false 1 === 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()関数は、テキストをコードとして実行するために使用されます。ほとんどの場合、これを使用する必要はありません。

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



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

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

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

スクールの詳細