いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。

↑私が10年以上利用している会計ソフト！

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>';

解決策2：insertAdjacentHTML() を使う

また、insertAdjacentHTML() も利用できます。第一引数で挿入する場所、第二引数で挿入したいテキストを指定します。HTMLタグも含められます。挿入する場所は以下の4つが指定できます。

• beforebegin … 要素の直前に挿入
• afterbegin … 要素内部の、最初の子要素の前に挿入
• beforeend … 要素内部の、最後の子要素の後に挿入
• afterend … 要素の直後に挿入

<!-- beforebegin -->
<p>
<!-- afterbegin -->
こんにちはー
<!-- beforeend -->
</p>
<!-- afterend -->

記述例（insertAdjacentHTML）：

const text = document.getElementById('text');
text.insertAdjacentHTML('afterbegin', '<strong>やっほーい</strong>');

document.write() – HTML Standard

keyCode

入力されたキーの種類を判定するもので、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('右矢印キー');
  }
});

KeyboardEvent.keyCode – Web API | MDN

substr

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

これまでの記述例：

var str = '今日はいい天気ですね';
console.log(str.substr(3, 4));
// → いい天気

解決策：substring を使う

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

記述例：

var str = '今日はいい天気ですね';
console.log(str.substring(3, 7));
// → いい天気

String.prototype.substr() – JavaScript | MDN

var

変数を指定するための var は、同じ変数名が複数あってもエラーとして検知されなかったり、ブロックスコープに対応できないなど、意図しないバグが発生しやすい仕様となっています。ここ2、3年で書かれた書籍などでは見かけることも少なくなりましたが、過去の書籍や記事には登場しているため、コードを参考にするときは注意が必要です。

これまでの記述例：

var test = 'うぇーい';
var test = 'げへへ';
// ↑ 同じ変数名なのにエラーにならない！

解決策：

再代入できるが、再宣言はできない let 、または再代入も再宣言もできない const で定義しましょう。うっかり同じ変数名で書き換えてしまう前にエラーとなるので、バグに気づきやすくなります。コードの可読性も上がりますよ。let はループで使われたりしますね。再代入の必要がなければ、極力 const を使うといいでしょう。

記述例（let）：

for(let i=1; i<=5; i++){
  console.log(`${i} 回目`);
}

記述例（const）：

const greeting = 'おはよう朝だね、まだ眠いけど大丈夫、大丈夫';

var は明確に非推奨とは書かれていませんが、前述の理由からなるべく let や const を利用するといいでしょう。

Webの世界はアップデートが多いので、常にアンテナを貼って学び続けることが大切ですね！