かもメモ

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

2024-01-01から1年間の記事一覧

React requestAnimationFrameでカウントダウンタイマーを作った

LP とかでよく出てくるやつ。個人的にはあまり好きじゃないけど、作るケースが割とあるので。 Window.requestAnimationFrame The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rat…

JavaScript 5刻みの数値に変換したい

与えられた数値を 0, 5, 10, 15, … と 5刻みに丸めたい 結論 const get5RoundNumber = (n: number) => Math.round(n * 2 / 10) * 10 / 2; 5 刻みの数値を得るには 10 刻み 0, 10, 20, 30, ... を 2 で割れば 0, 5, 10, 15, … ととなる 0, 10, 20, 30,… とい…

TypeScript 全てオプショナルなプロパティを引数に取る関数を引数無しで呼び出したい

タイトルのとおりなのだけど、日本語で書くとムズい type MyFuncArgumens = { defaultValue?: number; callback?: () => void; }; const myFunction = ({ defaultValue = 1; callback }: MyFuncArgumens) => { // ... }; 全てオプショナルなプロパティを持つ…

JavaScript の Date は難しい。日本時間(JST)で有効期限を設定したい!

JavaScript の Date は日付だけなら UTC 時間と解釈され、時間があると実行環境のローカル時間だと解釈されてしまうので注意が必要。 どのタイムゾーンの日時か明示することで、実行環境に依る日付解釈の齟齬を無くすことができる

JavaScript ABテスト localStorage 期限付きの値を保存したい

AB テストを行うための状態を保存したい。AB テストなので一定時間経過したら A / B の状態をリセットしたい。 同じブラウザなら一定時間同じ状態を表示させたいくらいの要件だったので手っ取り早く localStorage に値を保存したい。期限付きで。 localStora…

React Framer Motion を使ってふわっと出てくるモーダルやメニューを作る

React で Modal や Drawer で作る時に state の変更で表示 / 非表示を切り替えるとパッ出たり消えたりするので UX 的に美しくないからアニメーションをさせたい。 chakra UI のような出来上がっている UI ライブラリ無しで実装してみたのでメモ (chakra UI使…

HTML input type="number" で 小数を使いたい!

input[type="number"] で小数を入力可能にするには step 属性を使う必要がある

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

typescript: "4.9.5" Promise.allSettled Promise.allSettled() Promise.allSettled() は静的メソッドで、入力としてプロミスの反復可能オブジェクトを受け取り、単一の Promise を返します。この返されたプロミスは、入力のすべてのプロミスが決定したとき…

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 属性を使…

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

WEB サイトのコンテンツの主体は文章です。 その文章を日本語でもエディトリアルの禁則のようにいい感じにしてくれるプロパティを知ったのでメモ line-break プロパティ The line-break CSS property sets how to break lines of Chinese, Japanese, or Kore…

React TypeScript 動的にタグを変えたい

Chakra-UI にあるような as props で動的にタグを変更できるコンポーネントを作りたかった React.createElement を使う方法 import { createElement, FC, ReactNode } from 'react'; type HeadingProps = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; c…

TypeScript レスポンシブ時のイベントには MediaQueryListAPI matchMedia が便利だった!

レスポンシブ時の View の変化は基本的に CSS のメディアクエリで行いたいが、 window サイズが大きくなったときにモバイル用のモーダルメニューを閉じるとか、意外とレスポンシブ時に JS でイベントを実行したい時がある window.resize を使った今までやり…

Node.js path.resolve は末尾の `/` が消える仕様になってる

表題の通り。 DB に入っている文字列から末尾に / のあるパスを作りたかったが、最終的に path.resolve を通すと末尾の / が削除される import path from 'path'; path.resolve('/', '/foo/bar/'); // -> /foo/bar The resulting path is normalized and tra…

PHP 配列からいい感じに CSS のクラス名を作りたい

3億年ぶりに古の WordPress 製のサイトを更新する必要があり、PHP のテンプレートで CSS のクラス名を動的に作成する必要があった JavaScript で言うところの classnames のような挙動をさせたい CSS のクラス class="foo bar mofu" のような形 スペース区切…

ムームードメインに移管したドメインが clientHold になり使えなくなってた

ドメインの情報が clientHold になってしまっていた。ムームードメインでは WHOIS 情報を代理公開にしているとドメインの認証が完了せず、ドメインがロックされてしまう

React TypeScript 改行が含まれれるテキストをいい感じに改行させたい

前にも同じようなことやったけど React.createElement を使った TypeScript 版を作ったのでメモ import { ReactElement, createElement } from 'react'; const newlineRegex = /(\r\n|\r|\n)/g; export const nl2br = (text: string): (string | ReactElemen…

CSS リストをいい感じに折り返す横並びにしたい

リストの間隔は gap で指定したい場合、flex だと各アイテムの width を設定しなければならず面倒 例えば上記の画像のように gap: 24px で 3つ並びにしたいと思った場合、リストアイテムの width を 33.333% にするとアイテム間の間隔分が足らず 100% を超え…

Node.js ファイル名から拡張子を取得したい

正引き表現や . で区切る方法を考えてたけど path を使えば簡単だった path.extname(path) で拡張子を取得できる path.extname で取得できる拡張子は . 始まりの文字列 拡張子が無い場合は空文字列が返される サーチクエリがある場合は拡張子含まれる import…

JavaScript JSON を見やすく出力する

pre とかにデータを JSON にして表示したい時に 1行だと見づらいのいい感じに改行して表示させたい JSON.stringify() のオプションでいい感じに表示できる json-formatter-js とかリッチなライブラリもあるけど、必要最小限なら JSON.stringify(data, null, …

TypeScript Object.entries の型をいい感じにしたい

環境 TypeScript v5 引数のオブジェクトを Record<string, unknown> とするパターン 返り値に as を使わないとタイプエラーになる 返り値 Entries を定義するパターン type Entries<T> = (keyof T extends infer U ? U extends keyof T ? [U, T[U]] : unknown : unknown)[]; expo</t></string,>…

かもメモ 10周年と活動の見直しについて

このブログは今後雑な備忘録になります

OpenStreetMap + React Leaflet で地図を表示したメモ

最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leafl…

Next.js SSG したサイトを別ドメインから参照させててハマった

あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイ…

Google Spreadsheet ◯年の月末日のリストを自動で作りたい

忘れてたのでメモ Spreadsheet では 2024年1月 のような表記でも日付フォーマットの場合日にちを持っている。なので、2024-01-01 の 2024年1月 と 2024-01-31 の 2024年1月 は別物として扱われる。 例えば年始から各月末の変化をグラフにする際に年始は年始…

TypeScript React クリップボードにコピーする hooks とコンポーネント作ってみた

navigator.clipboard.writeText を使ってクリップボードに任意のテキストをコピーさせることができる

ES2023 JavaScript 配列から特定の要素を削除するのに toSpliced が便利

フロントエンドでやることはだいたい配列の操作だと感じてます。 その中でも元の配列を非破壊に特定のインデックスの要素を配列から削除するのが意外と面倒でした 今まで方法 1. filter で削除する要素を取り除く const result = array.filter((item) => ite…

SVG に alt の代わりになる属性を付けたい

React / Next で SVG をコンポーネントとして使うことが多かったのだけれど、SEO が必要なメディアの制作で SVG に image のような alt が設定できないか気になって調べてみたメモ img タグを使う <img src="/path/to/logo.svg" alt="ロゴ" /> font-size で大きさを変えたり、color で色を変えたりする…

Vercel Next.js 環境ごとに title, favicon を変えたい

Vercel にホストした Next.js のアプリがあり、local環境、preview (ステージング)、本番環境 があり開発中の確認で今どれを見ているのかドメインを見なくても解るように title と favicon を変更して判別しやすいようにした 環境を判定する Vercel の previ…

Next.js 構造化されたパンくずリストを作りたい

昨年メディアのような SEO が大切になる Next.js の案件があり、ページの構造を表すパンくずリスト (BreadcrumbList) も重要なのでちゃんと構造化されたものを作ってみたのでそのメモ。 構成 Next.js v13 (Pages Router) React v18 TypeScript v5.2 パンくず…

CSS 日本語で <wbr /> が効かないにハマる

レスポンシブなサイトを実装する際に、モバイルなどエリアが小さくなる時にいい感じにテキストを改行させたい・デザイナーの要望で改行位置を固定させたいケースがあります。改行位置のためにメディアクエリで display を切り替えるのはイケてないので避けた…