JavaScript の最新プラクティスを紹介する

この記事では、WebStorm が提供するコーディング支援によって、最新の JavaScript の主要なベストプラクティスに沿って、よりクリーンで保守しやすく、パフォーマンスの高いコードを書く方法を学びます。

古いコードベースを扱う際には、古いパターンやプラクティスに遭遇することがあります。 WebStorm は、そのようなパターンをハイライトし、クイックフィックスを提案してサポートします。

let と const を使って変数を宣言する

let と const は、より予測可能で、関数スコープの var を使用して変数を宣言するときに発生する可能性のある予期しないエラーを削減する block-scoping(英語) を提供します。

var 宣言は意図的に使用される場合もありますが、古いコードでは古いアプローチの結果として発生する可能性があります。

WebStorm は var の使用を検出し、それを let または const に置き換えることを提案します。

ハイライトされた var 宣言の上にマウスを移動し、 const に変換リンクをクリックします。
キャレットを var 宣言に置き、 Alt+Enter を押して、ポップアップリストから let に変換するまたは const に変換を選択します。

サンプル

for (let j = 1; j < 5; j++) {
    console.log(j);
}
console.log(j);
/*You get 'Uncaught ReferenceError: j is not defined'*/

/*If we did this using var:*/
for (var j = 1; j < 5; j++) {
    console.log(j);
}
/* logs the numbers 1 to 4*/
console.log(j);
/*You’d get 5 as it still exists outside the loop*/

        
   

関数の代わりにクラスを使用する: プロトタイプ

多くの古いコードベースでは、クラスのエミュレーションに関数プロトタイプのアプローチを使用することがありますが、クラスの方が構文がはるかにきれいなので、クラスを使用することをお勧めします。

 function Person(name) {
     this.name = name;
 }
 Person.prototype.getName = function () {
     return this.name;
 }

 const p = new Person('A');
 console.log(p.getName()); // 'A'
                
    

class Person {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

const p = new Person('A');
console.log(p.getName()); // 'A'
                
    

WebStorm は、クラスに変換コンテキストアクションで呼び出せるリファクタリングを提案します。

変換する関数の名前にキャレットを置き、 Alt+Enter を押します。
リストからクラスに変換を選択します。
リファクタリングプレビューで、提案された更新を確認し、準備ができたらリファクタリングをクリックします。

アロー関数式を使用する

アロー関数はより簡潔な構文を提供し、 this のコンテキストを自動的にバインドするため、クラスのメソッドなど this がわかりにくくなる場面で特に役立ちます。

   const numbers = [1, 2];

   numbers.map(function (num) {
       return num * 2;
   });

const numbers = [1, 2];

numbers.map(num => num * 2);

WebStorm を使うと、専用のコンテキストアクションでアロー関数を導入できます。

キャレットを匿名関数内に置き、 Alt+Enter を押します。
ポップアップリストから、アロー関数に変換を選択します。

オプショナルチェイニングを使用する

オプショナルチェイニング演算子（?. ）は、プロパティ、配列要素、メソッドにアクセスする前に、それらが存在するかどうかを自動的にチェックします。チェーンの一部が null または undefined である場合、エラーをスローするのではなく、 undefined を返します。オプショナルチェイニングがない場合、このチェックには冗長で反復的なコードが必要になります。

const guest = {
    name: "John Doe",
    son: {
        name: "Ben"
    },
    daughter: {
        name: "Catherine"
    }
};

const daughterName = (guest.daughter && guest.daughter.name) ?? undefined;
const sisterName = (guest.sister && guest.sister.name) ?? undefined;
console.log(daughterName);
console.log(sisterName);
                
    

const guest = {
    name: "John Doe",
    son: {
        name: "Ben"
    },
    daughter: {
        name: "Catherine"
    }
};

const daughterName = (guest.daughter?.name) ?? undefined;
const sisterName = (guest.sister?.name) ?? undefined;
console.log(daughterName);
console.log(sisterName);
                
    

WebStorm は、 ?. 演算子を導入するためのコンテキストアクションを提案します。

変換する式にキャレットを置き、 Alt+Enter を押します。
ポップアップリストから、オプショナルチェイニングを使用するを選択します。

async/await 構文を使用する

async/await 構文は、 .then() と .catch() の連鎖を不要にすることで、非同期操作の処理を簡素化します。これにより、特に複数の非同期呼び出しを扱う場合、コードの可読性、保守性、理解しやすさが向上します。

function fetchData() {
    return fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error(error);
        });
}
                
    

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
                
    

WebStorm を使うと、 Async 関数に変換するコンテキストアクション経由でコードに async/await 構文を導入できます。

async/await 構文を導入する関数にキャレットを置き、 Alt+Enter を押します。
ポップアップリストから、同期機能への変換を選択します。

厳密な等価を使用する (===)

厳密な等価性 (==) の代わりに厳密な等価性 (===) を使用すると、厳密な等価性では型の強制変換は実行されず、値と型の両方が直接比較されるため、より予測可能で信頼性の高い動作が得られます。

console.log([] == ![]); // true (this is surprising!)
console.log(0 == ''); // true

console.log([] == ![]); // true (this is surprising!)
console.log(0 === ''); // false (as expected)

WebStorm は、緩い等値の使用で起こりうる問題を検出し、信頼性の低いコード箇所をハイライトしてクイックフィックスを提案します。

ハイライトされた緩い等式の上にマウスを移動し、 '===' に置き換えるをクリックします。
キャレットを === 方程式に置き、 Alt+Enter を押して、ポップアップリストから '===' に置き換えるを選択します。

2026 年 6 月 8 日