JavaScript
いわゆるガチャガチャ動かしたいという要望のホームページ制作(非 React)で初めて GSAP というアニメーションライブラリを使ってる。 できることがありすぎて、まだ理解しきれてないが今回は ScrollTrigger を使って CSS のクラスを変更しアニメーションを発…
Webpack を使って SCSS をコンパイルしているプロジェクトで久々に build したら下記のようなエラーが発生した $ npx webpack --config ./webpack.config.js --mode production … webpack-fix-style-only-entries: removing js from style only module: js/c…
React v.18 で作成したアプリで A props object containing a "key" prop is being spread into JSX という Warning が発生した Warning: props object containing a "key" prop is being spread into JSX: let props = {key: someKey, label: ..., size: ..…
TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ ESLint no-unused-expressions error が発生 const timerRef = useRef<number | null>(null); // … timerRef.current && clearTimeout(timerRef.current); // =</number>…
レンダリング後に useEffect で何かしらの初期化処理を行って、完了したことを明示したい時など 1回だけ更新する state を作りたいケース 別に useState でも良いのだけれど、useState は setter が返されるので state を自由に更新できてしまうので、state …
LP とかでよく出てくるやつ。個人的にはあまり好きじゃないけど、作るケースが割とあるので。 Window.requestAnimationFrame The frequency of calls to the callback function will generally match the display refresh rate. The most common refresh rat…
与えられた数値を 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,… とい…
タイトルのとおりなのだけど、日本語で書くとムズい type MyFuncArgumens = { defaultValue?: number; callback?: () => void; }; const myFunction = ({ defaultValue = 1; callback }: MyFuncArgumens) => { // ... }; 全てオプショナルなプロパティを持つ…
JavaScript の Date は日付だけなら UTC 時間と解釈され、時間があると実行環境のローカル時間だと解釈されてしまうので注意が必要。 どのタイムゾーンの日時か明示することで、実行環境に依る日付解釈の齟齬を無くすことができる
AB テストを行うための状態を保存したい。AB テストなので一定時間経過したら A / B の状態をリセットしたい。 同じブラウザなら一定時間同じ状態を表示させたいくらいの要件だったので手っ取り早く localStorage に値を保存したい。期限付きで。 localStora…
React で Modal や Drawer で作る時に state の変更で表示 / 非表示を切り替えるとパッ出たり消えたりするので UX 的に美しくないからアニメーションをさせたい。 chakra UI のような出来上がっている UI ライブラリ無しで実装してみたのでメモ (chakra UI使…
typescript: "4.9.5" Promise.allSettled Promise.allSettled() Promise.allSettled() は静的メソッドで、入力としてプロミスの反復可能オブジェクトを受け取り、単一の Promise を返します。この返されたプロミスは、入力のすべてのプロミスが決定したとき…
Chakra-UI にあるような as props で動的にタグを変更できるコンポーネントを作りたかった React.createElement を使う方法 import { createElement, FC, ReactNode } from 'react'; type HeadingProps = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; c…
レスポンシブ時の View の変化は基本的に CSS のメディアクエリで行いたいが、 window サイズが大きくなったときにモバイル用のモーダルメニューを閉じるとか、意外とレスポンシブ時に JS でイベントを実行したい時がある window.resize を使った今までやり…
表題の通り。 DB に入っている文字列から末尾に / のあるパスを作りたかったが、最終的に path.resolve を通すと末尾の / が削除される import path from 'path'; path.resolve('/', '/foo/bar/'); // -> /foo/bar The resulting path is normalized and tra…
3億年ぶりに古の WordPress 製のサイトを更新する必要があり、PHP のテンプレートで CSS のクラス名を動的に作成する必要があった JavaScript で言うところの classnames のような挙動をさせたい CSS のクラス class="foo bar mofu" のような形 スペース区切…
前にも同じようなことやったけど React.createElement を使った TypeScript 版を作ったのでメモ import { ReactElement, createElement } from 'react'; const newlineRegex = /(\r\n|\r|\n)/g; export const nl2br = (text: string): (string | ReactElemen…
正引き表現や . で区切る方法を考えてたけど path を使えば簡単だった path.extname(path) で拡張子を取得できる path.extname で取得できる拡張子は . 始まりの文字列 拡張子が無い場合は空文字列が返される サーチクエリがある場合は拡張子含まれる import…
pre とかにデータを JSON にして表示したい時に 1行だと見づらいのいい感じに改行して表示させたい JSON.stringify() のオプションでいい感じに表示できる json-formatter-js とかリッチなライブラリもあるけど、必要最小限なら JSON.stringify(data, null, …
環境 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,>…
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leafl…
あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイ…
navigator.clipboard.writeText を使ってクリップボードに任意のテキストをコピーさせることができる
フロントエンドでやることはだいたい配列の操作だと感じてます。 その中でも元の配列を非破壊に特定のインデックスの要素を配列から削除するのが意外と面倒でした 今まで方法 1. filter で削除する要素を取り除く const result = array.filter((item) => ite…
昨年メディアのような SEO が大切になる Next.js の案件があり、ページの構造を表すパンくずリスト (BreadcrumbList) も重要なのでちゃんと構造化されたものを作ってみたのでそのメモ。 構成 Next.js v13 (Pages Router) React v18 TypeScript v5.2 パンくず…
SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ 環境 Node.js v18.18 path.join に URL を渡すとhttps:// が https:/ になってしまう http://, https:// から始まる…
配列からランダムに n 個の要素を取り出したい要件を実装したのでメモ 要件 配列からランダムに n 個の要素を取り出す 取り出す要素に被りがないこと 方針 配列をシャッフルする .slide(0, n) で要素を取り出す Math.random() * array.index のような形で配…
Next.js を使ったサイトを開発していて、外部の API を叩いたり CDN のリンクを使ったりするので本番環境と同じ https (TLS)で開発できたほうが環境差によるバグを早めに発見できるので開発環境も https にしたかった 公式のドキュメントに server.js を使っ…
API から取得したデータが string | undefined のリストだったので filter で typeof === 'string' のものだけにしたのだけフィルター後の配列の型がうまく行かなかったのでメモ 問題: 型情報がフィルタリングされない const data = ['星宮いちご', '霧矢あ…
Next.js link タグで stylesheet を追加するときは next/head ではなく next/document の を使う
