イマドキなJavaScript開発で避けるべき古い書き方と非推奨の慣習

Posted on 2024年8月29日 by 小清水和真

JavaScriptは、1995年に誕生して以来、急速に進化し続けています。
その間、言語そのものや、その周りのツール、フレームワークも著しく変化してきました。
この進化に伴い、かつて標準的だった書き方や方法が、今では非推奨となり、
よりモダンで効率的な方法へと置き換えられています。
今回は、現代のJavaScript開発において避けるべき古い書き方や
使わなくなったものについて詳しく解説します。

`var`の使用

`var` の問題点

var は、JavaScriptが誕生した当初から使われていた変数宣言の方法です。
しかし、現在では let や const が主流となり、var はほとんど使われなくなっています。
その理由は、var のスコープや再代入の挙動が直感的でないためです。

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}

上記のコードでは、x が if ブロックの外でもアクセス可能です。
var は関数スコープを持ちますが、ブロックスコープを持ちません。
このため、意図せずスコープを超えて変数が利用されるバグが発生しやすくなります。

代替としての `let` と `const`

let と const は、ブロックスコープを持ち、再代入や再宣言に対してより厳密なルールを適用します。

function example() {
    if (true) {
        let y = 10;
    }
    console.log(y); // ReferenceError: y is not defined
}

このように、let や const を使用することで、スコープの問題を回避できます。また、const を使用することで、再代入を防ぎ、意図しない変数の変更を防ぐことができます。

`==` と `!=` の使用

型変換を伴う等価演算子の問題

JavaScriptには、== と != という、型の異なる値同士を比較する際に
自動で型変換を行う演算子があります。
これは、特に初心者にとっては便利に思えるかもしれませんが、
予期せぬ動作を引き起こす原因となることが多いです。

console.log(0 == '0'); // true
console.log(false == ''); // true

上記の例では、0 と '0' が等しいと見なされるだけでなく、
false と空文字列も等しいと見なされます。
これは、JavaScriptの暗黙の型変換によるもので、バグを引き起こしやすいです。

厳密等価演算子 `===` と `!==` を使おう

現代のJavaScript開発では、常に厳密等価演算子 === と !== を使用することが推奨されます。
これにより、比較の際に型変換が行われず、より予測可能な動作が得られます。

console.log(0 === '0'); // false
console.log(false === ''); // false

このように、厳密等価演算子を使うことで、予期せぬ比較結果を避けることができます。

`for` ループでの配列操作

旧来の `for` ループの問題点

かつて、配列を操作するためのループとして for ループがよく使われていました。
しかし、これには繰り返し条件やインデックス操作が必要で、
冗長でミスを招きやすいという問題があります。

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

モダンな配列操作方法

現在では、forEach や map、filter、reduce といった高階関数が標準的に使われています。
これらを使うことで、より簡潔で読みやすいコードを書くことができます。

array.forEach(item => console.log(item));

また、map を使えば、配列の各要素に対して処理を行い、新しい配列を生成することも可能です。

const doubled = array.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

コールバック地獄

コールバックの問題点

非同期処理を扱う際、かつてはコールバック関数がよく使われていました。
しかし、複数の非同期処理をネストして扱うと、コードが深く入り組んでしまい、
読みづらくなる「コールバック地獄」と呼ばれる問題が発生します。

doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log(finalResult);
        });
    });
});

`Promise` と `async/await` の利用

モダンなJavaScriptでは、Promise と async/await が非同期処理の主流となっています。
これにより、コールバック地獄を避け、コードを直線的かつ読みやすくすることができます。

doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

さらに、async/await を使うことで、非同期処理を同期的なコードのように書くことができ、
非常に直感的です。

async function asyncFunction() {
    try {
        const result = await doSomething();
        const newResult = await doSomethingElse(result);
        const finalResult = await doThirdThing(newResult);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

`document.write` の使用

`document.write` の問題点

document.write は、ページのロード中に直接HTMLを挿入するための古い方法です。
しかし、これを使用すると、既存のページ内容が消去されてしまったり、
後から動的に内容を追加することが困難になります。

document.write('<h1>Hello World</h1>');

この方法は、特にモダンなWebアプリケーション開発では非推奨とされています。

代替としてのDOM操作

代わりに、document.createElement や innerHTML、
さらには仮想DOMを使ったライブラリ（例: React）を使用することが推奨されます。

const heading = document.createElement('h1');
heading.textContent = 'Hello World';
document.body.appendChild(heading);

このように、DOMの操作を直接行うことで、
より制御された方法でページの内容を更新することができます。

グローバル変数の乱用

グローバル変数の問題点

グローバル変数は、どこからでもアクセスできるため便利に思われがちですが、
複数の場所で同じ変数を変更してしまうとバグの温床となります。
また、スコープが広いために意図しない副作用が発生するリスクが高まります。

var globalVariable = 'I am global';
function doSomething() {
    globalVariable = 'I have changed';
}
doSomething();
console.log(globalVariable); // 'I have changed'

モジュールスコープとローカルスコープ

モダンなJavaScriptでは、モジュールスコープやローカルスコープを活用し、
変数のスコープを限定することが推奨されます。
これにより、予期しない変数の変更を防ぎ、コードの保守性が向上します。

let localVariable = 'I am local';
function doSomething() {
    let localVariable = 'I have changed locally';
    console.log(localVariable); // 'I have changed locally'
}
doSomething();
console.log(localVariable); // 'I am local'

`with` ステートメントの使用

`with` ステートメントの問題点

with ステートメントは、オブジェクトのプロパティに対する複数の操作を
簡略化するために用いられることがありましたが、現在では非推奨とされています。
これは、with がスコープを不明瞭にし、コードの予測可能性を低下させるからです。

with (someObject) {
    a = 1;
    b = 2;
}

上記のコードでは、a や b が someObject のプロパティであるのか、
それともグローバル変数であるのかが曖昧になります。
この曖昧さがバグの原因となるため、モダンなJavaScript開発では with の使用は避けるべきです。

代替方法

代わりに、オブジェクトのプロパティにアクセスする際には、
明示的にオブジェクト名を使用してプロパティを指定します。
これにより、コードが明確で読みやすくなります。

someObject.a = 1;
someObject.b = 2;

また、データの操作やアクセスには、データの構造を明示的に扱うことが推奨されます。
これにより、コードの可読性が向上し、バグのリスクが減少します。

`eval()` 関数の使用

`eval()` の危険性

eval() 関数は、文字列として与えられたJavaScriptコードを評価・実行するために使用されます。
しかし、この関数は非常に危険であり、セキュリティリスクや
パフォーマンス問題を引き起こす可能性があります。
特に、外部から入力された文字列を eval() で実行する場合、
悪意のあるコードが実行されるリスクが高まります。

let code = "console.log('Hello World')";
eval(code); // 'Hello World' と表示される

上記の例では無害なコードが実行されていますが、
もし code がユーザーからの入力や外部ソースから提供されたものであれば、
意図しない結果やセキュリティ侵害が発生する可能性があります。

代替としての安全な実装

eval() を使用する代わりに、必要なロジックを事前に定義した関数やメソッドで処理する方が安全です。
また、データの操作には専用のパーサーや構文解析ツールを利用することが推奨されます。

JavaScriptにおける独自の拡張（プロトタイプの汚染）

プロトタイプの汚染問題

JavaScriptでは、すべてのオブジェクトがプロトタイプチェーンを持っています。
これにより、JavaScriptのビルトインオブジェクト（例えば、Array や String など）を
拡張することが可能です。
しかし、これを行うと、他のコードと衝突するリスクが高まり、
予期せぬ動作を引き起こす可能性があります。

Array.prototype.myCustomMethod = function() {
    // カスタムメソッドの内容
}

このように、Array のプロトタイプを拡張すると、
すべての配列でこのカスタムメソッドが利用可能になります。
しかし、他の開発者が同じ名前のプロパティやメソッドを追加しようとすると、
競合が発生し、バグが発生する可能性があります。

避けるべき理由と代替方法

モダンなJavaScript開発では、プロトタイプを汚染することは避け、
必要な機能は独立した関数やモジュールとして実装することが推奨されます。
これにより、コードの競合を防ぎ、再利用性や保守性が向上します。

古いブラウザのサポートを前提としたコード

古いブラウザのサポート問題

かつては、Internet Explorer（IE）などの古いブラウザをサポートするために、
特別なコードやポリフィルを多くの開発者が書いていました。
しかし、これらのブラウザは現在ではほとんど使用されておらず、
現代のJavaScript開発においては不要なコードとなっています。

例えば、古いブラウザ向けに addEventListener がサポートされていない場合に使用されていたコード:

if (element.addEventListener) {
    element.addEventListener('click', function() {
        // イベントハンドラ
    });
} else {
    element.attachEvent('onclick', function() {
        // イベントハンドラ
    });
}

モダンブラウザ向けの開発

現代では、モダンなブラウザのみをターゲットにしたコードを書き、
必要に応じてバンドラーやトランスパイラーを使用して、
古いブラウザ向けに必要な部分だけをポリフィルする方法が一般的です。
これにより、コードが簡潔になり、メンテナンスが容易になります。

スプレッド演算子や分割代入を使用しないコーディング

モダンな構文を使わない問題

スプレッド演算子や分割代入は、モダンなJavaScriptで導入された非常に便利な構文です。
しかし、これらを避けると、コードが冗長になり、読みづらくなります。

例えば、従来の方法で配列を結合する場合:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combined = array1.concat(array2);

これをスプレッド演算子を使って書くと:

let combined = [...array1, ...array2];

また、オブジェクトのプロパティを取得する際にも、従来の方法では以下のようになります:

let person = { name: 'John', age: 30 };
let name = person.name;
let age = person.age;

これを分割代入を使うと:

let { name, age } = person;

結論

モダンな構文を活用することで、コードをより簡潔で読みやすく保つことができます。
スプレッド演算子や分割代入などの新しい機能は、JavaScriptのコードをより直感的にし、
バグを減らす効果があります。

まとめ

現代のJavaScript開発では、古い書き方や非推奨の方法を避けることが非常に重要です。
var の代わりに let や const を使う、== の代わりに === を使う、
コールバック地獄を避けるために Promise や async/await を使うなど、
これらのポイントを押さえることで、より安全でメンテナンスしやすいコードを書くことができます。

また、JavaScriptの進化に伴い、新しい構文やAPIを積極的に取り入れることで、
コードの品質を向上させ、開発効率を高めることができます。
今回紹介したポイントを参考に、モダンなJavaScriptの開発を心がけましょう。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

varの使用

var の問題点

代替としての let と const

== と != の使用

型変換を伴う等価演算子の問題

厳密等価演算子 === と !== を使おう

for ループでの配列操作

旧来の for ループの問題点

モダンな配列操作方法

コールバック地獄

コールバックの問題点

Promise と async/await の利用

document.write の使用

document.write の問題点