デジタルが生活に無くなてはならない昨今において、プログラミングでは重たい処理をどうにかして緩和するかがポイントになります。
ベテランエンジニアに限った話ではなく、駆け出しエンジニアでも所属先のリーダーや顧客から求められることでしょう。
JavaScriptの場合だと代表的なテクニックの一つにWeb Workerというものがあり、重たい処理だけを別のファイルに逃して実行することがあります。
一方で駆け出しエンジニアの方の中にはWeb Workerを習っていなかったり、あまり理解できていないケースがあると思います。
今回はあえてWeb Workerを使わずに重たい処理を何とかするテクニックの一つを紹介します。
勉強中の方でも理解できる内容ですのでぜひ一緒にやってみましょう。
また動画もあるので必要に応じて活用してください。
JavaScriptでメモ化を作ってみる
結論から言うと1回処理した結果を保存しておく手法で「メモ化」とも呼ばれたりします。
以下のようなHTML、JSファイルを想定してみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="wrap">
<button id="btn">計算する</button>
</div>
</body>
</html>const result = document.querySelector("#result");
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
let total = 0;
for (let i = 1; i < 2000000000; i++) {
total += 1;
}
console.count(total);
});
画面に「計算する」というボタンがあり、こちらをクリックすると計算して結果をコンソールに表示するものです。
計算の内容としては20億回分だけ加算するだけですが、実行すると計算量が多いためにコンソールに結果が表示されるまで１〜２秒くらいのタイムラグが発生します。
1回だけだと許容できるかもしれませんが何回もやらないといけないとすると全体で何十秒もかかることになるわけです。
こちらの処理について少しでも動作を軽くするために以下のような変更を加えてみます。
const result = document.querySelector("#result");
const btn = document.querySelector("#btn");
// ここから変更
let value = null;
btn.addEventListener("click", () => {
if (value != null) {
console.count(value);
} else {
let total = 0;
for (let i = 1; i < 2000000000; i++) {
total += 1;
}
value = total;
console.count(total);
}
});ポイントとしては変数valueを用意して、1回目の計算結果をvalueに代入する所です。
valueの初期値はnullにしておき、addEventListenerの中で条件分岐を作って、
・valueがnullでなければ、valueをそのまま表示して終了する
・valueがnullであれば計算をして結果を表示して終了する
という動きにしました。
「valueがnullではない」という状態は、1回目の計算が行われてvalueには計算結果が入っているということになります。
同じ計算をするのであれば結果も同じになるわけで、結果が同じであれば変数として保存しておくと毎回計算しなくて良くなるわけです。
この状態で再度実行してみます。
1回目の動きは変わらずタイムラグがありますが、2回目以降からはクリックしてからリアルタイムに結果が表示されているのが分かります。
同じようなものをWeb Workerで作るとなるとコード量が増えたり複雑になるかと思います。
あくまで状況によって対応を変える前提ではありますが、プログラミングの世界は正解は1個ではないことが多いです。
何気ない処理でも自分の工夫によってパフォーマンスを向上させたり、経験値の不足をカバーできるはずですので参考になれば幸いです。