タグ

2021年2月13日のブックマーク (5件)

  • Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する

    JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に

    Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する
    tsuyossii
    tsuyossii 2021/02/13
  • JavaScriptの「コールバック関数」とは一体なんなのか

    近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript(最近ではTypeScriptも)から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります: setTimeout(function() { console.log('He

    JavaScriptの「コールバック関数」とは一体なんなのか
    tsuyossii
    tsuyossii 2021/02/13
  • clickイベント:マウスがクリックされたとき

    click イベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントです。 onclick 属性または onclick プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として click を指定してイベントリスナーを登録できます。ここでは JavaScript を使って click イベントが発生した場合の処理を記述する方法について解説します。

    clickイベント:マウスがクリックされたとき
    tsuyossii
    tsuyossii 2021/02/13
  • function(e)のeってなんだ? - 旧gaaamiiのブログ

    最近、週1くらいのペースでミニアプリを作りながらjQueryを教わってる。 教えていただいたことをメモしておく。 jQueryを書くとき、基はこう書くってことは知ってた。 $(セレクタ).イベント(function(){ // 処理 }); 意味がしっかりわからなくてもこれが書ければなんとなくでできちゃうことがけっこうある。たとえば、ページの先頭に戻るボタンの実装とか。文字をすっと消したりとか。 んで、こうやって書くのも見かけることがある。 $(セレクタ).イベント(function(e){ こう書く場合の、(e)はなんなんだ?引数? え?何を持ってるんだこのeは? というわけで教えてもらったのが、「コンソールに出せばわかるよ」ということ。 こう書いて、 $("#sample").click(function(e){ console.log(e); }); コンソールを見ると jQuer

    function(e)のeってなんだ? - 旧gaaamiiのブログ
  • JavaScriptコールバックを整理してみた【再入門】 - Qiita

    はじめに JavaScriptのコールバックについて、シンプルに理解できるよう整理してみました。 特に目新しいことはないかと思いますが、何かのお役に立てば幸いです。 目次 コールバック(関数)とは 単純なコールバック関数を実装する より実践的(かもしれない)コールバック関数を実装する おまけ | Promiseに置き換える 終わりに 参考サイト コールバック(関数)とは ひとことで言うと、「引数として渡される関数」です。 他関数の引数として使用し、特定のタイミングで実行させることができます。「あの処理が終わった後に、この関数を実行したい」など。 単純なコールバック関数を実装する 例えばイベント発火時のコールバックは、使い方・動作がイメージしやすいかと思います。 // #triggerをclickしたら、console.log()を実行 $('#trigger').click(functio

    JavaScriptコールバックを整理してみた【再入門】 - Qiita
    tsuyossii
    tsuyossii 2021/02/13