v-meetup vol.7 でのLT資料です。

目次へ戻る 2) Promiseとは何か ひと昔前の非同期処理では、メソッドにコールバックを渡す手法が取られてきました。コールバックの渡し方や扱いはライブラリによって決定されます。そこで、非同期処理の手法をオブジェクトとして定義すれば様々なライブラリ間で共通した表現ができると考えられたのが Promise です。 Promiseとは非同期処理を抽象化したオブジェクトと、それを操作する仕組みの事を言います。 Promiseオブジェクトの定義 Promiseオブジェクトがどのような表現を持っているかは CommonJS で定義されています。Promiseオブジェクトの表現方法は段階によって分かれており、Promises/A,Promises/B…のような名前が付いています。 ECMAScript6で定義されているPromiseオブジェクトは Promises/A+ というコミュニティベースの仕
こんにちは、サーバーサイドエンジニアの菅原です。 今回はJavaScriptの非同期処理について今更ながら学んでみました。昔ながらのCallback、ES6から追加されたPromise、ES7から追加されたasync await、さらにはRxJsについても調べてみました。 背景 昨今はUXの需要の高まりから非同期処理を書くことが多くなり、リアルタイム性やチャット機能、パフォーマンス改善のためにも非同期処理のコードを書くことが増えています。ただ非同期処理のJavaScriptのコードは処理が増えるごとにコールバック地獄と呼ばれる可読性が損なわれる危険性があることも事実です。 今回は以下のプログラミング条件から非同期処理について簡単なコードを用いての紹介と補足でRxJsを用いた非同期処理を紹介していきます。 実行プログラムの条件 1, 認証ユーザかチェックを行う。 2, 1が成功するとウエパち
はじめに おばんです、ダイエットが捗らない田中です。 さて、今回は sleep と Promise についてちょっとしたTipsをまとめます。 sleep は非同期処理を擬似的に作り出す時などに有用で、 Promise で扱いたいシーンがたまにあるので紹介します。 setTimeout JavaScriptには処理を一時停止させる sleep 関数が存在しません。処理を一時停止させたり、待ちを発生させたい場合は setTimeout 関数を利用して実現する方法があります。 const printHoge = () => { console.log('Hoge') } setTimeout(printHoge, 5000) // Hoge <- 5秒後にコンソールに出力される sleep(setTimeout) を Promise化する 連続した非同期処理を書くときによく使う言語機能として
Promise を使用すると、遅延計算と非同期計算を簡素化できます。プロミスは、まだ完了していないオペレーションを表します。 デベロッパーの皆様、ウェブ開発の歴史において重要な瞬間に備えてください。 [ドラムロールが始まる] JavaScript に Promise が登場しました。 [花火が爆発し、きらめく紙が降り注ぎ、観客が歓声を上げる] この時点で、お客様は次のいずれかのカテゴリに該当します。 周囲の人々が歓声を上げていますが、何が起きているのかわかりません。「約束」が何なのかさえわからないかもしれません。肩をすくめようとしますが、キラキラした紙の重みが肩にのしかかってきます。心配しないでください。私もこの件に注意を払うべき理由を理解するのにかなり時間がかかりました。最初から始めることをおすすめします。 空気をパンチします。そろそろですね。Promise は以前に使用したことがありま
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: JavaScript: Learn Promises - JavaScript Promises made easy. Learn the basics in 5 minutes. 原文公開日: 2017/10/31 著者: Brandon Morelli サイト: https://codeburst.io/ 更新情報: 2017/11/16: 初版公開 2021/03/05: 更新 JavaScriptのPromiseをわかりやすく解説しました。Promiseの基本を5分で学びましょう。 この記事で学べること 本チュートリアルでは、JavaScriptの「Promise」の基礎を学びます。Promiseのすべてを網羅的に説明するものではありませんが、Promiseを理解してコードで使い始めるのに必要な知識を固めることができます。
目次へ戻る 5) Thenable Promiseオブジェクトはthen()メソッドを持ちます。then()にはPromiseオブジェクトの状態が fulfilled または rejected に変化した時の処理をコールバック関数として渡すことができます。この事を Thenable と呼びます。 thenの引数 then()はonFulfilled onRejectedの2つの引数を取ります。ここには処理が成功した時、失敗した時、それぞれのコールバックを渡します。 promise.then(onFulfilled, onRejected) promise .then( function(){ console.info('fulfilled'); }, function(){ console.error('rejected'); } );
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 (この投稿の内容は、自分のブログエントリと同じです。) 前にいくつかのChrome拡張機能を作っていて、すでに数
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く