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

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

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

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

正引き表現や . で区切る方法を考えてたけど 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 を使った別ドメイ…

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

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

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

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

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

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

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