かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

TypeScript Promise.allSettled で成功したものだけフィルタリングしたい

typescript: "4.9.5"

Promise.allSettled

Promise.allSettled()
Promise.allSettled() は静的メソッドで、入力としてプロミスの反復可能オブジェクトを受け取り、単一の Promise を返します。この返されたプロミスは、入力のすべてのプロミスが決定したとき(空の反復可能オブジェクトが渡された場合を含む)に履行され、各プロミスの結果を記述するオブジェクトの配列が返されます。
Promise.allSettled() は、通常、正常に完了するために互いに依存しない複数の非同期タスクがある場合、または各プロミスの結果を常に知りたい場合に使用されます。 それに対して、 Promise.all() が返すプロミスは、タスクが他にも依存している場合や、どれかが拒否されたらすぐに拒否したい場合により適しているかもしれません。
cf. Promise.allSettled() - JavaScript | MDN

Promise.all との違い

Promise.all()
Promise.all() は、入力されたプロミスのいずれかが拒否されると直ちに拒否されます。それに対して、Promise.allSettled() が返すプロミスは、入力されたプロミスのいずれかが拒否されたかどうかに関わらず、すべての入力されたプロミスが完了するのを待ちます。
cf. Promise.all() - JavaScript | MDN

非同期処理の結果に依存がなく、実行できるものは全部実行したい時は Promise.allSettled を使うイメージ

TypeScript で Promise.allSettled の返り値を成功した値だけにフィルタリングする

Promise.allSettled の返り値は、非同期処理が成功した結果と失敗した結果が混ざっているので、成功したものだけ / 失敗したものだけでフィルタリングしたい事が当然ある。TypeScript で。

Promise.allSettled() の返り値は {status: "fulfilled" | "rejected", value?: any, reason?: string (Error message)} の配列なので status でフィルタリングすれば良い

Promise.allSettled で返却されるデータの型は次のようになっているので、これを使ったフィルターを作成する

allSettled<T extends readonly unknown[] | []>(values: T): Promise<{ -readonly [P in keyof T]: PromiseSettledResult<Awaited<T[P]>>; }>;

type PromiseSettledResult<T> = PromiseFulfilledResult<T> | PromiseRejectedResult;

成功 status: "fulfilled" のデータだけをフィルタリング

export const assertFulfilledFilter = <T>(
  input: PromiseSettledResult<T>
): input is PromiseFulfilledResult<T> => input.status === "fulfilled";


const App = async () => {
  const res = await Promise.allSettled(
    some.map(async (item) => await fetcher(item))
  );
  const SuccessedData = res.filter(assertFulfilledFilter);
}

失敗 status: "rejected" のデータだけをフィルタリング

export const assertRejectedFilter = <T>(
  input: PromiseSettledResult<T>
): input is PromiseRejectedResult<T> => input.status === "rejected";

const App = async () => {
  const res = await Promise.allSettled(
    some.map(async (item) => await fetcher(item))
  );
  const FailedData = res.filter(assertRejectedFilter);
}

 
おわり₍ ᐢ. ̫ .ᐢ ₎


[参考]

HTML 番号付きリスト ol を途中から始めたい

レイアウト的に別ブロックになってるけど続き順のリスト表現にしたいとか、ol の順番を途中から始めたかった

start 属性を使えばOK

start で指定した数字からの番号リストになる

<ol start="10">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>
↓
10. item 1
11. item 2
12. item 3

value 属性を使うと途中から番号を変更できる

<ol>
  <li>item 1</li>
  <li value="-1">item 2</li>
  <li>item 3</li>  
</ol>
↓
1. item 1
-1. item 2
0. item 3

マイナスの値も設定できる

reversed 属性があると番号が逆順になる

<ol reversed start="10">
  <li>item 1</li>
  <li >item 2</li>
  <li value="-1">item 2</li>
  <li>item 3</li>  
</ol>
↓
10. item 1
9. item 2
-1. item 3
-2. item 4

Sample

See the Pen Untitled by KIKIKI (@kikiki_kiki) on CodePen.

data-attribute + before 属性で独自設定するとかしなくても HTML の機能で存在してたの知らなかった!

おわり


[参考]

CSS 日本語をいい感じにできる line-break プロパティ

WEB サイトのコンテンツの主体は文章です。
その文章を日本語でもエディトリアルの禁則のようにいい感じにしてくれるプロパティを知ったのでメモ

line-break プロパティ

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
cf. line-break - CSS: Cascading Style Sheets | MDN

line-break プロパティの値

  • auto (default)
    • Break text using the default line break rule.
  • loose
    • Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.
    • 弱い禁則 (一般的に新聞などの短い行に使われる)
  • normal
    • Break text using the most common line break rule.
    • 一般的な改行規則
  • strict
    • Break text using the most stringent line break rule.
    • 強い禁則
  • anywhere
    • There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.
    • どこでも折り返す・単語間で折り返す場合のハイフネーション無し (句読点などの役物が先頭に来ることもある)

書いてても分かりづらいのでサンプルを作った

See the Pen line-break with Japanese text by KIKIKI (@kikiki_kiki) on CodePen.

カギ括弧や句読点、ぁ のような子音の扱いが微妙に変わる。
デフォルトの autoloose でもそんなに悪くないように感じる。strict が紙面のような最も強い禁則ではあるが、テキストの入るボックスサイズによっては改行が多くなってしまう可能性もあるので、コンテンツの入るエリアのサイズを考慮して決めるのが良さそう

おわり ₍ᐢ•ᴗ•ᐢ₎


[参考]