松下 質問日 2年 前
[‘hashchange’, ‘load’].forEach(event => window.addEventListener(event, search));
上記の１行の意味が全く分かりません。
dreamhanks Staff 回答日 2年 前
ご質問いただきありがとうございます。
DreamHanksの松下です。
ネストが深いソースコードですので、順々に解説いたします。
①[‘hashchange’, ‘load’]について
こちらの[]内に記述されている内容はイヴェントの種類だと思われます。
javascriptのイヴェントのリファレンスに関しては下記を参照ください↓
https://developer.mozilla.org/ja/docs/Web/Events
hashchangeとloadを上記のリファレンスページ内で文字列検索をすると引っ掛かると思うのですが
hashchangeはURLのフラグメント識別子（＃俗にいうハッシュ）の後に続く文字列に変更があった場合のイヴェントです。
loadとはページをローディングした際のイヴェントです。
②[‘hashchange’, ‘load’].forEach(event について
各種イヴェント（hashchange,load）が発生した場合、そのイベントをforEach()を使って
eventという引数に代入しています。
「イヴェントを引数に代入する」と聞くとピンとこないかもしれませんが、
ブラウザで起きる現象全ては、何かのインターフェースオブジェクトの種類です。
具体的にいうとload（再表示）というブラウザ上で起きる現象はwindowのloadというインターフェースオブジェクトなんです。
インターフェースオブジェクトとは、その現象を動作させる処理が入ったオブジェクトです。
ここまで話せば理解できますでしょうか？
処理の詰まった箱（オブジェクト）を引数に渡すということです。
③=>（アロー関数）について
javascriptでは下記のように関数に引数を渡すことができます
(引数,...)=>{...関数の本体...}
event(受け渡す引数） => window.addEventListener(event（受け渡される引数）, search)
左のeventという受け渡す引数を右の受け渡される引数に代入して処理を行うということです。
④window.addEventListener()について
windowオブジェクトの中にあるaddEventListenerメソッドです。
addEventListener（イヴェントの種類, 関数）
このメソッドは第一引数に特定のイヴェントが来た場合、第二引数の関数を発動してくれるメソッドです。
まとめ
[‘hashchange’, ‘load’].forEach(event => window.addEventListener(event, search));
こちらの一行の意味は
「hashchangeかloadイヴェントが起きたときに、searchというメソッドの処理を行うよ」という意味です。