JavaScript

【2022年版】今は非推奨となったJavaScriptの書き方

いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated(非推奨)」と書かれている…なんてこともありますよね。プログラミングあるあるですが、今回はJavaScriptを書いていて自分の知る限り非推奨となったものをいくつか紹介します。他にあればぜひ教えて頂きたいです。

document.write

画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか?これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。

これまで

document.write('元気ですか!')

解決策1:textContent や innerHTML を使う

代わりに文字列を書き換える textContent や、HTMLも含めた文字列を挿入できる innerHTML を使いましょう。document.write よりも影響範囲が狭く、不具合を防げます。以下の例ではHTMLで「text」というIDのついた要素がある場合の書き方です。

記述例(textContent):

const text = document.getElementById('text');

text.textContent = '敬礼!(白目)';

記述例(innerHTML):

const text = document.getElementById('text');

text.innerHTML = '<strong>必殺!スピニングバードキック!</strong>';

keyCode

入力されたキーの種類を判定するもので、keydown や keyup イベントと組み合わせて利用します。これまでは event.keyCode として利用していましたが、非推奨となりWeb標準から削除されるため、既存のコードは更新するよう書かれています。

これまでの記述例:

入力されたキーの種類を判定するもので、keydown や keyup イベントと組み合わせて利用します。これまでは event.keyCode として利用していましたが、非推奨となりWeb標準から削除されるため、既存のコードは更新するよう書かれています。

これまでの記述例:

window.addEventListener('keydown', (event) => {

  if(event.keyCode === 39){

    console.log('右矢印キー');

  }

});

解決策:key を使う

keyCode では入力したキーを数値で返していましたが、key ではそれぞれに割り当てられた文字列を返します。アルファベットや数字はそのままですが、スペースや矢印キーなどはJavaScript Event KeyCodesで確認できます。入力されたキーを表示してくれるサイトです。大きく表示されるキーコードではなく、画面左下に表示される「event.key」を参照するといいでしょう。

記述例:

window.addEventListener('keydown', (event) => {

  if(event.key === 'ArrowRight'){

    console.log('右矢印キー');

  }

});

substr

substr は任意の文字列の中から指定した部分を切り出すためのメソッドです。「○文字目から△文字分切り出す」というように、開始位置と文字数を指定します(数値は0から数えます)。もともとECMAScript言語として認められていなかったので、非推奨とされています。

これまでの記述例:

var str = '今日はいい天気ですね';

console.log(str.substr(3, 4));

// → いい天気

解決策:substring を使う

substr が開始位置と文字数を指定していたのに対して、substring は開始位置と終了位置を指定します。開始位置は+1した数値を記述する点に注意しましょう。

varstr = '今日はいい天気ですね';

console.log(str.substring(3, 7));

// → いい天気

var

これはもう時代の流れですね。変数にはlet,定数にはconstを使っておいた方がナウいです。

-JavaScript