ツイートはてブ LINE Pocket

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 を押して、ポップアップリストから '===' に置き換えるを選択します。

2025 年 10 月 20 日

WebStorm 2026.1 ヘルプ