Next.jsのsearchParamsはas stringせずに必ずバリデーションしてくれ。またはvalibotのちょいテクニック

2024/11/18 21 users Valibot undefined String テクニック

Next.jsのsearchParamsの型問題 Next.jsのsearchParamsの型は少々厄介です。searchParamsのドキュメントでは次のように型定義が記載されています。 export default async function Page({ searchParams, }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }>; }) { const filters = (await se... 続きを読む

JavaScript で then を使うのは避けよう（await / async の初級者まとめ）

2024/05/17 279 users await async then 文法 非同期処理

JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現... 続きを読む

Promise や Context から値を読み取る use React フック

2024/04/07 28 users CONTEXT Canary experimental 以下

use フックは 2024 年 4 月現在、React の Canary および experimental チャンネルでのみ利用可能です。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { c... 続きを読む

100秒で理解するPromise

2024/04/01 118 users 本題 非同期処理 ES2015 以下 動画

そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非... 続きを読む

【TypeScript】inferで型情報を取得する - RAKUS Developers Blog | ラクス エンジニアブログ

2024/01/25 8 users TypeScript Infer ラクス 配列 関数

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 今回はTypeScriptのinferについて紹介したいと思います。 はじめに inferとは？ 具体的な使用例 関数の戻り値の型を推論する Promiseの内部の型を推論する 配列の中身を推論する 文字列リテラルと組み合わせる まとめ inferと... 続きを読む

async/awaitにおけるエラー処理を実行の順番から整理する - Qiita

2023/08/08 174 users await エラーハンドリング async Qiita 殆ど

はじめに promiseを使うとき、いつもpromiseメソッドチェーンで記載していますか？　async/awaitを利用していますか？ もちろん状況によって両方書くのが殆どだとは思うのですが、私はasync/awaitの方が同期的な書き方ゆえに読みやすいため、なるべくそちらで記載しています。しかしながら、エラーハンドリングが理解で... 続きを読む

コンストラクタの外からresolve/rejectを呼ぶPromsieテク

2023/06/03 7 users resolve reject コンストラクタ 引数 変数

Promsie を作って返す関数で、Promise コンストラクタの引数のコールバックではないところで resolve とか reject とかしたいことがある。 こんな感じで、外部に変数を作って普通に代入して外から resolve/reject を呼べるテクがある。 function registerSomething() { let resolve, reject; const promise = new Promis... 続きを読む

Promise.allの親戚たち｜非同期処理を極めよう！Promiseの基礎

2023/05/09 7 users resolve then catch Promise.all

Promise.all まずは復習、Promise.all。 引数にPromiseの配列を渡し、そのPromiseの実行がすべて正常に完了するもしくは1つでも失敗するとresolve/rejectされます。 返り値(thenの引数)には各Promiseの返り値が指定順に渡され、エラー理由(catchの引数)は一番最初にrejectされたPromiseのものが渡されます。 // p1, p2, ... 続きを読む

Timers Promises API が最高 - Panda Noir

2022/09/03 21 users API setTimeout impo 名前 感じ

名前から既にワクワクするこのAPIは、なんとPromiseを返すsetTimeout、setInterval関数を提供しています！最高です… というわけで今回はそれの紹介です。 基本的な使い方 await setTimeout(1000) ←これができるんです！素晴らしくないですか？？ top-level await や for-awaitと組み合わせるとこんな感じで書けます impo... 続きを読む

イベントループと TypeScript の型から理解する非同期処理

2022/04/21 173 users イベントループ TypeScript アプローチ 非同期処理

この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するに... 続きを読む

JavaScriptの非同期処理をじっくり理解する (2) Promise

2021/10/03 186 users ベストプラクティス 動機 実装 実行順序 詳しい仕組み

対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様... 続きを読む

async/await は Promise を置き換えない - Okapies' Archive

2020/12/13 248 users await async Okapies 幻想 archive

まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知... 続きを読む

Promiseをthrowするのはなぜ天才的デザインなのか - Qiita

2020/09/01 222 users Qiita コンポーネ React 代名詞 デザイン

ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（2020年9月現在）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネ... 続きを読む

4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita

2020/05/17 389 users ヤツ 非同期 休日 ワイ 非同期処理

とある休日 娘（4歳）「ねえパパ」 ワイ「なんや、娘ちゃん？」 娘「非同期って何？」 ワイ「ひ、非道鬼！？」 娘「そうそう、非同期処理とかいうやつ」 ワイ「非道鬼を処理やて・・・！？」 非道鬼「ヴォ〜〜〜！！！」 娘「！？」 娘「・・・現れたわね、非道鬼」 娘「処理してあげる」 ワイ「娘ちゃん、まだ4歳なのに... 続きを読む

JavaScriptの ~. 構文って知ってる？　Promise Pipeliningが拓く非同期処理の未来 - Qiita

2020/01/05 21 users Qiita 構文 非同期処理 ES2015 未来

PromiseはES2015からJavaScriptに導入された機能で、非同期処理をいい感じに記述できるたいへんありがたいオブジェクトです。実は、Promiseの強化版ともいえる新機能、その名もHandledPromiseが提案されています。また、このHandledPromiseのための新構文~.も同時に提案されています。 例えば、~.を用いて次のようなプロ... 続きを読む

ラーメンで理解するasync/await - Qiita

2019/12/18 5 users await async Qiita ネスト 手法

JavaScript 2 Advent Calendar 2019 の19日目の記事です。 対象 async/awaitがなんだかはある程度知ってる人 async/awaitをなんとなくで使ってる人 そもそもasync/awaitって？ async/awaitは、Promiseによる非同期処理をより簡潔に効率よく記述できる手法。 普通にPromiseを使うとネストが深くて辛くなるのを救ってくれ... 続きを読む

JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加 | Web Scratch

2019/10/23 183 users async function Web scratch 追加

JavaScriptのPromiseについて学ぶ書籍であるJavaScript Promiseの本 v2をリリースしました。 Promise本 1.0.0をリリースしたのは2014年6月ですが、そこから少しづつアップデートしていました。 JavaScript Promiseの本を書きました | Web Scratch ES6がリリースされたのでPromiseについて学びましょう | Web Scratch 今... 続きを読む

JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？ - Qiita

2019/05/19 26 users Qiita TypeScript 直列 while 実行速度

JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？ 目的 こんな記事を書いた JavaScript/TypeScript で Promise を直列実行する で。たくさん書き方あるが、結局どれがいいのか？ そうだ、パフォーマンス測定しよう tl:dr; 「可読性 > 実行速度」なら、「for-of」または「while」 「... 続きを読む

私が async/await、promise をちゃんと理解するまでのステップ１，２，３ - Qiita

2019/04/28 409 users await resolve reject async 事柄

これは何？ javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。 書いてあること ステップ１）await 使えば待ってくれる 必要最小限の async/await、及び、エラーの catch の話 ステップ２）promise というもの promise の中には「正常データ = resolve」と「エラー = reject... 続きを読む

JavaScript Promiseの本を書きました | Web Scratch

2018/11/11 271 users JavaScript Promise パターン テスト 書籍

JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、... 続きを読む

JS基礎ー非同期とコールバック

2018/06/17 38 users コールバック サブルーチン function 引数 定義

初めに 自分は業務中でよくPromiseで非同期処理を実現しますが、そもそもなぜPromise使うのかをよくわからないので、今回は基礎からJavaScriptの非同期とコールバックについて整理してみます。 先ずは定義 非同期処理 ：JSにおける非同期処理は、プログラムコードを上から順に1行ずつ実行していきません コールバック ：他のコードの引数として渡されるサブルーチンである 例 function... 続きを読む

Promise と async/await の理解度をもう1段階上げる - Qiita

2018/05/01 121 users await async PROM Qiita 悲運

はじめに 表題のモチベーションで書き上げた備忘録に加筆・修正したものを記事にしました。 記事を読んで下さった方の Promise, async/await の理解度が 1LV でもアップしてくれたら嬉しいなと思います。 Promise とは Promise は非同期関数を扱うためのインターフェース Promise は 悲運のピラミッド型コールバック （ネスト地獄）を根本的に解決してくれる Prom... 続きを読む

2018年に見直した現代的なJavaScriptの記法を紹介するぜ - ICS MEDIA

2018/02/21 485 users ICS MEDIA JavaScript const 記法

2015年6月にECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。 const / let 、アロー関数、クラス構文、 Promise などが有名なところですが、ES2016、ES2017、ES2018、そして更にその先へJavaScriptの仕様は日々進化しています。筆者は ここ数年JavaScript（主にTypeScript）の開発を進めて... 続きを読む

Vim script で ES6 Promise 実装した - はやくプログラムになりたい

2017/12/18 65 users Vim script プログラム 実装 ES6 最後

2017 - 12 - 19 Vim script で ES6 Promise 実装した Vim Vim Advent Calendar 2017 の19日目の記事です． Vim script で ES6 の Promise を実装した話を書きます． もし Vim script が分からなくても，最後の章「Promise の実装の詳細」は Vim script とは独立した内容になっているので，P... 続きを読む

Promise で排他制御を行う - Qiita

2017/09/28 51 users npm Qiita mutex synchronized 構文

Promise での非同期処理時、排他制御を怠ったばっかりにバグを出してしまった、そんな経験ありませんか。私はあります。 スレッドを使う場合、Mutex や synchronized 等々、大抵排他制御を行うライブラリや構文などがセットでついてくるのですが、Promise/A+ には無いので自前で制御する必要がある。 なので、Promise で排他制御が出来るライブラリを npm から調べ、めぼし... 続きを読む