[B! javascript][async] akishin999のブックマーク

100秒で理解するPromise

そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとはでは、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。ピザを注文すると、

akishin999 2024/04/02

リンク

JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー

対象読者と目的非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある実行順序の保証がよくわからないので自信をもってデプロイできない変更があるより詳しい仕組みを理解することでより計画的な実装をできるようになりたいという動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。目次実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定入門記事へのリンクプロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方

akishin999 2021/09/27

リンク

async/await は Promise を置き換えない - Okapies' Archive

まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきであるこの記事はなに？少しバズったのでまとめておこうかと。「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え

akishin999 2020/12/14

リンク

【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita

「な、なんじゃこりゃあああぁあっtっt！！！！」・・・・・・・・・非同期処理を"ちゃんと"理解して使いたい『非同期処理なんとなくの理解で書いている...』『動いてるし、ヨシ！』令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。（*1: 令和になってからプログラミングを知った人。初心者のこと。）ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」例です。実際に手を動かしながら非同期処理の理解を深める本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする冒頭のコードがリファクタリングできるようになる実際

akishin999 2020/08/31

リンク

Callback を撲滅せよ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのかユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのかちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー

akishin999 2019/01/18

リンク

async/awaitで非同期処理はシンプルになる - Qiita

javascriptで非同期処理を書こうとした時、普通に処理を書くと上から書いた通りの実行順序では完了しません。非同期処理の部分が、往々にして遅延して処理が完了してしまうからです。非同期処理として有名なものには ajax や setTimeout、XHR（XMLHttpRequest）が存在します。コマンドライン上で実行する簡単な例を書くと $ node > console.log('hello'); console.log('world'); hello world undefined > setTimeout(() => console.log('hello'), 500); console.log('world'); world undefined > hello 普通に連続で書くとhello と world が順序通り表示されますが、setTimeoutを使った方は順序が逆に

akishin999 2017/07/01

リンク

AsyncとAwait : コールバック地獄を避けるための最新のやり方、そしてその未来 | POSTD

(2016/7/7、いただいたフィードバックを元に記事を修正いたしました。) JavaScript、特にNode.jsといえば、コールバック地獄がよく連想されます ^(1) 。たくさんの非同期I/Oを扱うコードを書いたことがある方には、おそらく以下のようなパターンはおなじみでしょう。 export default function getLikes () { getUsers((err, users) => { if (err) return fn(err); filterUsersWithFriends((err, usersWithFriends) => { if (err) return fn(err); getUsersLikes(usersWithFriends, (err, likes) => { if (err) return fn (err); fn(null, lik

akishin999 2016/07/05

リンク

Promiseで簡単！JavaScript非同期処理入門【前編】

ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。ひとつずつ処理されるJavaScript まず、Promiseについて解説する前に、基礎的なことではありますが、JavaScriptのコードがどのようにJavaScriptエンジンに処理されるかについて、軽く解説しておきましょう。例えば以下の様なコードがあったとします。 var result1 = 1 + 2; // 3 var result2 = result1 + 100; // 103 /* functionらを準備 */ var doSomething1 = function() { document.getElementById('price').value = result2; }; var doSomething2 = function()

akishin999 2015/10/02

リンク

defer/asyncチェックツールを作りブラウザ対応状況を確認してみた | ゆっくりと…

ちょっと前に「scriptのdefer/asyncを理解し、ページの高速化方法を探る」というエントリーを書きましたが、はてなのブックマーカー edvakf さんから「Opera は defer も async も対応してないはず」というご指摘を頂きました（edvakf さん、ありがとうございます）。こちらとこちら（2012年11月16日：Google のドキュメントが削除されました）の表を「対応状況」としてそのまま流用してしまったのが失敗でした。英語をよく読めば、You can use the defer/async attribute on the following elements と書いてあります。つまり属性は使えるけど、動作は別とも読めるわけで…。ということで、「defer/async チェッカー（仮）」を作ってリベンジすることにしました。 1.

akishin999 2015/05/13

リンク

scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…

Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が

akishin999 2015/05/13

リンク

setTimeout関数を使ってJavaScriptの処理を非同期化してみる - 知らないことがあってもへっちゃらさ

わかったブログさんの「遅いブログパーツを高速表示する方法」で紹介されていた setTimeout関数を使った JavaScript の処理の非同期化がなかなか使えたのでメモメモです。一般にHTMLファイル内に下記のようなコードがあった場合 <script type="text/javascript"> example(); </script> ブラウザは example() の処理が終わるまで次の処理に進まないんですよね。このソースがHTMLファイルの中ほどにあって、なおかつ example() の処理に非常に時間がかかる場合、ユーザーにはWebページの表示（描画？）が止まっているように見えるわけです。そこでソースを <script type="text/javascript"> setTimeout(function() {example();}, 0); </script> のよ

akishin999 2015/05/12

リンク

<script>タグのasync属性を使わずに非同期でJavaScriptを読み込む方法 | さくらたんどっとびーず

HTML5 では <script> タグに async という属性が加わってまして、これを指定しておくと src で指定された JavaScript ファイルの実行が非同期で行われます。（src 属性を指定しないと async は意味を持ちません。） <script type="text/javascript" src="http://..." async="async"> </script> ググってると async の値として async=”true” を指定しているページが多いようですが、W3C の HTML5 の定義（4.3.1 The script element と 2.4.2 Boolean attributes 参照）だと空の文字列か属性名そのものを指定しろってことになってますので、こっちが正しいです。（たぶんw） If the attribute is present,

akishin999 2015/05/12

リンク

Promiseに関するパターンや命名規則 - Qiita

やや自己流含む。 getXxx/fetchXxx getXxxは同期、fetchXxxはPromiseということにしている。とくに非同期の取得系はfetchということに決め打ってる。 GETリクエストであることを明示したいときにややこしいという問題はあるが、そのケースは少なく、JS内で同期/非同期を明示したいことの方が多い。例: 非同期の副作用系はput/post/sync/send/uploadとかそのあたりを適当に使う。 Promise( (done, reject) => {..}) 恐らく仕様的に正しいワードは fulfill, reject なのだが、fulfillはタイプ数が妙に多いのと、llが多くタイポしやすく、またタイポが発見しづらいので、自分は慣習的にdoneを使っている。追記: fulfillよりもresolveの方が仕様に沿ってるっぽいhttp://people.

akishin999 2015/04/28

リンク

Google Analytics トラッキングスニペット再考（2010） | MOL

アナリティクス公式ブログ: 成長し続ける Google Analytics のエコシステム非同期トラッキングコードが公式に推奨されるようになったので、ようやく重い腰を上げて調べてみました。長文です。なぜ、非同期トラッキングコードが推奨されるのか？今回のトラッキングコードはurcin.js、ga.jsに続く大きな変更となります。非同期トラッキングコードの恩恵を受けるためには、以前のトラッキングコードを使用されている方は、当然変更しなければなりません。しかし、大規模サイトの場合などはアクセス解析担当者とコード実装者は違うことも多く、エンジニアさんにお願いしなければなりません。「え〜、前変えたばっかじゃん！」などと言われるかもしれません。そんな時にアクセス解析担当者はトラッキングコード変更のメリットを提示しなければなりませんね。Analytics 公式ブログでは、非同期トラッキングコードの

akishin999 2015/04/20

リンク

ES7 の Async/Await を使ってみた - Qiita

Taming the asynchronous beast with ES7 babel の experimental に ES7 の Async/Await が入ったというので、さっそく導入してみた。対象は画像を点字を変換するわりかしどうでも良いモジュール。 seurat - JavaScript utility to generate a braille text from an image 導入前ファイル読み込みや画像の変換に非同期処理を多用しており、node.js スタイルの非同期API(コールバックを渡すやつ) を prominence というユーティリティ関数で Promise 化していたが、行ごとに then が出てきたり、複数の値を渡すために Promise.all を使ったりと、あまり読みやすいとは言えないコードだった。(コールバック地獄になるよりはマシだと思うけど.