100秒で理解するPromise
そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。 非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。 ピザを注文すると、
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
Intro Promise.withResolvers() は、 Stage 4 であり ES2024 の候補となった。 すでにブラウザでの実装も進んでいるため、その活用方法を解説する。 イベントの Promise 化 JS では、非同期処理 API は長らくイベントリスナベースで定義され、それを組み合わせるフロー制御で処理されてきた。 しかし、 Promise が定義されて以降は、標準 API も Promise を返すようになり、 async/await によって処理されるのが一般的になってきた。 結果、イベントリスナベースの API を Promise 化するような場面も増えた。 例えば以下のようなものだ。 async function request() { return new Promise((resolve, reject) => { document.querySelect
using System.Windows.Threading; Dispatcher.CurrentDispatcher.InvokeAsync(async () => { // いろいろな処理... // メッセージループを終了させる Dispatcher.CurrentDispatcher.BeginInvokeShutdown(DispatcherPriority.Normal); }); Dispatcher.Run(); WPF とか WinForms とかでは、フレームワークがすでにメッセージループを回しているので、自分で Dispatcher.Run() する必要はない。 JavaScript 自分で書く必要なし。 Python asyncio.run(最初に実行するasync関数)
The await event horizon in JavaScriptCharles Lowell December 11, 2023 javascriptstructured concurrency There is a boundary around every black hole where the velocity required to escape its gravitational pull exceeds the speed of light. Once anything, including light itself, passes over that threshold, it is trapped inside the mysterious interior of the black hole forever. There is no escape, and t
simple-git を使って、TypeScript による自動化事例を記事に致しましたが、TypeScript による cli のフレームワークを主に説明していたり、方向性が微妙なポストだなぁと反省…。 こんにちは、高崎＠アノテーション です。 はじめに 我々が行っている作業におきまして、手動でファイルを更新することや環境を整備することは少なくありません。 以前から手を抜いて少ない工数で効率よく、かつ人為的ミスを削減することを生き甲斐としておりまして、手動でファイル操作をするものがあれば、以前ですと Linux のターミナル上で作業していたこともあり bash シェルで自動化を行う方法はないか、を常に考えていました。 ファイルの変化を見る場合はgitを使ってローカルでリポジトリを組んでみたり、結果の文字列を捏ねて諸々処理する時には、シェルを実装するに当たって欠かすことのできないawkやs
Go、Python、Kotlin、Rust、TypeScript の5つの言語について「並列処理、並行処理の手法」というテーマに絞り解説する「並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しよう」。JavaScript編では橘氏が登壇。JavaScriptが疑似的な非同期処理をどう実現しているのかと、JavaScriptの非同期処理の歴史について紹介します。 橘氏の自己紹介 橘ゆう氏（以下、橘）：よろしくお願いします。風邪でめちゃくちゃ顔が死んでいるので、カメラオフでいきます。橘です。今日は「JSの非同期処理パターン Promise、async/awaitを理解する」というテーマについて話していきたいと思います。 簡単な自己紹介ですが、もともとDeNAにいて事業統合でそのままGOに移り、今は森下さん（森下篤氏）と同じチームで、主にサーバーサイドやMLOp
はじめに Scala.jsというプロジェクトがあります。 Scalaで書いたプログラムをJavaScriptに変換する、とてもクールなツールです。 ただ、もちろん言語自体が違うため、完全なマッピングが可能な訳ではありません。ベストエフォートでセマンティクスを維持したままJavaScriptに変換しますが、いくつか対応付けが困難なケースがあります。 その中でも特にScalaの Future をJavaScript上でどのように表現するか？ という点に関しては、JavaScriptの深みを知れるとても良い題材だと思ったので、まとめてみようと思います。 ※ 一応Scala.jsをネタに出してますが、Scalaを知らなくても理解できるように書いたつもりです。 ScalaのFuture Scalaには並列処理を行うためのデータ型として Future があります。 Future は、ある時点において利
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
JavaScript の forEach で async/await は使える JavaScrript の forEach で async/await が使えないという誤解が一部あるようですが、全く問題なく使えます。そういう誤解が何故発生してしまうかと言えば、非同期を同期させるための管理を行っていないからです。プログラムは思った通りではなく書いたとおりに動きます。同期させるようにプログラムを書かなければ、その通りの結果が返ってきます。使えないのではなく使っていないのが原因です。 forEach で非同期を同期させるプログラムを作る 配列の内容を 1 秒ごとに一つ表示させるプログラムを forEach で作ってみます。 こちらに実行環境を用意しました プログラム内容 // 疑似セマフォによるスケジューラ const semaphore = ( limit = 1, count = 0, rs
![[JavaScript] forEachでasync/awaitは使える](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a8486dd20e7853c603d36df08fadf20d86f8213/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--KheWfnLQ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJavaScript%25255D%252520forEach%2525E3%252581%2525A7async%25252Fawait%2525E3%252581%2525AF%2525E4%2525BD%2525BF%2525E3%252581%252588%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Promsie を作って返す関数で、Promise コンストラクタの引数のコールバックではないところで resolve とか reject とかしたいことがある。 こんな感じで、外部に変数を作って普通に代入して外から resolve/reject を呼べるテクがある。 function registerSomething() { let resolve, reject; const promise = new Promise((res, rej) => { resolve = res; reject = rej; }); something.registerSomething((error, info) => { if (error) reject(error); resolve(info); }) return promise; } まあ実際には、上記コードくらいだったら普通にコンストラ
AbortSignal.any(), AbortSignal.timeout(), そして addEvnetListener() の Signal | blog.jxck.io
Intro 最近 AbortSignal.any() が提案され、急速に実装が進んでいる。 すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備されてきた。 これら API のモチベーションと設計を中心にまとめる。 Abort 後のリソース解放 AbortSignal によって、非同期処理のキャンセルが可能になった。例として、 Server 上での Fetch のタイムアウトの例を考えよう。 app.get("/entries", async (req, res) => { const perRequestController = new AbortController() const perRequestSignal = perRequestCont
The JavaScript Promise Integration (JSPI) API allows WebAssembly applications that were written assuming that access to external functionality was synchronous to operate smoothly in an environment where much of the desired functionality is asynchronous. This note outlines what the core capabilities of the JSPI API are, how to access it, how to develop software for it and offers some examples to tr
[javascript] なぜ「forEachでasync/awaitは使えない」と言われるのか - Qiita
はじめに とあるメンバーから、表題のようなことを言われました。 どうやら以下のようなコードで、「forEachでawaitを使っているのに処理順がおかしくなる」とのことから、この結論に至ったそうです。 async function testAsync(v) { await new Promise(resolve => { setTimeout(resolve, 100); }); return v + 1; } const data = []; const params = [0, 1, 2]; params.forEach(async v => { const res = await testAsync(v); console.log(res); data.push(res); }); console.log(data); // [] 1 2 3 彼としてはawaitによって非同期処理の
![[javascript] なぜ「forEachでasync/awaitは使えない」と言われるのか - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1406da94de7e5b7f4d15041984c28cbf0b12e6df/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCamF2YXNjcmlwdCU1RCUyMCVFMyU4MSVBQSVFMyU4MSU5QyVFMyU4MCU4Q2ZvckVhY2glRTMlODElQTdhc3luYyUyRmF3YWl0JUUzJTgxJUFGJUU0JUJEJUJGJUUzJTgxJTg4JUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgwJThEJUUzJTgxJUE4JUU4JUE4JTgwJUUzJTgyJThGJUUzJTgyJThDJUUzJTgyJThCJUUzJTgxJUFFJUUzJTgxJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wNzcxYzMzZjg3ZGQxNzRlN2IwNDc0NDE5Y2E5YzA3Zg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGF3YXRhd2EmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRmMjVmZWYxYjUzMTQyZDJhYjAxOTA0NGFmOWEwZmQz%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D762fb8c766b297bbd4c37aa591c1d0fa)
Node.jsのバージョンを16に更新した時にはまってしまったこと - RareJob Tech Blog
はじめに こんにちは。APP/UXグループの大谷と申します。 寒くなってきてグラコロが美味しい季節ですね。年がわりで発売されるデミグラスソースがかかっているバージョンより、ノーマルバージョンのグラコロが個人的には好みです。 バージョンといえば先日Node.jsのバージョンを更新した際に困ったことについて書いていきたいと思います。 何が起きたか 弊社では一部の機能の画面をNuxtを使って提供しており、server middlewareをBFFとして利用しAPIリクエストはserver middlewareを経由して投げられています。 (詳しい構成についてはこちらの記事に添付の資料をご参照ください) 今回はNode.jsのバージョンを v12 → v14 → v16に段階的に更新する作業をおこなっていました。(バージョンが一部歯抜けになっているのは依存関係の解消の関係でやりやすかったバージョン
こんにちは。ぬこすけです。 console.log や setTimeout など、ブラウザにはたくさんの機能が備わっています。 そのうちの 1 つに requestIdleCallback というものがあります。 requestIdleCallback については上の記事で詳しく解説していますが、簡単に説明すると「ブラウザが暇な時に JavaScript の処理を実行させられる」というのが requestIdleCallback です。 requestIdleCallback により、ブラウザが暇な時に JavaScript の処理を回すことでパフォーマンス最適化ができるのです。 この requestIdleCallback をより使いやすくした idle-task という OSS を公開しました。 idle-task の特徴 idle-task には次の 4 つの特徴があります。 タス
M 年前にも N 年後にも人類は同じ話をしている. まとめ エラーの発生方法は throw と return に大別できる throw には簡潔さ, return には明瞭さと型安全性といった特徴がある どちらの方法がより適しているかはプログラムの規模, エラーの種類, ハンドリングの方法などが判断の材料になる 実際にどちらの方法を使うかは上の判断材料と, フレームワークやプロジェクトのコーディング規約なども合わせて複合的に決めるのがよい エラー発生方法の分類 まず前提として, 関数から呼び出し元にエラーを伝える方法は以下の 2 つに大別できます. 逆にこの記事ではこれ以上の具体的な方法についての議論はしません. throw エラーを throw して呼び出し元に伝える方法です. 例えば以下のようなものが当てはまります. throw new Error("...") Promise.rej
最速攻略！ Reactの `use` RFC
皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。 そこで、この記事ではさっそくRFCを理解することを目指します。 ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知らないのであれば、ぜひ次の記事で学習してください。 また、RFCはあくまでReactの新機能のアイデアを公開するものであり、これが必ず実装されるとは限らない点にご注意ください。例えば、過去にはuseEventというRFCが注目を集めていましたが、意見が集まった結果としてそのRFCは実装されずにクローズされました（RFCが無駄だったというわけではなく、再度検討してよりアイデアがブラッシュアップされることになります）。 新しい use API このR
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
名前から既にワクワクするこのAPIは、なんとPromiseを返すsetTimeout、setInterval関数を提供しています！最高です… というわけで今回はそれの紹介です。 基本的な使い方 await setTimeout(1000) ←これができるんです！素晴らしくないですか？？ top-level await や for-awaitと組み合わせるとこんな感じで書けます import { setTimeout } from 'timers/promises'; console.log('start'); await setTimeout(1000); // これでいける！！ console.log('1s passed'); import { setInterval } from 'timers/promises'; console.log('start'); for await (
Implementing Promisable setTimeout - Dmitry Kudryavtsev
In a world controlled by the event loop, setTimeout is the king of execution control. It allows you to schedule function calls to be executed later. However, it can’t do one thing - suspend the execution for a certain amount of time. Think of an equivalent to sleep(ms) from different languages. Let us now explore how we can implement it. Promisifying setTimeout In order to make setTimeout behave s
Event Loopってみなさん聞いたことありますか？ 「うん、なんか聞いたことありますが、よくわからないな・・・」や「分かりそうで、分からないな・・・」って思ってる方がいますかね？ 長文ではありますが、Event Loop というものを改めて理解してみましましょう！ まずこのコードの実行結果を考えてみましょう。 console.log('1') setTimeout(function callback(){ console.log('2') }, 1000) new Promise((resolve, reject) => { console.log('3') resolve() }) .then(res => { console.log('4'); }) console.log('5') 答えを分かりますでしょうか？正解はこの後記事内で公開します。 JavaScript 実行の仕組み
nextTick vs queueMicrotask vs Promise.resolve vs setTimeout - Qiita
はじめに 普段の開発でなかなかお目にかかることも使うことも滅多にない queueMicrotask について興味を持ったついでに、 process.nextTick や Promise, setTimeout などとの比較をしてみました。 TL;DR 下記の優先度順でキューからタスクが取り出され処理される。 nextTick queueMicrotask, Promise.resolve → Microtask setTimeout → Task (a.k.a. Macrotask) より具体的には、MicrotaskキューとTaskキューの2つのキューがあり、Microtaskキューが優先的に処理されるようになっている。 Microtaskキューが空でない限りはTaskキューの中身を実行しない構造となっており、queueMicrotask, Promise.resolve では Micr
Next.jsでローカルのJSONファイルからデータの取得と表示 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はNext.jsでローカルのJSONファイルからデータを読み取って表示する方法を示します。 Next.jsの事前レンダリング ページ制限 セットアップ JSONデータの作成 データの取得 getStaticPropsを使用せずに静的JSONデータをローカルで取得 最後に サーバー側のレンダリングや静的Webサイトの生成などの追加機能に関して、Next.jsは非常に興味深いものです。 これは、バックエンドをコーディングしたり、データベースのセットアップや接続に時間を費やしたりすることなく、小さなWebアプリをすばやく構築したい場合に非常に役立ちます。 Next.jsの事前レンダリング Next.jsはいくつかの異なるデータ取得戦略を提供しています。 それらは下記の通りです。 ・クライアント側のレンダリング(CSR) ・サーバー側レンダリング(SSR) ・静的サイトレンダリング(SSG)
どうも。CX事業本部Delivery部のえーたん（@eetann092）です。 今まで雰囲気でJavaScript（TypeScript）のasync/await、Promiseを使っていて最近苦しんだため、ハマったところの例と対策を備忘録として残しておきます。 await付け忘れ やらかした例 まず、awaitを付け忘れた例です。 import { setTimeout } from "timers/promises"; const unit = 1000; async function logSleepLog(msg: string) { console.log(msg); await setTimeout(1.5 * unit); console.log(msg); } (async () => { logSleepLog("hoo"); console.log("finish");
Listen to Kohmi: https://jvcmusic.lnk.to/Kohmi_Hirose Subscribe to Kohmi on YouTube: https://www.youtube.com/channel/UCPkjL7jAJhrZ3e4-NlsGt-Q Follow Kohmi's online: https://www.facebook.com/kohmi.hirose/ https://www.instagram.com/kohmi.hirose/ https://kohmihirose-sing.bitfan.id/ https://www.tiktok.com/@kohmihirose_official https://twitter.com/kohmi https://voicy.jp/channel/1031 #広瀬香美 #Kohmi #pr
React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のクライアントの多くは、Plasmicを使用して高いパフォーマンスが求められるマーケティングサイトやECサイトを構築しています。 したがって、RSCはまだReact 18の初期実験機能ですが、Plasmicではその仕組みを詳しく調べています。 このブログ記事では、これまでに分かったことを紹介したいと思います。 Plasmicのメンバーによるツイートまとめもご覧ください。 React Server Componentsとは何か サーバサイドレンダリングとの
JavaScript の forEach は非同期ではない 時々ネットの解説記事で forEach は非同期だという解説を見かけますがこれは間違っています。実際の処理は逐次関数をコールバックしていくだけなので、普通に同期で動いています。コールバック中に非同期処理を使って待機動作を行っていないので、バラバラに動いているように見えるだけなのです。 検証用の非同期処理を作成 ランダムに 1000ms 以内の時間を待機して文字列を出力する関数です。TypeScript になっているので、JavaScript で実行したい場合は型定義を外してください。 const f = (value: string) => { return new Promise<void>((resolve) => setTimeout(() => { console.log(value); resolve(); }, Mat
JavaScript Promiseについての初学者向け解説 - 概念と操作の基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptのPromiseの操作とその概念について初学者様に解説致します。 非同期関数 Promise Promiseの状態 Promiseの作成 Promiseをチェーンする方法 Promiseを返す promiseのthenとfinallyの違い より高度な複数のPromise処理 最後に 前提の知識とスキルとして、少なくともES6の関数・高階関数・コールバック関数およびJavaScriptオブジェクトに精通している必要があります。 上記を学び終えてない方は、以下で学習できますので参照ください。 dev-k.hatenablog.com dev-k.hatenablog.com dev-k.hatenablog.com 非同期関数 JavaScriptにおいて非同期処理を行う際には、従来はコールバック関数を利用していました。 しかし、JavaScriptにおいて関数が第
概要 addEventListenerはブラウザ組み込みのAPIの中でも最もよく使われるメソッドの中の一つだと思います。このメソッドはぱっと見で処理がわかりにくく引数にコールバック関数を取るため、初心者の頃に物凄く読みにくいコードを書いた人も多いのではないでしょうか？ addEventListenerが読みにくくなってしまう簡単な例を挙げます。以下のコードのようにAというイベントが発生しないとBというイベントを購読する処理をかけないといったイベント間に依存関係がある場合は、処理が増えるにつれ直感的なコードを書くことが難しくなっていくと思われます。 // <body>より上の位置で<script>にdefer属性なしで書かれてあると思ってください。 document.addEventListener("DOMContentLoaded", () => { console.log("DOMCo
はじめに JavaScript の「非同期処理」ってやっぱりかなり難しくないですか？ 自分も色々試行錯誤しましたが、結局「完全に理解した🤓」→「やっぱり何も分からん😭」っていうループの中で泥臭く理解を深めていくしかないようです。 さて、非同期処理の制御をある程度予測できるようになるには、非同期 API を提供する環境のことやイベントループ、マイクロタスクなどの仕組みについて理解する必要があります。 そして環境に埋め込まれた JavaScript Engine のことも理解する必要があります。 今回の記事では、JavaScript Engine の１つである V8 が内部で変換するコードから async/await の挙動を理解するための解説を試みたいと思います。V8 エンジンからアプローチすることで async/await の分かりづらい挙動を掌握して非同期処理を打倒します。 今回の記
Error の cause オプションによってエラーの再 throw 時にスタックトレースが失われるのを防ぐ【ES2022】 - Qiita
メッセージに error.message や error.trace を連結して入れるのも手ですが、メッセージとしては読みづらく使いづらいです。 よってこれまでは、コード全体のエントリポイントなどでまとめてエラーをキャッチしスタックトレースが失われない形で処理するなどしていたかと思います。 Error の cause オプション ES2022 で入った機能で、このように Error の第二引数にオプションで cause を渡せるようになりました。
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
14 Linting Rules To Help You Write Asynchronous Code in JavaScript
Debugging asynchronous code in JavaScript can feel like navigating a minefield at times. You don't know when and where the console.logs will print out, and you have no idea how your code is executed. It's hard to correctly structure async code so it executes in the right order as you intend it to. Wouldn't it be nice if you had some guidance while writing asynchronous code, and to get a helpful me
はじめに twitter 上で議論になっていたネタを本人の許可を得て記載しています。 Node.js でだけ発生する非同期関連の謎現象を発見した🤔 複数回連続で、非同期処理を挟んだ関数から返した非同期関数を、非同期に実行すると allSettled で待ち受けされずにその場で例外が発生する。 これはバグなのかな...https://t.co/w5C9wKEAOA pic.twitter.com/y3pz4ajndF— shqld🦭 (@shqld) January 4, 2022 実はこの話は会社の中でも一回議論になったネタなんですよね。僕も microtask と呼ばれる Promise キューイングの仕組みとイベントループでタスクをハンドリングする仕組みの両方が組み合わさった時に Unhandled Rejection が起きる理由がわかりにくくなるなーと思っています。誤解していた
Promise.allを使用して複数の非同期処理をうまく扱う方法について整理しました。 こうすることで多数のHTTPリクエストなどを同時に送り、処理することが可能になります。 はじめに JSでは非同期処理を使用することでHTTPリクエストを送った際にレスポンスが帰ってくるまでの間に別のリクエストを送ることができます。 なのでタイトルには同時と書いてありますが、厳密には同時ではありません。 ただ、こうすることで複数のリクエストをすばやく処理することが可能です。 しかし、サーバーに負荷をかけたくないなどの理由から同時にリクエストを送る数を制限する必要があると思います。 今回はそんな場合にリクエストをバッチ化して処理する方法についても整理してみます。 準備 今回はwait関数を作成し、一定時間待機させるような処理を利用して、HTTPリクエストなどの代わりとします。 今回は２秒間処理をブロックする
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Visualized - Promise Execution
Promise.withResolvers によるイベントの Promise 化 | blog.jxck.io
async/await 比較（C#, JavaScript, Python） - Qiita
The await event horizon in JavaScript
simple-gitを使ってみたら便利だった | DevelopersIO
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史
JavaScriptでScalaのFutureを表現する
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
[JavaScript] forEachでasync/awaitは使える
コンストラクタの外からresolve/rejectを呼ぶPromsieテク
Introducing the WebAssembly JavaScript Promise Integration API · V8
ブラウザのアイドル中にJavaScriptを実行する良い感じのOSSを公開した
TypeScript エラー処理パターン - Object.create(null)
XMLHttpRequest とはなんだったのか | blog.jxck.io
ReactのSuspenseを使った非同期処理のエラーハンドリング
Timers Promises API が最高 - Panda Noir
動画で分かる！ブラウザと Node.js の Event Loop 解説
async/await周りで苦しんだ箇所の例と対策 | DevelopersIO
広瀬香美 - promise (Official Video)
React Server Componentsの仕組み：詳細ガイド | POSTD
JavaScriptのforEachで非同期処理を逐次実行する方法
addEventListenerでリッスンしているイベントをPromise化する
V8エンジンによる内部変換コードでasync/awaitの挙動を理解する
イベントループと TypeScript の型から理解する非同期処理
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
Unhandled Rejection の考え方 - from scratch
Javascriptで同時に非同期処理を行う | DevelopersIO