質問: new filereader(); fr.addeventlistener('load',e=>{ var blob=new blob([e.target.result],{"type":file.type}); var binary=string.fromcharcode.apply("",new uint8array(e.target.result)); var base64="data:"+file.type+";base64,"+btoa(binary); console.log(blob); console.log(binary); console.log(base64); }); fr.readasarraybuffer(file); } }); });
回答: こんにちは ちゃんと理解しているわけではないのでたいした説明はできませんが、多少の助けにでもなれば・・・ 先に、2のご質問の方について。 >2. アロー関数ではなく、普通の関数(?)を使って書き直すとどうなりますか? アロー関数と通常のfunctionは完全には一致しませんが(thisの扱いが異なるなど)、概ねはfunctionの省略形と考えても良いと思います。 (詳しくは、以下を参照) https://developer.mozilla.org/ja/docs/web/javascript/reference/functions/arrow_functions https://developer.mozilla.org/ja/docs/web/javascript/reference/functions ご提示のスクリプトでは、3か所で使われていますが、いずれもイベント処理の設定部分で、引数の匿名関数の記述に使われています。 通常のfunction(){}形式に戻すのであれば、単純に、 window.addeventlistener('domcontentloaded', function(){ document.queryselector('#btn').addeventlistener('click',function(){ ・・・・・ fr.addeventlistener('load',function(e){ ・・・・・ のような感じで置き換えればよさそうです。 勝手な想像ではありますが、わかり難くなっている原因は、どちらかと言えばアロー関数というよりも、匿名関数のネストにあるのではないでしょうか。 次に、1のご質問に関して。 >1.関数を使わずに書き直すとどうなりますか? ご提示の例で、アロー関数が使われているのは、全てaddeventlistener()メソッドの引数としてですが、このメソッドに要求される引数は target.addeventlistener(type, listener[, options]); となっており、このうちのlistenerが関数である必要があります。 ですので、イベント処理に関しては、「関数を使わず」というのは無理そうです。 似たような処理に、タイマー関連の処理やajaxの処理等が挙げられると思います。 https://developer.mozilla.org/ja/docs/web/api/eventtarget/addeventlistener#the_event_listener_callback 上記は、addeventlistener()メソッドを使う限りは無理という意味で、html要素内に直接 onclick="alert('ok');" などといった書き方をすれば、関数を用いなくても済みます。 と言っても、これはこれでわかりにくくなりますけれど・・・ 匿名関数を使わずに、名前付き関数として定義する記述方法にすることで、処理構造が多少なりとも理解しやすくなるのではないかと思います。 例えば、ご提示のスクリプトを単純化して window.addeventlistener('onload', e=>{ /* 処理 a */ target.addeventlistener('click', e=>{ /* 処理 b */ }); }); のような構成とした場合に、 これを個別の関数定義(funca、funcb)に分解してみると、 function funcb(e){ /* 処理 b */ } function funca(e){ /* 処理 a */ target.addeventlistener('click', funcb ); } window.addeventlistener('onload', funca ); のように分けて記述することで、少しはわかりやすくなったような気にならないでしょうか? (人にもよると思いますけれど)