Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
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
はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？ async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解できていなかったため、エラーの所在を突き止めるのに苦労してしまいました。 そのため、これを機にasync/awaitにおけるエラーハンドリングについて備忘録的にまとめておきます。 この記事のまとめ; catchされるエラーはrejectのみか、throwされたエラーも含まれるか →両方catchできる async関数における処理の順序、awaitがある場合とない場合 →awaitがない場合には同期的に処理が実行され、catchできなくなる エラー処理を外側に伝播し
はじめに 今回の記事では、JavaScriptの学習における最大の鬼門の一つ「非同期処理」を、任天堂のゲーム『スーパーマリオ』を具体例に、初心者でもわかりやすく解説する。 対象とする読者 プログラミング初心者 非同期処理が全くわからない初心者 タイトルで気になったひと 同期処理と非同期処理 まずは、「同期」と「非同期」のそれぞれの定義や違いについて解説する。同期処理とは、コードを上から下まで順番に処理することを意味する。一方で、非同期処理はある処理が終わるのを待たずに、別の処理を実行することを意味する。 参考までに、「分かりそう」で「分からない」でも「わかった」気になれるIT用語辞典では、以下のように説明されている。 非同期(読：ヒドウキ 英：asynchronous)とは相手との足並みを揃えないこと。あるいは、相手の反応を待たないで、ひょいひょい行動すること。 同期は何かと何かを「同じに
非同期プログラミングについて、イメージだけを超速で掴むための記事を書きました。非同期プログラミングが全くわからない人、具体的には、「async await ってなに……？」「for 文で実行していくのと何が違うの……？」レベルの人を想定しています。 非同期プログラングって何？ 同期的じゃないプログラミングです。同期的ということは、プログラムが上から下に順々に実行されるということです。つまり、普通のプログラムはだいたい同期的です。言い換えれば、非同期プログラミングは順番が入れ替わる（可能性）のあるプログラムです。なぜそんなことをするかについては後述します。 ペペロンチーノを作りたい あなたはペペロンチーノを作りたいとします。以下のタスクが必要です。 パスタを茹でる（5 分） ニンニクを切る（1 分） ソースを作る（4 分）、ただしニンニクを切っている必要がある 盛り付けをする（0 分）、ただ
想定読者 非同期処理がいまいちイメージできないという人 非同期処理って具体的にどう書くの？という人 Pythonの基本文法はなんとなく知っているよという人（←具体的な実装方法を知りたい人のみ） Pythonがパソコンにインストールされている（←動作確認したい人のみ） 非同期処理、同期処理とは？ まずは結論から。 非同期処理とは、 あるタスクが終了するのを待っている間、別のタスクを実行すること。 同期処理とは、 処理を順番に実行していくこと。 以下、詳しく書いて行きます。 非同期処理のイメージ 非同期処理のイメージは、 家事を並行してこなすことに似ています。 例えば、 ご飯を炊いている間、炊飯器の前でただ炊けるのを待っていては、時間がもったいないです。 炊けるまでの１時間の間に、他のメニューを作ったり、部屋の掃除をした方が効率的です。 このように、 タスクA（ご飯を炊く）が完了するまでの間、
こんにちは、commmuneでデータサイエンティストをしているひぐです。 人間が苦手なマルチタスクをLLMに任せたら、効果的に処理してくれるのではないか?というモチベーションのもと、Pythonの非同期処理を使って並列かつストリーミングでChatGPTの回答を出力するアプリを作りました🤖 例えば下記は、ある課題を入力すると、深さ・広さ・構造・時間軸という異なる観点で解像度を上げてくれるアプリケーションです。 アプリに関する登壇資料↓ このアプリ作成にあたってPythonの非同期処理を勉強したところ、最初は多くの専門用語(コルーチン、イベントループ...)や独自の記法により、全体像をつかむのに苦戦しました。一方で、学んでみると予想以上にシンプルな記法で実装できること、そして応用範囲が広くて便利だと理解しました。 この記事では、そんな少し取っつきにくけど便利なPythonの非同期処理にフォー
こんにちは、commmuneでデータサイエンティストをしているひぐです。 人間が苦手なマルチタスクをLLMに任せたら、効果的に処理してくれるのではないか?というモチベーションのもと、Pythonの非同期処理を使って並列かつストリーミングでChatGPTの回答を出力するアプリを作りました🤖 例えば下記は、ある課題を入力すると、深さ・広さ・構造・時間軸という異なる観点で解像度を上げてくれるアプリケーションです。 アプリに関する登壇資料↓ このアプリ作成にあたってPythonの非同期処理を勉強したところ、最初は多くの専門用語(コルーチン、イベントループ...)や独自の記法により、全体像をつかむのに苦戦しました。一方で、学んでみると予想以上にシンプルな記法で実装できること、そして応用範囲が広くて便利だと理解しました。 この記事では、そんな少し取っつきにくけど便利なPythonの非同期処理にフォー
JavaScriptの非同期処理に関しての理解 背景 フロント開発で、よくPromise、await、then、catch、finally、asyncなどのキーワードがありますね、これらと一緒に出る単語は”同期処理”、”非同期処理”ですね。 多分Javaでの逐次処理、並列処理、並行処理と類似しているものと最初勝手にそう思いました。 実際にフロントエンドの開発を始め、この非同期処理の理解についてすごく苦労してました。（ただのプロセス上コードを一行ずつに実行するか、プロセスが複数に同時に処理することではなかったですね😭） いきなり非同期処理クイズです！ まず下記のソースコードの実行順を予測してみてください！ // timeandpromise.js console.log("[A] 🦖 MAINLINE: Start"); setTimeout(() => { console.log("[
非同期処理は、データ解析、APIリクエスト、ベクター化など多様なタスクにおいてパフォーマンスを向上させる鍵となる技術です。特に、待ち時間が発生しやすい多数のリクエストや処理を一度に効率よく処理したい場合、この技術は不可欠です。 非同期処理と並列処理の違い非同期処理と並列処理は、よく一緒に取り上げられることが多いですが、実はそれぞれ異なる目的と特性を持っています。 非同期処理非同期処理は、I/O待ち（ディスクへの読み書きやネットワーク通信など）といった待機時間を有効に使いながら、他のタスクを進める技術です。この方法で、全体のプログラムがスムーズに動作します。 並列処理一方で、並列処理は複数の処理を物理的に同時に行う技術です。簡単な例でいえば動画です。動画の再生と音声の再生を遅延が無いよう同時に行っています。 並列処理により、大量のデータ処理や高度な計算を高速に行えます。 まとめ簡単に言えば、
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/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という対になる二つの
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
「同期的処理」の部分を、公式ドキュメントや他記事では同期処理や非同期処理と混在して書いていたように感じたので、本記事では「同期的処理」と名称を統一しています(個人的にはこの名称部分でかなり混乱してしまいました。。)。 今回は実装にて時間計測を用いるので、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
非同期処理ってなんだい？ - Qiita
今回は非同期処理の方法をサロンの勉強会で理解を深めたので、そのアウトプットをしていきたいと思います。いろんな人から意見をいただけてとても勉強になりました。一人で勉強するよりも、いろんな人と話し合いながら勉強することで、楽しく学べちゃいます！もし、興味あればどうぞ！ 🥋アプリ道場サロン🥋 サンプルコードはたくさんの人がスマートにまとめていらしたので、実際にどんな感じで使うのか具体的に載せていけたらなと思い長ったらしいコードを書きました。笑 間違い等があればコメントで教えていただけたら幸いです！！ 流れ 非同期処理とは？ キーワード completionクロージャを使った非同期処理 async/awaitを使った非同期処理 completionクロージャとasync/awaitの違いって何？ まとめ 非同期処理とは？ 担当直入に言うと、実行結果を後で受け取る。ということだそうです。 日本語
はじめに こちらの記事ではWEB開発における非同期通信について理解しやすいように手を動かして作れるアプリを作りました。 非同期通信について学んでみたい人はぜひ作ってみてください。 対象者 非同期通信とはなにかわからない、または名前だけ知っている、漠然としたイメージだけあるといった方 WEB開発に関する知識はある程度持っている方 非同期通信とは 非同期通信とは通信技術の一つで送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式です。 イメージが湧きにくいと思うので以下の画像を見てください。 この処理ではボタンをクリックした後、画面遷移を行わずにデータベースへアクセスしランダムなポケモン情報を画面に表示しています。 非同期通信では処理は以下のように行われています。 送信ボタンをクリックするとJavaScriptにてhttpリクエストが送信され、サーバーサイド
非同期処理で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,%
内容 C#の非同期メソッドが実行されるスレッドはThreadPoolクラスが生成したワーカースレッドですが、これを指定したスレッドに切り替える方法を紹介します。 スレッド切り替えの様子 非同期メソッド中でSwitchToメソッドを呼び出すことでそれ以降の動作スレッドを切り替えます。 切り替えの様子： async Task SwitchToTestAsync() { Console.WriteLine(".NET ThreadPoolクラスのワーカースレッドまたは起動元スレッド上"); await mainThreadQueue.SwitchTo(); Console.WriteLine("メインスレッド上"); await userThreadPool.SwitchTo(); Console.WriteLine("自前スレッドプールのワーカースレッド上"); await Task.Yiel
本記事を書くきっかけ 実務に入る前に、Webアプリケーション開発の基礎の勉強をさせていただいたので、その知見の共有として。特に今回はChatGPTとの対話を通して、"文量多めの読み物っぽい"記事を目指しています。箇条書きより一連の文章の方が好みの方におすすめ。 asyncとawaitについて 「非同期処理」「待機する」といったキーワードはなんとなく覚えていたものの、説明ができなかった「async」と「await」。FEだったら避けては通れないよ！と先輩社員からもお声をいただきましたざっくり言うと asyncで非同期的な処理をして、awaitでその中で待機しなければならない内容を書いている そうです。実際に使うと、asyncの中のawaitがついている部分は完了までその後の処理が止まっているのがわかります。 ではここで早速、ChatGPTに 「サンプルコードで説明して」 とお願いしてみます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Visualized - Promise Execution
async/awaitにおけるエラー処理を実行の順番から整理する - Qiita
【入門】『スーパーマリオ』で学ぶ、JavaScriptの非同期処理
ペペロンチーノで学ぶ非同期プログラミングによる並行処理 - Qiita
非同期処理をシンプルなPythonコードで説明する - Qiita
Pythonの非同期処理の基礎とOpenAI APIへ並列リクエストする実践例
Pythonの非同期処理の基礎とOpenAI APIへ並列リクエストする実践例
JavaScriptの非同期処理について - Qiita
【Python】ChatGPT効率化の為に非同期処理を実装｜Clirea
各言語の非同期処理の仕組みまとめ - Qiita
SpringBootでAsyncを使う時に知っておきたいExecutorのこと - 日々常々
【TypeScript】非同期処理の良さを図解で日常生活に例えて解説する - Qiita
JavaScriptを使った非同期通信について - Qiita
C#非同期メソッドを指定したスレッド上で動かす - Qiita
【ChatGPT】と話して学ぶ、【asyncとawait】 - Qiita