JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
Promise で排他制御を行う - Qiita
Promise での非同期処理時、排他制御を怠ったばっかりにバグを出してしまった、そんな経験ありませんか。私はあります。 スレッドを使う場合、Mutex や synchronized 等々、大抵排他制御を行うライブラリや構文などがセットでついてくるのだけど、Promise/A+ には無いので自前で制御する必要がある。 なので、Promise で排他制御が出来るライブラリを npm から調べ、めぼしい物二つをピックアップしてみた。 async-lock https://www.npmjs.com/package/async-lock 一番メジャーっぽいライブラリ。ダウンロード数も多い。 ロック取得時、key を指定する redis の key の set のように、key ごとに排他制御したい場合に便利 タイムアウトのサポート 待ち受けタスク数の上限のサポート インターフェイスが、acqui
すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
はじめに このページは、プロトアウトスタジオのAPIにつなげる授業に関連して、よりAPIの多様さ、広がりを深掘りします。 まだ、JavaScriptに慣れていなくても「なるべくシンプルにAPIを体験する」ことを目指して、 public-apis というフリーで使えるAPIを集めてリストにしているサイトから、手順が少なくAPIにつなげられるシンプルに取得できるものを中心に、直接取得できるURL・Node.js axios await/async ソースコードを一つ一つトライしています。 慣れてきたら、自分で public-apis のサイトを直接読んでみて、巡ってみましょう！ APIピックアップ数 最終更新日 2020/6/8 104 個のAPIをピックアップ中！ 参考資料 public-apis の豊富なAPIリストをベースにAPIつなげていきます。 ピックアップルール 手順が少なくAPI
IKEA Trådfri Gatewayがいつの間にか売られていたので、Node.jsでド派手なLチカをしてみる。
IKEA Trådfri Gatewayがいつの間にか売られていたので、Node.jsでド派手なLチカをしてみる。JavaScriptNode.jsikea TL;DR いい色のLED電球をNode.jsで操作できる。 日本でもIKEA Trådfri Gatewayが売ってる。 IKEAにふらっと行ってみたら、 うおおおおおおおお！！！！！ いつの間にか、IKEA Trådfri Gatewayが売られている！！！！ おおおおおおおお！！！！ 取り乱しましたが、IKEA Trådfriとは、かの家具量販店IKEAで販売している、無線で操作できるLED電球のことです。 専用のリモコンで操作できる他、GatewayがあればGoogle Home,Alexaはもちろん、ソフトウェア操作できるものです。 ただ、悔しいながら、日本では、Gatewayが販売されていなかったのです。 シーリングライト
JavaScriptでゲームシナリオを快適に実装する（デモ有） - Qiita
以下のような人向けの、実践的なサンプルやデモを含む記事です。 ゲームのシナリオデータをJavaScriptできれいに書き下したい デモ ゲームの敵・NPC等の動きをJavaScriptできれいに書き下したい デモ Flash や AfterEffects のタイムライン編集でやるようなアニメーションを JavaScript で実装したい デモ1 デモ2 Web UIのチュートリアルとして「実際に操作している様子」を画面上で見せる機能を実装したい デモ async-await の同期版みたいなものが欲しい ジェネレータの有用性を理解したい 「普段はJavaScriptをフロントエンド開発に使用している」という読者を想定して書いていますが、例えば async-await についてよく知らないという方は、それに関する記述を読み飛ばしていただいて構いません。 事の発端 今年の新年会で同僚から「エイ
async await の使い方 - Qiita
これからはasync,awaitが読み書きできないと生きていけなそうだったので調べてみました。 ※コード例は一応TypeScriptですが、ほとんどJavaScriptです。 参考: async function - JavaScript | MDN
Webページにチャット機能を簡単に導入できるSmallchatを試してみた #Slack | DevelopersIO
どうも！西村祐二＠大阪です。 今回はWebページに簡単にチャット機能を追加できる「Smallchat」というサービスを紹介したいと思います。 このサービスのいいところはWebページ上のチャットとSlackが連携できるところです。 通常だとチャット機能の開発コストや運用コストがかかり大変ですが、 このサービスは出力されたJavascriptのタグをWebページに埋め込むだけで簡単にチャット機能の導入ができます。 さっそくSmallchatを使ってみましょう！ 事前準備 Slackを利用するためSlackのアカウント、Slackのチームの準備をおねがいします。 Slackのサイト SmallchatとSlackを連携 ▼こちらよりSmallchatのサイトにアクセスし「Add to Slack」をクリックします。 ▼「Authorize」のボタンをクリックして権限を付与します。 ▼Webサイト
Node書くならEventEmitterについて知っとくべし - Qiita
Nodeの組み込みモジュール・サードパーティモジュール問わず広く使われるのが EventEmitter オブジェクト。 これはNodeで使われるデザインパターンの筆頭みたいなものなので、知っておかねばならない。 ドキュメント: Events ブラウザ上のJavaScriptで addEventListener を使ってイベントドリブンの開発を行うが、Node上でそれを行うのための機能を提供するのが EventEmitter。 例えば次のように使う var EventEmitter = require('events').EventEmitter; function asyncFunc() { var ev = new EventEmitter; console.log('in asyncFunc'); setTimeout(function () { ev.emit('done', 'fo
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
Node.jsでファイルをコピーする - Qiita
でできるやつだ。 これをNode.jsでやりたい。 なんかライブラリあるだろ、と思ってnpmレポジトリを2分ほど探したが良いのが見つからず。 いや多分よく探せば絶対あるんだけど探すのめんどくさい。 作るか。 ファイルコピーを実装する まずは一つのファイルをコピーする関数を作る。 fsモジュールの.createReadStream()と.createWriteStream()を使えば一瞬だ。 var r = fs.createReadStream(src), w = fs.createWriteStream(dest); r.pip(w); function _copySingle(src, dest, callback) { var aborted = false; var r = fs.createReadStream(src), w = fs.createWriteStream(des
async関数が実装された - JS.next
概要 非同期な処理を同期的に書ける関数タイプが実装された。 基本 「async」キーワードに続けて関数定義を書くと、async関数となる。 async function afn1() { } afn2 = async () => { } obj = { async afn3() { } } async関数を呼び出すとプロミスが返される。 console.log( afn1() ) // <Promise> このプロミスは、async関数が終了するとその返り値で解決され、例外が起こると棄却される。 async function afn4( flag ) { if ( flag ) return 'Yes' else throw 'No' } afn4( true ).then( v => console.log( v ) ) /// "Yes" afn4( false ).catch( v
Promiseについて0から勉強してみた - Qiita
ES6を使う機会がありそうで、Promiseについて全然知らなかったので、実際に書きながら勉強してみたときのメモ。 なお、以下を参考にさせて頂きました。 0から勉強する時でもとても分かりやすかったです。 JavaScript Promiseの本 環境 Node.js v4.2.2 Promiseとは 非同期処理を操作できる 非同期処理の成功時(resolve)、失敗時(reject)の処理を明示的に書くことが出来る 非同期処理を平行・直列に実行させることが出来る とりあえずやってみる とりあえず、参考にさせて頂いたサイトのコードを書いてみました。 function asyncFunction() { // Promiseオブジェクトを返却する.処理成功時にはresolveが呼ばれる return new Promise(function (resolve, reject) { setTim
Swiftで複数の非同期処理を並列実行させて、すべてが終わったらコールバックを受け取る関数 - Qiita
改良したものをライブラリとして公開しました。 Swiftで複数の非同期処理を扱うライブラリAsyncKitを書きました 非同期処理を並列に実行させてすべてが終わったら別の処理を行う、ということをしたいとき、GCDのgroupを使う方法があります。 ただ、毎回GCDのコードを書くのは美しくないですし、やり方を忘れてしまいがちです。 そこで新しく parallel という関数を作りました。 JavaScriptの非同期処理を扱うライブラリ "async" にあるparallel関数を参考にしています。 Quick Example parallel( [ { done in done("1") }, { done in done("2") } ]) { results in print(results) // -> [Optional(1), Optional(2)] } let process
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
async関数においてtry/catchではなくawait/catchパターンを活用する - Qiita
ECMAScript6のアロー関数とPromiseまとめ - JavaScript - Qiita