Home

フィリピン：Smart のおすすめプロモ

May 25, 2022

（将来もしまた渡航したときのために、個人的なメモも兼ねて記録。） お断り：プロモが新規追加・更新されるに従って、本記事の情報が古くなっている可 ...

ブラウザの「戻る／進む」でページが開かれたことを検知する方法

May 2, 2022

TL;DR # PerformanceNavigationTiming.type が "back_forward" であれば、ブラウザの「戻る／進む」でページが開かれています。 function printNavigationType() { const perfEntries = performance.getEntriesByType('navigation'); perfEntries.forEach((entity) => { console.log(entity.type); // e.g. "back_forward" }); } 説明 # ブラウザ環境でグローバルに定義さ ...

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. ...