JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
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
async/await は Promise を置き換えない - Okapies' Archive
まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきである この記事はなに？ 少しバズったのでまとめておこうかと。 「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え
Promise のキャンセルについて - Qiita
[ English version ] JavaScript と Node.js についてのこの徹底した投稿では、Promises のキャンセルの歴史、なぜNode.jsに関係があるのか、そして async/await APIで使おうとしたときに注意すべきことについて学ぶことができます。 この投稿は、JavaScript の Promise API をよく理解していて、 Node.js の経験がある方のためのものです。 歴史 2014 年に Promise API がブラウザに導入されて以来、人々は Promise で他に何ができるかを調べていました。ブラウザに最初に登場した関連APIは、HTTP リクエストのための fetch() でした。 HTTP リクエストの問題は、サーバーのリソースを消費することであり、サーバーに送信されるリクエストの数が多い場合はお金がかかります。このため、特に
Node.js 12正式版が登場、1年ぶりのLTS対象バージョン。起動高速化、TLS1.3対応、ES6モジュールの実験的サポートなど
Node.jsは半年ごとにバージョンアップが行われ、偶数バージョンがLong Term Support（LTS：長期サポート）対象となるため、今回のNode.js 12はLTS対象バージョンとなります。 LTS対象バージョンのサイクル LTS対象バージョンは、リリース後最初の半年を「Current」（最新版）、次の1年半を「Active」（有効）、そのあとの1年を「Maintenance」（保守）という3つの状態を持ちます。今回のNode.js 12もActiveなLTSになるのは半年後の予定です。 Node.js 12のおもな新機能 Node.js 12のおもな新機能としてはJavaScriptエンジンのV8が「V8 7.4」にアップグレードされ、JavaScriptのパースが高速に、Asyncのスタックトレースが可能に、引数のミスマッチ時のコールが高速になるなどの改善が行われています。
サードパーティJavaScriptの最適化 - 一休.com Developers Blog
本記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。典型的には、Google Analytics等のスクリプトが、サードパーティスクリプトに該当します。 一休.comでは、サードパーティスクリプトを、アクセス解析・広告のリターゲティング・A/Bテスト等、様々な用途に使用しています。これらのスクリプトは、一つ一つは小さなものであるため、画面表示のスピードに対するインパクトは意識
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
Promiseに出来てasync/awaitに出来ないこと (JavaScriptを例として) - FOOBAR's Blog
JavaScriptで非同期処理をasync/awaitを使って同期的なスタイルで書いていると、すべてのコードをそのスタイルで統一して書きたくなる。なので非同期処理を開始して実行を明け渡したいときはもちろんawaitを使うし、非同期処理に失敗したときはtry-catch構文で例外ハンドラに制御が移るようにする。ただ、同期的なスタイルで書けない処理が存在するために、どうしてもすべてを統一することはできない。Direct styleで書けないcontrolは継続渡しスタイル(CPS)を使って書くしかないからだ。 JSの場合でいうと、並行制御周りがそれにあたる。Promise.all() や Promise.race() などは対応する構文がJS側に存在しない。 例えば Promise.all() に対応する awaitall みたいな構文が言語側に欲しくなる。こんなふうに: const [x,
ayapi.github.io
Hackers Barってなに？ Hackers Bar 六本木にハッカーがおもてなしをするバーが誕生します。 「Hackers Bar」は、ハッカーのプログラミングライブや ビジネスメイキングを楽しむ空間です。 ぁゃしすぎだし、まじで営業してんの！？って半信半疑で行ってみたら、 まじで営業してたｗ 存在してたｗｗｗｗ ぉ店自体のくゎしぃレポゎねとらぼにも載ったみたぃ カクテル名が「ブルースクリーン」「スパゲッティ」って不吉すぎるでしょ！ 六本木にできた「Hackers Bar」行ってきた - ねとらぼ ゃってもらったライブコーディング 弟が、ぁゃぴにソファーをくれるって言ってて、 ゃったーってかんじなんだけど、③人掛けでまじデカぃっぽぃ！ ぉ部屋の㊥ゎだぃじょぶっぽぃんだけど、 運ばれてくる時、マンションのエレベーターにちゃんと入るのかな？ …ってことで、それを計算したくて／(^o^)＼
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
