この書籍はCreative Commons Attribution-NonCommercialの ライセンス で公開されています。 また、PDFとしてレンダリングしたバージョンは以下からダウンロードすることができます。
![JavaScript Promiseの本](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7a292695a4fc0e8176db50e48c5aa35e285fd8e/height=288;version=1;width=512/https%3A%2F%2Fazu.github.io%2Fpromises-book%2Fpublic%2Fimg%2Fpromise-catch.png)
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
some() メソッドは反復処理メソッドです。指定された callbackFn 関数を配列の各要素に対して一度ずつ、 callbackFn が真値を返すまで呼び出します。該当する要素が見つかった場合は、 some() は直ちに true を返し、配列の反復処理を中止します。一方、 callbackFn がすべての要素に対して偽値を返した場合、 some() は false を返します。 some() は数学の量化子 "there exists" のような働きをします。特に、空配列の場合、どのような条件でも false を返します。 callbackFn は値が割り当てられている配列インデックスに対してのみ呼び出されます。疎配列の空のスロットに対しては呼び出されません。 some() は呼び出し元の配列を変更しませんが、 callbackFn として指定された関数は配列を変更することができま
JavaScriptでのIPアドレス取得 Webサイトによってはブラウザが変わっても同じユーザーか判別するためにIPアドレスを使用することがある。 JavaScriptでIPアドレスを取得するにはfetchでipinfo.ioからJSONデータを取得する。 fetch('https://ipinfo.io?callback') .then(res => res.json()) .then(json => console.log(json.ip)) // => 125.87.160.34
Browsers (See also Installation.) There are many ways to use bluebird in browsers: Direct downloads Full build bluebird.js Full build minified bluebird.min.js Core build bluebird.core.js Core build minified bluebird.core.min.js You may use browserify on the main export You may use the bower package. When using script tags the global variables Promise and P (alias for Promise) become available. Blu
JavaScript Promise / Async Function の使い方 JavaScript の Promise や Async Function(async/await)を使った非同期処理の基本的な使い方についての解説のような覚書です。 同期処理と非同期処理 プログラムの処理は同期処理(sync)と非同期処理(async)に分類することができます。 同期処理は記述されたコードを順番に処理し、1つの処理が終了すると次の処理を実行します。そのため、どれかの処理に時間がかかるとその処理が終了するまでその次の処理に進むことができません。 以下の oneSecMsg() は1秒経過したらメッセージを表示して終了する関数で、この関数を実行すると1秒間処理がブロックされます。 以下を実行すると、「Start」とすぐに表示され、oneSecMsg() により同期的にブロックされ1秒後に「一秒経
Intro Promise.allSettled() と Promise.any() の仕様策定が進んでいる。 両者は近いレイヤの仕様では有るが、作業の進捗には差がある。 Promise.allSettled は Stage 4 であり、 Chrome や Safari TP には実装もされている Promise.any は Stage 2 であり、実装はまだない ここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。 Promise.all()/race() Promise.all(), Promise.race() は、いずれも複数の Promise をまとめて処理する Utility Method のようなものである。 all は全ての Promise が Resolve したら Resolve し、 race
はじめに、の前に(2020/10/29 追記) (いつの間にか)MDNに、forEachはPromiseを待たない、という趣旨の説明が書かれています。 MDNを読めば、この記事の内容を読む必要は無いと思います……。 はじめに Javascriptでは、async/awaitを使う事によって、非同期処理が非常に簡潔に書ける様になっています。 今後はasync/awaitを使ったプログラミングが増えていくと思います。 node.jsで、async/awaitを使ったプログラミングをしていたのですが、ハマった事があったので、自分用の備忘録としてメモ書きです。 実行環境 OS: Debian 9.6 node.js: v11.2.0 問題となったコード 配列をconsole.logで出力するだけのプログラムです。 ただし、console.log(value)の前に、sleep(1000)が入ってい
概要 先日、非同期処理に関して、下記のようなツイートをしました。 ・非同期処理A〜Cの3つ ・全て成功した場合のみ処理Dを実行 ・A〜Cは依存関係なし 上記ケースで、お約束かのように await A await B await C と書く事がないように、若手を指導しなければなあ。— Masaki Suzuki@フリーランスクラウドエンジニア (@makky12) 2020年1月9日 このツイートに対して、思った以上に反響を頂いた(と思う)ので、今回もう一度async/awaitのことを記事にしました。 ちなみに前回書いたasync/await関連の記事はこちら。 makky12.hatenablog.com なお今回の記事を書くにあたり、下記ブログを参考にしました。 (ブログを書こうと思ったきっかけもこれを見たから) 「メソッド実行とawaitの分離」の書き方など、役立つソースが多いです。
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback Promise.resolve() は静的メソッドで、 Promise を与えられた値で「解決」させます。値がプロミスの場合は、そのプロミスが返されます。その値が Thenable であれば、Promise.resolve() は then() メソッドを、準備した 2 つのコールバックと共に呼び出します。それ以外の場合は、その値で履行するプロミスが返されます。 この関数は複数階層のプロミス風オブジェクト (例えば、何かで解
import ky from 'ky'; const client = ky.create({ prefixUrl: 'http://localhost:3001', headers: { 'Content-Type': 'application/json' }, timeout: 5000, // milliseconds }); import ky from 'ky'; const client = ky.create({ prefixUrl: 'http://localhost:3001', headers: { 'Content-Type': 'application/json' }, timeout: 5000, // milliseconds }); const getData = async (): Promise<void> => { try { const respons
« 前のページ 次のページ » コレクション内の各アイテムに対する処理は非常に一般的な操作です。JavaScript では簡単な for ループから map()、filter() にいたるまで、コレクションに対する反復処理の複数の方法を提供します。 イテレーターとジェネレーターは、コア言語の内部に反復処理が直接的に取り入れられており、for...of ループの動作を簡単にカスタマイズできる仕組みをもたらします。 詳細についてはこちらもご覧ください: Iteration protocols for...of function* と ジェネレーター yield と yield* JavaScript では、イテレーターはシーケンスおよび潜在的には終了時の戻り値を定義するオブジェクトです。 より具体的に言うと、イテレーターは、次の 2 つのプロパティを持つオブジェクトを返す next() メソッ
動作確認 ( yield, nextメソッドの動作を理解する ) nodeで動作確認します。app.jsというファイルを作成して、以下処理を記述します。 function* generatorFn1() { console.log('generatorFn1 1') yield 100 console.log('generatorFn1 2') yield 200 console.log('generatorFn1 3') } const generator1 = generatorFn1() console.log('start') console.log('next 1') console.log(generator1.next()) console.log('next 2') console.log(generator1.next()) console.log('next 3') c
# Vueで学ぶJavaScriptのオブジェクト指向今回やること Monsterクラスの作成スライムをインスタンス化モンスタークラスを継承し、メタルボディをもったMonsterMetalを作成はぐれメタルをインスタンス化さらなる拡張を行う場合(はぐれメタルを無理やり題材にしたのできれいなオブジェクト指向ではないです) がっつりゲームのモンスタークラスを作成する場合は以下の記事が参考になりそうです。 【Breed】RPGのモンスターなどのキャラクターを作成するときに使うデザインパターン - Qiita # Monsterクラスの作成まず簡単にドラクエのモンスタークラスを作成してみます。 ステタースを持っている攻撃する逃げる import merge from 'lodash/merge' export default class Monster { constructor(options
# JavaScriptの配列操作まとめ# JavaScriptの配列とはJavaScriptにおける配列の定義は 配列の各要素には0から始まる数字がキーとなるlengthというプロパティで、配列の要素数がわかる初心者の頃に間違いがちなのが、オブジェクト(連想配列)に対してfilter()などの関数を使用して、使えないよって言われるパターン。 連想配列って名前が勘違いの原因かと思います。 オブジェクトもキーを数字にして生成することは可能ですが、配列ではありません。 var drinks = { "0": "コーヒー", "1": "カフェオレ", "2": "メロンソーダ", } drinks[0] >> "コーヒー" drinks.length >> undefined
Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework. Get Started Star Sinon.JS on Github Get Started Install using npm To install the current release (v18.0.0) of Sinon: npm install sinon Setting up access Node and CommonJS build systems var sinon = require("sinon"); Direct browser use <script src="./node_modules/sinon/pkg/sinon.js"></script> <script> // Ac
はじめに JavaScriptには配列を操作するメソッドがたくさんあります。勉強し始めは色々ありすぎてごちゃごちゃしてよくわからなくなることがよくあると思います。 実際身近にも、初学者の方で「JSの基本はなんとなくできてちょこちょこVueやReact触ってるけど配列操作苦手!」という方をよく見かけます。個人的にここが明確に理解できていないからかな?と思うポイントがいくつかあるのでまとめてみました。 一概に操作をするといってもメソッドごとに若干考え方が変わります。そのそれぞれの違いをしっかり把握することで頭の中が整理されます。 実際に抑えておきたいポイント整理してみてみましょう! メソッドを理解するときに重要なポイント(優先度高い順) 何をするメソッドか メソッドの引数に何を渡すか メソッドの戻り値はなにか 破壊的であるかどうか(とりあえずスルーでもOK) 1~4を意識しながら具体的によく使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く