本記事について
おそらく初心者向けですが、
Javascriptで、a || b
という記述があった時の論理演算子の動きについて共有します。
Javascriptの開発の中で、下記のような記述を読み解くのに少し時間がかかったので、自分用のメモとしても残しておきます。
※こちらはService Worker+Cache APIを実装した際のコードですが、Service Workerについては別の機会にまた解説したいと思います。
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.match(event.request)
.then(function (response) {
return response || fetch(event.request)
.then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Javascriptの処理
この処理を順番に整理すると
・caches.open(CACHE_NAME)でCACHE_NAMEと一致したかどうかを確認し、Promiseを返す（成功していればthen内部の処理へ）
・cache.match(event.request)でcacheの中身がevent.requestにマッチしていればPromiseを返す（そして2つ目のthen内部の処理へ）
return response || fetch・・・・
と続いていくわけですが、
ここの処理は、
レスポンスを返すか、fetchでリクエストを送るか
ということになります。（当たり前だ）
a || bの処理の仕様
・・・なのですが、処理の中で
a || b（aまたはb）となった時に
え、じゃあ結局どっちの処理をするの？
ということを疑問に思う方もいるかもしれません。
この「または」を表す || という論理演算子の考え方としては
処理a || 処理b
となっている場合は
処理aがtrueの場合、処理aのみを実行
処理aがfalseの場合、処理bを実行
となります。
なんか、if文でやたらと
if(a || b) {
//aまたはbなら処理
}
と刷り込まれてしまっていると、「あれ？aかbかが実行されると書いてあるけど、それって何で決まるんだっけ？」
とふと思ったのでググって自分なりにコードの意味を噛み砕いていくことができました。
一応先ほどのコードの意味を順番に書いておきます。
・caches.open(CACHE_NAME)でCACHE_NAMEと一致したかどうかを確認し、Promiseを返す（成功していればthen内部の処理へ）
・cache.match(event.request)でキャッシュの中身がevent.requestにマッチしていればPromiseを返す（そして2つ目のthen内部の処理へ）
・return responseがtrueならばそこでブラウザに処理を返す
・return responseがfalseならばfetchの処理に進む
・response.clone()でレスポンスをクローンして、cache.put()キャッシュを更新する
という感じになります。
a || bをちゃんと調べてまとめてみましたとさ。
参考：MDN