はじめに こちらの記事ではWEB開発における非同期通信について理解しやすいように手を動かして作れるアプリを作りました。 非同期通信について学んでみたい人はぜひ作ってみてください。 対象者 非同期通信とはなにかわからない、または名前だけ知っている、漠然としたイメージだけあるといった方 WEB開発に関する知識はある程度持っている方 非同期通信とは 非同期通信とは通信技術の一つで送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式です。 イメージが湧きにくいと思うので以下の画像を見てください。 この処理ではボタンをクリックした後、画面遷移を行わずにデータベースへアクセスしランダムなポケモン情報を画面に表示しています。 非同期通信では処理は以下のように行われています。 送信ボタンをクリックするとJavaScriptにてhttpリクエストが送信され、サーバーサイド
こんにちは、commmuneでデータサイエンティストをしているひぐです。 人間が苦手なマルチタスクをLLMに任せたら、効果的に処理してくれるのではないか?というモチベーションのもと、Pythonの非同期処理を使って並列かつストリーミングでChatGPTの回答を出力するアプリを作りました🤖 例えば下記は、ある課題を入力すると、深さ・広さ・構造・時間軸という異なる観点で解像度を上げてくれるアプリケーションです。 アプリに関する登壇資料↓ このアプリ作成にあたってPythonの非同期処理を勉強したところ、最初は多くの専門用語(コルーチン、イベントループ...)や独自の記法により、全体像をつかむのに苦戦しました。一方で、学んでみると予想以上にシンプルな記法で実装できること、そして応用範囲が広くて便利だと理解しました。 この記事では、そんな少し取っつきにくけど便利なPythonの非同期処理にフォー
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
内容 C#の非同期メソッドが実行されるスレッドはThreadPoolクラスが生成したワーカースレッドですが、これを指定したスレッドに切り替える方法を紹介します。 スレッド切り替えの様子 非同期メソッド中でSwitchToメソッドを呼び出すことでそれ以降の動作スレッドを切り替えます。 切り替えの様子： async Task SwitchToTestAsync() { Console.WriteLine(".NET ThreadPoolクラスのワーカースレッドまたは起動元スレッド上"); await mainThreadQueue.SwitchTo(); Console.WriteLine("メインスレッド上"); await userThreadPool.SwitchTo(); Console.WriteLine("自前スレッドプールのワーカースレッド上"); await Task.Yiel
はじめに 非同期処理はアプリケーション開発においてほぼ必須となっていますが、プログラミング言語やライブラリによってその実現方法は大きく異なります。 この記事では、以下の言語における非同期処理の実現方法を調査し、分類した結果をまとめたものです。 JavaScript/TypeScript(Promise) Kotlin(Coroutines) Java(Reactor Core/Completable Future) Python(asyncio) Golang(goroutine/conc) Haskell(async) Rust(tokio) 非同期処理の分類 構文 async/await 採用している言語: JavaScript/TypeScript/Python/Kotlin/Haskell/Rust もっとも代表的な非同期処理の構文です。 asyncとawaitという対になる二つの
想定読者 非同期処理がいまいちイメージできないという人 非同期処理って具体的にどう書くの？という人 Pythonの基本文法はなんとなく知っているよという人（←具体的な実装方法を知りたい人のみ） Pythonがパソコンにインストールされている（←動作確認したい人のみ） 非同期処理、同期処理とは？ まずは結論から。 非同期処理とは、 あるタスクが終了するのを待っている間、別のタスクを実行すること。 同期処理とは、 処理を順番に実行していくこと。 以下、詳しく書いて行きます。 非同期処理のイメージ 非同期処理のイメージは、 家事を並行してこなすことに似ています。 例えば、 ご飯を炊いている間、炊飯器の前でただ炊けるのを待っていては、時間がもったいないです。 炊けるまでの１時間の間に、他のメニューを作ったり、部屋の掃除をした方が効率的です。 このように、 タスクA（ご飯を炊く）が完了するまでの間、
こんにちは、commmuneでデータサイエンティストをしているひぐです。 人間が苦手なマルチタスクをLLMに任せたら、効果的に処理してくれるのではないか?というモチベーションのもと、Pythonの非同期処理を使って並列かつストリーミングでChatGPTの回答を出力するアプリを作りました🤖 例えば下記は、ある課題を入力すると、深さ・広さ・構造・時間軸という異なる観点で解像度を上げてくれるアプリケーションです。 アプリに関する登壇資料↓ このアプリ作成にあたってPythonの非同期処理を勉強したところ、最初は多くの専門用語(コルーチン、イベントループ...)や独自の記法により、全体像をつかむのに苦戦しました。一方で、学んでみると予想以上にシンプルな記法で実装できること、そして応用範囲が広くて便利だと理解しました。 この記事では、そんな少し取っつきにくけど便利なPythonの非同期処理にフォー
非同期処理でLLMにもっと働いてもらおう
イベント: https://connpass.com/event/305220/ コード: https://gist.github.com/zerebom/bc9dce376a9a8f28a32e5c73b425a239#file-async_gradio_app-py-L12 参考資料 解像度を上げる: https://speakerdeck.com/tumada/jie-xiang-du-wogao-meru リーンキャンバスとは？ 実践的な書き方と考え方【テンプレート付き】: https://sairu.co.jp/method/24846/#:~:text=%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%90%E3%82%B9%EF%BC%88Lean%20Canvas%EF%BC%89%E3%81%A8,%
「同期的処理」の部分を、公式ドキュメントや他記事では同期処理や非同期処理と混在して書いていたように感じたので、本記事では「同期的処理」と名称を統一しています(個人的にはこの名称部分でかなり混乱してしまいました。。)。 今回は実装にて時間計測を用いるので、asyncを用いた「同期的処理」「非同期処理」について解説していきます。 同期的処理 // 計測 const elapsedTime = (start: number, end: number) : string => { return (end-start).toFixed(0) } // タスク消化 const doTask = (task: string, time: number) : Promise<string> => { return new Promise(resolve => { setTimeout(() => { re
JavaScriptの非同期処理に関しての理解 背景 フロント開発で、よくPromise、await、then、catch、finally、asyncなどのキーワードがありますね、これらと一緒に出る単語は”同期処理”、”非同期処理”ですね。 多分Javaでの逐次処理、並列処理、並行処理と類似しているものと最初勝手にそう思いました。 実際にフロントエンドの開発を始め、この非同期処理の理解についてすごく苦労してました。（ただのプロセス上コードを一行ずつに実行するか、プロセスが複数に同時に処理することではなかったですね😭） いきなり非同期処理クイズです！ まず下記のソースコードの実行順を予測してみてください！ // timeandpromise.js console.log("[A] 🦖 MAINLINE: Start"); setTimeout(() => { console.log("[
非同期処理ってなんだい？ - Qiita
今回は非同期処理の方法をサロンの勉強会で理解を深めたので、そのアウトプットをしていきたいと思います。いろんな人から意見をいただけてとても勉強になりました。一人で勉強するよりも、いろんな人と話し合いながら勉強することで、楽しく学べちゃいます！もし、興味あればどうぞ！ 🥋アプリ道場サロン🥋 サンプルコードはたくさんの人がスマートにまとめていらしたので、実際にどんな感じで使うのか具体的に載せていけたらなと思い長ったらしいコードを書きました。笑 間違い等があればコメントで教えていただけたら幸いです！！ 流れ 非同期処理とは？ キーワード completionクロージャを使った非同期処理 async/awaitを使った非同期処理 completionクロージャとasync/awaitの違いって何？ まとめ 非同期処理とは？ 担当直入に言うと、実行結果を後で受け取る。ということだそうです。 日本語
非同期プログラミングについて、イメージだけを超速で掴むための記事を書きました。非同期プログラミングが全くわからない人、具体的には、「async await ってなに……？」「for 文で実行していくのと何が違うの……？」レベルの人を想定しています。 非同期プログラングって何？ 同期的じゃないプログラミングです。同期的ということは、プログラムが上から下に順々に実行されるということです。つまり、普通のプログラムはだいたい同期的です。言い換えれば、非同期プログラミングは順番が入れ替わる（可能性）のあるプログラムです。なぜそんなことをするかについては後述します。 ペペロンチーノを作りたい あなたはペペロンチーノを作りたいとします。以下のタスクが必要です。 パスタを茹でる（5 分） ニンニクを切る（1 分） ソースを作る（4 分）、ただしニンニクを切っている必要がある 盛り付けをする（0 分）、ただ
非同期処理は、データ解析、APIリクエスト、ベクター化など多様なタスクにおいてパフォーマンスを向上させる鍵となる技術です。特に、待ち時間が発生しやすい多数のリクエストや処理を一度に効率よく処理したい場合、この技術は不可欠です。 非同期処理と並列処理の違い非同期処理と並列処理は、よく一緒に取り上げられることが多いですが、実はそれぞれ異なる目的と特性を持っています。 非同期処理非同期処理は、I/O待ち（ディスクへの読み書きやネットワーク通信など）といった待機時間を有効に使いながら、他のタスクを進める技術です。この方法で、全体のプログラムがスムーズに動作します。 並列処理一方で、並列処理は複数の処理を物理的に同時に行う技術です。簡単な例でいえば動画です。動画の再生と音声の再生を遅延が無いよう同時に行っています。 並列処理により、大量のデータ処理や高度な計算を高速に行えます。 まとめ簡単に言えば、
SpringFramework 6.0.11 SpringBoot 3.1.2 @Async と @EnableAsync の使い方 SpringFrameworkで @Async を使うとかんたんにメソッドを非同期で実行できます。 @Component class AsyncComponent { @Async void method() { // 時間のかかる処理 } } 使う側は単にメソッドを呼び出すだけです。戻り値を処理したいなら Future で受ければいいけど、投げっばでいいなら void で良い。投げっばでいい場合の方が多いはず。 @Async を使うためにはアノテーションを処理する何かしらが必要で、この一式を用意するように指示するのが @EnableAsync です。 以下のようなクラスをSpringがわかるところに置いてあげます。 @EnableAsync @Config
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
本記事を書くきっかけ 実務に入る前に、Webアプリケーション開発の基礎の勉強をさせていただいたので、その知見の共有として。特に今回はChatGPTとの対話を通して、"文量多めの読み物っぽい"記事を目指しています。箇条書きより一連の文章の方が好みの方におすすめ。 asyncとawaitについて 「非同期処理」「待機する」といったキーワードはなんとなく覚えていたものの、説明ができなかった「async」と「await」。FEだったら避けては通れないよ！と先輩社員からもお声をいただきましたざっくり言うと asyncで非同期的な処理をして、awaitでその中で待機しなければならない内容を書いている そうです。実際に使うと、asyncの中のawaitがついている部分は完了までその後の処理が止まっているのがわかります。 ではここで早速、ChatGPTに 「サンプルコードで説明して」 とお願いしてみます。
はじめに 今回の記事では、JavaScriptの学習における最大の鬼門の一つ「非同期処理」を、任天堂のゲーム『スーパーマリオ』を具体例に、初心者でもわかりやすく解説する。 対象とする読者 プログラミング初心者 非同期処理が全くわからない初心者 タイトルで気になったひと 同期処理と非同期処理 まずは、「同期」と「非同期」のそれぞれの定義や違いについて解説する。同期処理とは、コードを上から下まで順番に処理することを意味する。一方で、非同期処理はある処理が終わるのを待たずに、別の処理を実行することを意味する。 参考までに、「分かりそう」で「分からない」でも「わかった」気になれるIT用語辞典では、以下のように説明されている。 非同期(読：ヒドウキ 英：asynchronous)とは相手との足並みを揃えないこと。あるいは、相手の反応を待たないで、ひょいひょい行動すること。 同期は何かと何かを「同じに
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
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
はじめに JavaScriptにおいて、非同期処理の扱い・知識は欠かせないものとなっています。 この記事ではそもそも非同期処理とは何なのか、JavaScriptで非同期処理がどのような変遷を遂げてきたのかについて解説していきたいと思います。 同期処理 JavaScriptで以下のようにコードを書いた場合、各行の処理が完了するまで次の行の処理が開始されません。 変数numが初期化される前にconsole.log(num)が呼び出されることはなく、必ずnumの初期化が完了してからコンソールに出力されます。 let num = 1; console.log(num); num++; console.log(num); // => 1 // => 2 このように、書いた順番にプログラムが実行され、現在行の処理が完了してから次の行の処理に移るような処理は同期処理と言われています。 同期処理の問題点
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！サイエンス統括本部でYahoo!ショッピング のレコメンドシステムを開発している高久です。 私の所属するチームでは、さまざまな技術を使ってサービスに実際にどうレコメンド機能を組み込んでいくかについて取り組んでおり、機械学習モデルから配信システムまで一貫して開発・運用しています。 今回はそんな中で取り組んだレコメンドシステムの配信部分の構築事例について紹介します。 ※ レコメンドシステムの開発ではプライバシーポリシー の範囲内で取得したデータを用いて行っています。 Yahoo!ショッピングのレコメンドについて レコメンドとは端的にいうとユーザーの興味がありそうな商品を薦める機能のことで、Yahoo!ショッピング内のさまざ
さて、みなさんはこういう叫びを聞いたことはありませんか？ 「ラグやば！これ絶対当てたのに死なねえんだけど！」 「ラグすぎてワープするんだけど！」 「同期ズレえぐ！！！」 スプラトゥーンは、インターネットを介してゲームの情報をやり取りすることで、離れた人たちとも遊べる対戦アクションゲームです。 まず、大前提として、インターネットを介している時点で、少なからず通信遅延（ラグ）が発生します。ラグのないゲームは存在しません。 スプラトゥーンでは、通信環境が悪くても比較的不快になりにくい実装がされているのですが、これの仕様が結構ややこしくて、自分のプレイのガバさをラグのせいにする人もしばしば見かけます。 （とんでもないラグがあるともちろんキツイですが） この記事では、 一般的なゲームにおける通信同期方式 スプラトゥーンにおいては、どうやって何を同期しているか これはラグのせいなのか、自分のガバのせい
筒井@ryu22eです。8月の「Python Monthly Topics」は、Djangoでの非同期Viewの使い方について解説します。 Webアプリケーションの非同期処理とは何か？ 非同期処理をサポートするWebアプリケーションでは、複数のリクエストを受け取った際、シングルスレッドの中で各リクエスト用の処理を細かく切り替えながら、同時に動かしているように見せかけて実行します（「並行処理」とも言います）。 非同期処理の利点として、Djangoの公式ドキュメントでは以下のように説明しています[1]。 The main benefits are the ability to service hundreds of connections without using Python threads. This allows you to use slow streaming, long-
非同期処理を使いこなそう ! - 第 3 回 AWS サービスを活用した非同期処理アーキテクチャ - builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、プロフェッショナルサービス本部クラウドアプリケーションアーキテクトの五十嵐です。 「非同期処理を使いこなそう !」シリーズの第 3 回となる今回は、いよいよ物理アーキテクチャ、つまり AWS サービスを利用したアーキテクチャ構成を考えていきます。 これまでの連載記事では、EC サイトを例として 第 1 回 で同期処理と非同期処理の使い分けについてご説明し、第 2 回 で各処理のステップや論理構成についてご説明しました。これをベースとして、第 3 回は非同期処理を実現するための AWS サービスをご紹介し、それらを活用した非同期処理アーキテクチャについてご説明します。 みなさまは AWS を活用したアーキテクチャ (以下「アーキテクチャ」と記載) をご自身で描かれたことはありますでしょうか。もしあまりイメージがわいていなかったり、見たことはあるけどもご自身で描いたことがないという
async/awaitの鬼門の一つとして、適切なキャンセル処理が挙げられます。別に基本的にはそんな難しいことではなく、CancellationTokenSourceを作る、CanellationTokenを渡す、OperationCanceledExceptionをハンドリングする。というだけの話です。けれど、Tokenに手動でコールバックをRegisterしたときとか、渡す口が空いてないものに無理やりなんとかするときとか、タイムアウトに使った場合の始末とか、ちょっと気の利いた処理をしたいような場面もあり、そうした時にどうすれば良いのか悩むこともあります。 こういうのはパターンと対応さえ覚えてしまえばいい話でもあるので、今回はAlterNatsの実装時に直面したパターンから、「外部キャンセル・タイムアウト・大元のDispose」が複合された状況での処理の記述方法と、適切な例外処理、そして最
非同期処理を使いこなそう ! -第 2 回 非同期処理と同期処理の処理構造 - builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
皆さんこんにちは。プロフェッショナルサービス本部のデジタルトランスフォーメーションチームでマネージャーをしています堀場です。 さて、いきなりですが、先日、ふと、頭に思い浮かんだ単語があります。それがこちら。 「機能」「情報」「連絡」「手順」「時間」・・・ 25 年以上前に覚えた単語がふと出てきたわけで・・・・この後、何が続くかご存知でしょうか ? 答えは、「論理」「暗号」です。 これは、モジュール強度 (または凝集度) の段階を表すもので「暗号」は凝集度が低く「機能」がもっとも高いと定義されています。なぜ、思い出したのかは謎です。ちなみに、10 年前の資料ですが IPA が提供している IT 人材育成用の汎用コンテンツ の 講義ノート に簡単な解説がありましたので興味がある方は読んでみてください。 凝集度が高いほど、堅牢性、信頼性、再利用性が高く、コードの読みやすさなどの点で好ましく、凝集
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
非同期処理を使いこなそう ! - 第 1 回 非同期処理ってなんだろう ? - builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、プロフェッショナルサービス本部クラウドアプリケーションアーキテクトの五十嵐です。 先日、Web で美味しそうな料理の写真を見かけ、自宅で作ってみることにしました。 大きく分けて以下の手順が必要でしたが、みなさまでしたらどのように調理を進めるでしょうか ? 鍋で水を沸騰させる 野菜を切る 野菜を茹でる 調味料で味付けをする 皿に盛り付ける 1. で鍋を火にかけた後、鍋の前で沸騰するのをじっと待ちますか ? 今回は次の手順が沸騰を待たなくてもできる「野菜を切る」のため、沸騰を待たずに 2. で野菜を切り始め、沸騰したことを確認してから 3. で野菜を茹で始めると思います。 このようにして、完成までの時間を短縮化させる工夫をするのではないでしょうか。「他タスク (今回は水の沸騰) の完了を待たなくても良いケース (野菜を切る)」と、「他タスクの完了を待つべきケース (野菜を茹でる)」
はじめに JavaScript の「非同期処理」ってやっぱりかなり難しくないですか？ 自分も色々試行錯誤しましたが、結局「完全に理解した🤓」→「やっぱり何も分からん😭」っていうループの中で泥臭く理解を深めていくしかないようです。 さて、非同期処理の制御をある程度予測できるようになるには、非同期 API を提供する環境のことやイベントループ、マイクロタスクなどの仕組みについて理解する必要があります。 そして環境に埋め込まれた JavaScript Engine のことも理解する必要があります。 今回の記事では、JavaScript Engine の１つである V8 が内部で変換するコードから async/await の挙動を理解するための解説を試みたいと思います。V8 エンジンからアプローチすることで async/await の分かりづらい挙動を掌握して非同期処理を打倒します。 今回の記
この本は、ブルーベリー本の 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 「イベントループの共通性質」の項目を追加 「ロードマップ
TL; DR ユーザーを待たせるとき、「どのように待たせるか」によって印象は結構変わります。 非同期処理などでユーザーを待たせるときは、適切なローディングを表示してUXを改善しましょう。 違いを体感していただけるよう、いくつかの例を元に書いてみました。 ボタン押下の例 送信ボタンを押してから、通信に1秒かかるお問い合わせフォームを作ってみました。 2つの例を比べてみて下さい。 実際には何も通信しないダミーのFORMなので、気軽に試して下さい。 Bad See the Pen ダミーFORM by laineus (@laineus) on CodePen. Good See the Pen ダミーFORM by laineus (@laineus) on CodePen. 改善されたこと1 ユーザーの操作に対し、画面が即時応答するようになりました。 結果: 体感速度が向上しました。 どちら
JavaScriptの非同期処理をじっくり理解する (4) AbortSignal, Event, Async Context
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 中止処理 並行処理ではしばしば実行中の処理を中止したい場合があります。 古典的なキャンセル処理 Webブラウザ/Node.jsともに、 setTimeout の中止が可能です。 const timeout = setTimeo
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方
JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?
JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
先に結論 awaitが使われている関数はジェネレータとして内部的に変換され、非同期処理になる。 その為、async関数である必要がある。 コンパイラから見ても、asyncが付いていることで効率的にコンパイルできる。 （追記 2021/07/21）最上位でのawaitは、もうすぐ可能になるかもしれない（一部ブラウザは実装済）。（鶏(async)が先か卵(await)が先かでコメントで教えて頂きました。感謝！） というわけで本編 awaitはPromiseを返す関数を呼び出す方法として非常に便利ですが、それを使う箇所にはいちいちasyncを付けて回らなければならないのが面倒だと思ったことはないでしょうか。 そもそもawaitを内部で使っている関数が常にasyncである必要性がいまいちピンと来ない方もいるのではないでしょうか（最初にasync/awaitの構文を見た時、私自身がそうでした）。 例
![[JS]なぜawaitはasync関数の中にしか書けないのか - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9dd3f1e527883dd8ffaf6e34f70ea648330eb9f/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlNUQlRTMlODElQUElRTMlODElOUNhd2FpdCVFMyU4MSVBRmFzeW5jJUU5JTk2JUEyJUU2JTk1JUIwJUUzJTgxJUFFJUU0JUI4JUFEJUUzJTgxJUFCJUUzJTgxJTk3JUUzJTgxJThCJUU2JTlCJUI4JUUzJTgxJTkxJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgxJUFFJUUzJTgxJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03ZDJkNTQ1MGE4NjAzZjQ2ZWE5ODIyMDQ5Y2EyNjE2ZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBqdW4xcyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODBmMGZmOWQ3OWU5Y2E3MDY1ZTVjNDM1MjZkMDI4ZGI%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D1b2c33e46c0e1b71781c03be2b0f46d6)
非同期処理、なにもわからない
最近のお仕事で、C#の非同期処理の書き方が分からずに、溶岩地帯に自爆していくコードを沢山みるようになったので、ケースとして日常風の記事にしてみました。 どんな風にハマってしまい、どうやって解決するのかが分かると思います。 結論 先に書いておきます。 Task.Run()を使ってはいけません Task.Result, Task.Wait()を使ってはいけません Threadクラスを使ってはいけません async-await構文だけを使って書きます async voidにするのは特殊な場合だけです がんばれー、わかってしまえば難しくない！ 補足: もしあなたがJavaScriptで非同期処理を書いた事があるなら、その知識をそのまま生かせます。 JavaScriptではTaskの代わりにPromiseを使いますが、Promiseには上記1,2,3は存在しません。しかし、それで困ることはありません
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptを使った非同期通信について - Qiita
Pythonの非同期処理の基礎とOpenAI APIへ並列リクエストする実践例
JavaScript Visualized - Promise Execution
C#非同期メソッドを指定したスレッド上で動かす - Qiita
各言語の非同期処理の仕組みまとめ - Qiita
非同期処理をシンプルなPythonコードで説明する - Qiita
Pythonの非同期処理の基礎とOpenAI APIへ並列リクエストする実践例
【TypeScript】非同期処理の良さを図解で日常生活に例えて解説する - Qiita
JavaScriptの非同期処理について - Qiita
ペペロンチーノで学ぶ非同期プログラミングによる並行処理 - Qiita
【Python】ChatGPT効率化の為に非同期処理を実装｜Clirea
SpringBootでAsyncを使う時に知っておきたいExecutorのこと - 日々常々
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
【ChatGPT】と話して学ぶ、【asyncとawait】 - Qiita
【入門】『スーパーマリオ』で学ぶ、JavaScriptの非同期処理
JavaScriptの非同期処理の歴史 - Qiita
大規模レコメンドシステムの構築とレイテンシ改善 〜 Yahoo!ショッピングの事例
スプラトゥーンの非同期処理の話 ～なにがラグのせいなのか～｜まけトピア
Django非同期View入門 | gihyo.jp
neue cc - async/awaitのキャンセル処理やタイムアウトを効率的に扱うためのパターン＆プラクティス
V8エンジンによる内部変換コードでasync/awaitの挙動を理解する
イベントループと TypeScript の型から理解する非同期処理
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
非同期通信をするなら絶対にやったほうがいいこと - Qiita
JavaScriptの非同期処理をじっくり理解する (3) async/await
JavaScriptの非同期処理をじっくり理解する (2) Promise
JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
[JS]なぜawaitはasync関数の中にしか書けないのか - Qiita