Home

JavaScript：失敗するたびに待ち時間の間隔を広げていくリトライ処理関数（エクスポネンシャルバックオフ）

April 22, 2022

関数（TypeScript） # TypeScript で記載しています。 /** Sleeps for the specified time (milliseconds). */ function sleep(timeMs: number): Promise<void> { return new Promise((resolve) => { setTimeout(resolve, timeMs); }); } /** Execute function, if it fails, retry after waiting. */ async function tryWithWaiting( callback: () => any, waitTimeMs: number, limitTimeMs: number ): Promise<any> ...

Flutter の状態管理：setState / Provider / Riverpod をコードで見比べる

March 26, 2022

サンプルコードのウィジェットの階層構造 # App └ Layer1 └ Layer2 ├ Layer3A └ Layer3B setState # import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp(home: Layer1()); } } class Layer1 extends StatefulWidget { const Layer1({Key? key}) : super(key: ...

Flutter の 状態管理で Riverpod が公式の推奨には至っていない理由

March 25, 2022

（個人的メモです。） Riverpod # Flutter における状態管理方法の選択肢は公式ページにも記載がある。 List of state management approaches | Flutter https://docs.flutter.dev/development/data-and-backend/state-mgmt/options シンプルに setState を使用する以外では Provider か Riverpod のパッ ...

React: ユーティリティ <img> コンポーネント（エラーハンドリング / alt 設定）

March 6, 2022

こんなのどうでしょう？ # const fallbackImage = '...'; type Props = { src: JSX.IntrinsicElements['img']['src']; alt?: JSX.IntrinsicElements['img']['alt']; srcOnError?: JSX.IntrinsicElements['img']['src']; className?: JSX.IntrinsicElements['img']['className']; }; function Component(props: Props) { const { src, alt, srcOnError, className } = props; const srcFileName = src?.split('/').pop()?.split('.').shift(); return ( <img className={className} src={src} alt={alt || srcFileName} onError={(e) => { e.currentTarget.onerror = null; e.currentTarget.src = srcOnError ?? fallbackImage; }} /> ); } export ...

JavaScript でイベント待ちする方法

February 27, 2022

例えば Window.alert() のように、ユーザがボタンをクリックするまでの間、処理を止めたい場面があったとします。 このとき、パッと思いつくのは、 ビジーウェイトする ...

ソースコードの配置方法を Redux に学ぶ

February 26, 2022

Redux はもう使っていないが、ソースコード配置の考え方はどのプロジェクトでも役に立っているのでここにメモ。 Since Redux is just a data store library, it has no direct opinion on how your project should be structured. ...

JavaScript: クラスの Tips - メソッドチェーン / ファクトリーメソッド / クラス名でインスタンス化

February 24, 2022

this を返すようにするとメソッドチェーンで書けるので便利 # class Calculator { #number; constructor(initial = 0) { this.#number = initial; } print() { console.log(this.#number); } add(num) { this.#number += num; return this; } subtract(num) { this.#number -= num; return this; } multiply(num) { this.#number *= num; return this; } divide(num) { this.#number ...

React: １つの state に対して複数箇所で useEffect / setState すると最終的に有効なのはどの値か

February 21, 2022

試行その１ # import { useState, useEffect } from 'react'; export default function Component() { const [int, setInt] = useState<number>(); useEffect(() => setInt(1), []); useEffect(() => setInt(3), []); useEffect(() => setInt(2), []); console.log(int); return <></>; } 結果その１ # コンソールには以下の順番で出力されます。 undefined 2 初回レ ...