まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきである この記事はなに？ 少しバズったのでまとめておこうかと。 「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加 JavaScriptのPromiseについて学ぶ書籍であるJavaScript Promiseの本 v2をリリースしました。 Promise本 1.0.0をリリースしたのは2014年6月ですが、そこから少しづつアップデートしていました。 JavaScript Promiseの本を書きました | Web Scratch ES6がリリースされたのでPromiseについて学びましょう | Web Scratch 今回のメジャーアップデートとなる2.0.0では、サンプルコードのコードベースをES2015前提のものへと変更しています。 1.x系からの主な変更点としては次のものがあります。 ES6をES2015に表記を変更 コードベースをES5からES2015+(ES2015以降ベース
PromiseはES2015から導入されたJavaScriptの言語機能で、非同期処理を表すオブジェクトです。基本的な使い方としては、まずfetchなどの非同期的な処理の結果としてPromiseオブジェクトが得られます。それに対してthenメソッドなどを用いることで、非同期処理が終わった後の次の処理を登録できます。また、ES2017で追加されたasync/awaitの構文はPromiseを便利に扱うためのものです。これはJavaScriptに独特の概念ではなく、C#ではTask、RustではFutureなどと呼ばれているようです。 JavaScriptを使っている多くの方は、Promiseを多かれ少なかれ使ったことがあるでしょう。そして、Promiseには結果が2種類、すなわち成功と失敗があることをご存知かと思います。このように、Promiseには状態があります。成功した状態、失敗した状態
ヤフー株式会社は、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年前のアドベントカレンダーで、今後はいろいろなモジュー
例1 const sleep = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } const something = async () => { await sleep(100) doSomething() } 例2 Geolocation.getCurrentPosition() - Web API インターフェイス | MDN から // 元メソッドの構文は // navigator.geolocation.getCurrentPosition(success, error, options) // クラスの中 getCurrentPosition(options) { return new Promise((resolve, reject) => { navigator.geolocation.g
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
Intro XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。 これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。 最近、やっと話が前進したので、ここまでの経過を解説する。 Fetch のミッシングピース fetch() は、ブラウザが発行するリクエストと、取得するレスポンスを扱う低レベルなインタフェースとして策定が始まった。 DOM の API が Promise ベースに移行しつつある流れを汲み、fetch() もまた Promise を返す関数一発スタイルになった。 クラスからインスタンスを生成しメソッドを呼ぶ XHR スタイルでは、インスタンスを再利用した場合の挙動などを含め、オブジェクトのライフサイクルを考慮
ってこれでいいんじゃないか？ と遅延した電車内でふと気が付いた。 コードは全部スマホで打ったので syntax error 等あるかもしれませんが… 追記（2017/2/15 21:50）：案の定 delay() 関数が間違ってたので修正。あと例を追記。 追記（2017/2/19 21:50）ブクマされてるみたいなのでさらに追記。 チェックするまでの間にタイムラグがあるので、コードの一番下の方でも示したように、 delay(1) (1ms) の Promise はチェックするまでに resolve されてしまうため resolved と判定されることに注意。 なので本当はこういうコードが必要ない書き方にするのが一番いいんだろうと思う。 ただ以前 resolve されてるか判定したいことがあったような？とふと思い出してやってみたという程度なので、参考程度に。 追記（2017/2/19 22:
http://emacs.rubikitch.com/promise/ Emacs LispでPromiseするpromise.elに Emacs専用関数がたくさん追加され プログラミングしやすくなりました。 promise:run-at-time タイマーによる関数実行 promise:delay 遅延評価 promise:time-out タイムアウト promise:make-process プロセス作成 promise:make-process-string プロセス実行結果の文字列 promise:url-retrieve URLにアクセスした結果の文字列 promise:xml-retrieve URLにアクセスした結果のXMLオブジェクト promise:async-start async-start(async.el)による別プロセスで得た結果 以上の新関数を導入してページ
Here I’m presenting two cool little functions that are making my days spent in the JS Promise land just a bit happier. All code snippets are written using ECMAScript 2015. So, I’ve often found myself writing code like this: const getUser = (id) => { return httpClient.get('https://facebook.com/user/' + id) .then((response) => { // Side Effects Logic return cacheData(response); }) .then((response) =
JavaScriptで常に頭を悩ませるのが非同期処理ではないかと思います。非同期処理を幾つも実行したりすると、思ったタイミングで処理が走らないといったことが多々あります。 そんな中でループ処理になると、特に厄介ではないでしょうか。そこで今回はPromiseを使ったループ処理について紹介します。 0から10まで順番に処理をしたら抜けるループ 非同期処理でない場合は次のように書けます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more
時系列順に書いているので、話題がアッチコッチいきますが 現場のライブ感を重視しています！ プロジェクトの後半で、すごい優秀な方が入ってきてくれたのでそこからの受け売りも結構混じっています。神様ありがとう。 プロトタイピング 何は無くともまずはプロトタイプを作成しました。 今回はUIライブラリとしてMaterialUIを採用。 superagentを使って外部JSONファイルを読み込んで、Reactコンポーネントとして表示するだけ。 この時点でのコードレビューでの話題は主に、CSSをどうするのか問題。 MaterialUIにコンポーネント自体のstyleは既に定義済みだが、それだけでは足りないレイアウト調整が発生しそうという懸念でした。 結論は、コンポーネント内に直接定義してしまってOK。 実際作業を進めてみたところ、最初の想定よりは補助的なCSS記述は不要でした。 reduxの導入 作成す
最近Reaktorが掲載した『 Promises made by a Reaktor developer had an impact on the industry article 』で約束した、Bluebird promiseライブラリの製作者であるプログラマのPetka Antonovからの知見です。 Bluebirdは広く使用されているJavaScript用のpromiseライブラリで、同じような機能が実装されているにも関わらず、他のpromiseよりも100倍速いという理由から最初に知られるようになったのは2013年でした。Bluebirdが高速な理由はライブラリ全体にJavaScriptの最適化の基礎を一貫して適応しているからです。この記事ではBluebirdの最適化に使用する3つの重要な基礎について詳細に説明します。 1. 関数オブジェクトの割り当てを最小限に抑える オブジェク
JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に
さて、 Node.js のエラーハンドリングは難しいと言われてますが、 2016年現在、つまりNodeの v4 とか v6 が主流になり、 Promise が基本的な処理として採用されている状況ではどうでしょうか。ちょっと考えてみます。 一応これの補足です。 qiita.com TL;DR 未だに難しい。ただし、 Promise で改善されている。async-await や zone まで来たらかなり楽になる。 あと、 unhandledRejection が uncaughtException よりも酷いことにならないので、大分マシになっている。 Node.js のエラーハンドリングの難しさ まず JavaScript には同期と非同期のエラーハンドリングのやり方があります。前者は所謂 try-catch による方法、後者は callback を使って第一引数で実現する方法や emit(
はじめに JavaScriptは非同期処理との闘いです。 人類が非同期処理を倒すために、Promiseやasync-awaitという最終兵器を生み出して、劇的にクリーンで平和な世界が生まれたという話は以前しました => (もしかして： JavaScriptは如何にしてAsync/Awaitを獲得したのか Qiita版) しかあぁし！！！ 甘い、甘いのですよ！！！！！ 人類を苦しめ続ける非同期処理が、そんな簡単に完全に倒せるわけがないのですよ。 非同期処理の本当にヤバイ深淵、それが「例外処理」です。 みなさんはPromiseで開発していて、 「なんか途中までうまく行ってたんだけど気づいたら例外が外側に飛ばなくなった…なんでだ…」 「助けて！Promiseにcatch書いてるのに何故か例外がcatch出来ないの！！！」 という経験はないでしょうか。私は何度もあります。 この記事では、具体的に何
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
